Add a bespoke reducer

src/app/ReactDockableApp.tsx

@@ -1,4 +1,4 @@
-import React, {useState /*, useReducer*/} from 'react';
+import React, {useState, useReducer} from 'react';
 import {createRoot} from 'react-dom/client';
 import {PanelState} from 'react-dockable-ts';
 
@@ -22,7 +22,12 @@ import {
 import {mapMaker} from './breaditor/documents/MapDocument';
 import {textMaker} from './breaditor/documents/TextDocument';
 import {spriteMaker} from './breaditor/documents/SpriteDocument';
-import {TOOLS} from './breaditor/tools/constants';
+// import {TOOLS} from './breaditor/tools/constants';
+
+import {
+  breaditorReducer,
+  getInitialState,
+} from './state-management/in-memory/main_reducer';
 
 import {DocumentInfo, WidgetInfo} from '../../types/global';
 
@@ -192,6 +197,12 @@ function getDocumentState() {
 }
 
 function App() {
+  const [state, dispatch] = useReducer(breaditorReducer, getInitialState());
+
+  if (dispatch == undefined) {
+    console.info(state);
+  }
+
   const [panelState, setPanelState] = useState<PanelState[]>(
     createInitialPanelState(),
   );
@@ -225,9 +236,7 @@ function App() {
         data-testid="breaditor-browser-app"
       >
         <MenuBar
-          dispatch={(foo: any) => {
-            console.log('I am a fake dispatch in ReactDockableApp.  Yay.', foo);
-          }}
+          dispatch={dispatch}
           widgets={getCurrentPanels()}
           hidden={
             {
@@ -237,11 +246,8 @@ function App() {
           getMenu={getMenu}
         />
         <PropertyBar
-          state={{}}
-          dispatch={(bar) => {
-            console.log('Another fake dispatch that was passed: ', bar);
-          }}
-          tool={TOOLS.Brush}
+          state={{tool: {activeTool: 0}}}
+          dispatch={dispatch}
           view={{}}
         />
         <div
@@ -253,12 +259,7 @@ function App() {
             height: 'calc(100vh - 117px)',
           }}
         >
-          <ToolBar
-            selected={{}}
-            dispatch={(foo) => {
-              console.log('A fake dispatch that was passed: ', foo);
-            }}
-          />
+          <ToolBar selected={{}} dispatch={dispatch} />
           <WorkspaceArea
             key={'main_workspace'}
             style={{
@@ -278,7 +279,10 @@ function App() {
             themeClass={'nullTheme'}
           />
         </div>
-        <StatusBar initialStatuses={['Welcome to the Breaditor', '❤', '🦵']} />
+        <StatusBar
+          initialStatuses={['Welcome to the Breaditor', '❤', '🦵']}
+          dispatch={dispatch}
+        />
       </div>
     </WindowProxy>
   );

src/app/layout/components/MenuBar.tsx

@@ -10,7 +10,7 @@ import css from './MenuBar.module.css';
 interface MenuBarProps {
   dispatch: ({}: any) => void;
   widgets: WidgetInfo[];
-  hidden: {};
+  hidden: any;
   getMenu: () => any;
 }
 

src/app/layout/components/PropertyBar.tsx

@@ -9,18 +9,35 @@ import css from './PropertyBar.module.css';
 
 import * as icons from '../../ui/icons';
 
+// interface BrushToolState {}
+
+interface PropertyBarState {
+  tool: {
+    activeTool: number;
+    brush?: any; //BrushToolState;
+  };
+}
+
 interface PropertyBarProps {
   dispatch: ({}: any) => void;
-  state: {};
-  tool: {};
-  view: {};
+  state: PropertyBarState;
+  view: any;
 }
 
 const PropertyBar: React.FC<PropertyBarProps> = (props) => {
   function getProperties() {
-    switch (props.tool) {
+    const {activeTool} = props.state.tool;
+    const {dispatch, state, view} = props;
+
+    switch (activeTool) {
       case TOOLS.Brush:
-        return <BrushProperties {...props} />;
+        return (
+          <BrushProperties
+            {...{dispatch}}
+            state={state.tool.brush}
+            {...{view}}
+          />
+        );
       /*        
       case TOOLS.Zoom:
         return <ZoomProperties {...props} />;
@@ -77,7 +94,7 @@ interface BrushPropertiesProps {
 }
 const BrushProperties: React.FC<BrushPropertiesProps> = (props) => {
   let brush: BrushToolProps;
-  if (props.state.brush) {
+  if (props.state && props.state.brush) {
     brush = props.state.brush;
   } else {
     brush = {

src/app/layout/components/StatusBar.tsx

@@ -6,6 +6,7 @@ import css from './PropertyBar.module.css';
 
 interface StatusBarProps {
   initialStatuses: string[];
+  dispatch: ({}: any) => void;
 }
 
 let _stateUpdate = (data: any) => {

src/app/state-management/in-memory/main_reducer.ts

@@ -0,0 +1,32 @@
+import {createReducer} from './reducer.inc';
+import {toolsReducer} from './reducers/tools.reducer';
+
+//import documentsReducer from './reducers/documents.reducer.js';
+//import workspaceReducer from './reducers/workspace.reducer.js';
+
+//import widgetsReducer from './reducers/widgets.reducer.js';
+
+const breaditorReducer = createReducer(
+  {},
+  {
+    foo: createReducer(
+      {},
+      {
+        FOO_ACTION: (state: any, action: any) => {
+          return {...state, a: state.a + action.foo};
+        },
+      },
+    ),
+    //tools: toolsReducer,
+  },
+);
+
+const taco = function () {
+  toolsReducer;
+};
+
+const getInitialState = function () {
+  return breaditorReducer({}, {action: 'INITIALIZE_STATE'});
+};
+
+export {breaditorReducer, getInitialState, createReducer, taco};

src/app/state-management/in-memory/reducer.inc.ts

@@ -0,0 +1,37 @@
+type StringToAnyMap = {[key: string]: any};
+type GenericState = StringToAnyMap;
+
+type GenericAction = {
+  [key: string]: any;
+  type: string;
+};
+
+type ReducerMap<S extends GenericState, A extends GenericAction> = {
+  [key: string]: (state: S, action: A) => S;
+};
+
+type Reducer<S, A> = (state?: S, action?: A) => S;
+
+function createReducer<S extends GenericState, A extends GenericAction>(
+  initialState: S,
+  handlers: ReducerMap<S, A>,
+): Reducer<S, A> {
+  const myHandlers = handlers;
+  const myInitialState = initialState;
+
+  return function (state: S = myInitialState, action?: A): S {
+    if (action == null) {
+      return myInitialState;
+    } else {
+      if (action && myHandlers.hasOwnProperty(action.type)) {
+        return myHandlers[action.type](state, action);
+      } else {
+        // console.error(`Unhandled action: ${action.type} `);
+      }
+      return state;
+    }
+  };
+}
+
+export type {StringToAnyMap, Reducer};
+export {createReducer};

src/app/state-management/in-memory/reducers/tools.reducer.test.ts

@@ -0,0 +1,24 @@
+import {
+  toolsReducer,
+  initialToolState,
+  /*Reducer /*GenericAction, Reducer*/
+} from './tools.reducer';
+
+test('toolsReducer INIT', () => {
+  const result = toolsReducer();
+
+  expect(result.a).toBe(0);
+  expect(result.b).toBe(0);
+});
+
+test('toolsReducer INC_A', () => {
+  const result = toolsReducer(initialToolState, {type: 'INC_A', foo: 2});
+
+  expect(result.a).toBe(2);
+});
+
+test('toolsReducer INC_A', () => {
+  const result = toolsReducer(initialToolState, {type: 'INC_B', bar: 7});
+
+  expect(result.b).toBe(7);
+});

src/app/state-management/in-memory/reducers/tools.reducer.ts

@@ -0,0 +1,47 @@
+import {
+  createReducer,
+  Reducer /*GenericAction, Reducer*/,
+} from '../reducer.inc';
+
+import {TOOLS} from '../../../breaditor/tools/constants'; //TODO: This should be in *THIS* file, right?
+// TODO: and should have a concrete union type I think?
+
+interface ToolState {
+  activeTool: number; // Tool index, really
+  tool: any; // how to type this?
+  a: number;
+  b: number;
+}
+
+interface ToolActionIncA {
+  foo: number;
+  type: 'INC_A';
+}
+
+interface ToolActionIncB {
+  bar: number;
+  type: 'INC_B';
+}
+
+type ToolAction = ToolActionIncA | ToolActionIncB;
+
+const initialToolState: ToolState = {
+  activeTool: TOOLS.Brush,
+  tool: {},
+  a: 0,
+  b: 0,
+};
+
+const toolsReducer: Reducer<ToolState, ToolAction> = createReducer(
+  initialToolState,
+  {
+    INC_A: (state, action: ToolActionIncA) => {
+      return {...state, a: state.a + action.foo};
+    },
+    INC_B: (state, action: ToolActionIncB) => {
+      return {...state, b: state.b + action.bar};
+    },
+  },
+);
+
+export {initialToolState, toolsReducer};

src/app/state-management/in-memory/store.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import reducer from './reducer.js';
+import reducer from './main_reducer.js';
 
 class Store {
   state = reducer(null, {}); // initialize?