Showing state being passed into useIdeState dispatch middleware #224

Merged
franknoirot merged 2 commits from franknoirot/218 into main 2021-03-05 07:29:43 +01:00
6 changed files with 71 additions and 9 deletions

View File

@@ -6,10 +6,16 @@ export const IdeContext = createContext()
const IdeToolbarNew = () => { const IdeToolbarNew = () => {
const [state, dispatch] = useIdeState() const [state, dispatch] = useIdeState()
function setIdeType(ide) { dispatch({ type: 'setIdeType', payload: { message: ide } }) }
return ( return (
<IdeContext.Provider value={{ state, dispatch }}> <IdeContext.Provider value={{ state, dispatch }}>
<div className="p-8 border-2"> <div className="p-8 border-2">
<div>hi I'm the toolbar</div> <div>hi I'm the toolbar</div>
<nav class="flex">
<button onClick={() => setIdeType('openCascade')} class="p-2 br-2 border-2 m-2 bg-blue-200">Switch to OpenCascade</button>
<button onClick={() => setIdeType('openScad')} class="p-2 br-2 border-2 m-2 bg-indigo-200">Switch to OpenSCAD</button>
</nav>
<IdeContainer /> <IdeContainer />
</div> </div>
</IdeContext.Provider> </IdeContext.Provider>

View File

@@ -9,7 +9,8 @@ const IdeViewer = () => {
<div> <div>
I should be showing an{' '} I should be showing an{' '}
<span className="font-mono uppercase">{state.objectData?.type}</span>{' '} <span className="font-mono uppercase">{state.objectData?.type}</span>{' '}
right now right now with the data{' '}
<span className="font-mono uppercase">{state.objectData?.data}</span>{' '}
</div> </div>
</div> </div>
) )

View File

@@ -0,0 +1,7 @@
import openScad from './openScadController'
import openCascade from './newCascadeController'
export const cadPackages = {
openScad,
openCascade,
}

View File

@@ -0,0 +1,35 @@
// Rename this file to remove "new" once Cascade integration is complete
export const render = async ({ code, settings }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const shouldReject = Math.random() < 0.7
if (shouldReject) {
resolve({
objectData: {
type: 'stl',
data: ((Math.random() * 256 + 1) >>> 0).toString(2), // Randomized 8-bit numbers for funzies
},
message: {
type: 'message',
message: `bodies rendered by: ${code}`,
},
})
} else {
reject({
message: {
type: 'error',
message: 'unable to parse line: x',
},
})
}
}, 700)
})
}
const openCascade = {
render,
// More functions to come
}
export default openCascade

View File

@@ -1,12 +1,12 @@
export const renderOpenScad = async ({ code, settings }) => { export const render = async ({ code, settings }) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
const shouldReject = Math.random() < 0.7 const shouldReject = Math.random() < 0.7
if (shouldReject) { if (shouldReject) {
resolve({ resolve({
objectData: { objectData: {
type: Math.random() > 0.6 ? 'stl' : 'jpg', type: 'jpg',
data: 'some binary', data: ((Math.random() * 256 + 1) >>> 0).toString(2), // Randomized 8-bit numbers for funzies
}, },
message: { message: {
type: 'message', type: 'message',
@@ -24,3 +24,11 @@ export const renderOpenScad = async ({ code, settings }) => {
}, 700) }, 700)
}) })
} }
const openScad = {
render,
// more functions to come
}
export default openScad

View File

@@ -1,9 +1,9 @@
import { useReducer } from 'react' import { useReducer } from 'react'
import { renderOpenScad } from 'src/helpers/openScadController' import { cadPackages } from 'src/helpers/cadPackages'
export const useIdeState = () => { export const useIdeState = () => {
const initialState = { const initialState = {
ideType: 'openscad', ideType: 'openScad',
consoleMessages: [ consoleMessages: [
{ type: 'error', message: 'line 15 is being very naughty' }, { type: 'error', message: 'line 15 is being very naughty' },
{ type: 'message', message: '5 bodies produced' }, { type: 'message', message: '5 bodies produced' },
@@ -36,14 +36,19 @@ export const useIdeState = () => {
? [...state.consoleMessages, payload.message] ? [...state.consoleMessages, payload.message]
: payload.message, : payload.message,
} }
case 'setIdeType':
return {
...state,
ideType: payload.message,
}
} }
} }
function dispatchMiddleware(dispatch) { function dispatchMiddleware(dispatch, state) {
return ({ type, payload }) => { return ({ type, payload }) => {
switch (type) { switch (type) {
case 'render': case 'render':
renderOpenScad({ code: payload.code }) cadPackages[state.ideType].render({ code: payload.code })
.then(({ objectData, message }) => .then(({ objectData, message }) =>
dispatch({ dispatch({
type: 'healthyRender', type: 'healthyRender',
@@ -65,5 +70,5 @@ export const useIdeState = () => {
} }
const [state, dispatch] = useReducer(reducer, initialState) const [state, dispatch] = useReducer(reducer, initialState)
return [state, dispatchMiddleware(dispatch)] return [state, dispatchMiddleware(dispatch, state)]
} }