SLEIGHT-45, SLEIGHT-46: add React Router for new screens

synkarius · Sep 29, 2022 · 49bab1d · 49bab1d
1 parent 50c8b76
commit 49bab1d
Show file tree

Hide file tree

Showing 56 changed files with 371 additions and 329 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "react-bootstrap-icons": "^1.8.2",
     "react-dom": "^18.1.0",
     "react-redux": "^8.0.1",
+    "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,25 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
 import { Navigation } from './ui/other-components/menu/Navigation';
-import { SidebarComponent } from './ui/other-components/sidebar/SidebarComponent';
-import { Col, Row } from 'react-bootstrap';
-import { EditorComponent } from './ui/other-components/menu/editor/EditorComponent';
 import { InjectionContext } from './di/injector-context';
 import { container } from './di/config/brandi-config';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { EditorViewComponent } from './ui/other-components/views/EditorViewComponent';
 
-function App() {
+const App: React.FC<{}> = () => {
   return (
-    <div>
-      <InjectionContext.Provider value={container}>
-        <Navigation />
-        <Row>
-          <Col sm="4">
-            <SidebarComponent />
-          </Col>
-          <Col sm="8">
-            <EditorComponent />
-          </Col>
-        </Row>
-      </InjectionContext.Provider>
-    </div>
+    <InjectionContext.Provider value={container}>
+      <Navigation />
+      <BrowserRouter>
+        <Routes>
+          {/* TODO: get rid of this "/*" path when the other 
+          views get added and the wizard is default */}
+          <Route path="/*" element={<EditorViewComponent />} />
+          <Route path="editor/*" element={<EditorViewComponent />} />
+        </Routes>
+      </BrowserRouter>
+    </InjectionContext.Provider>
   );
-}
+};
 
 export default App;
diff --git a/src/app/store.ts b/src/app/store.ts
@@ -1,5 +1,4 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
-import { editorFocusReducer } from '../ui/other-components/menu/editor/editor-focus-reducers';
 import { actionReduxReducer } from '../core/reducers/action-reducers';
 import { commandReduxReducer } from '../core/reducers/command-reducers';
 import { contextReduxReducer } from '../core/reducers/context-reducers';
@@ -12,7 +11,6 @@ export const store = configureStore({
     action: actionReduxReducer,
     command: commandReduxReducer,
     context: contextReduxReducer,
-    focus: editorFocusReducer,
     selector: selectorReduxReducer,
     spec: specReduxReducer,
     variable: variableReduxReducer,

diff --git a/src/core/common/consts.ts b/src/core/common/consts.ts
@@ -2,3 +2,5 @@ export const UNSELECTED_ID = 'unselected-sleight-id';
 export const UNSELECTED_ENUM = 'unselected-sleight-enum';
 
 export const USE_DEFAULT = 'Use Default';
+
+export const EMPTY_PATH = '/';
diff --git a/src/core/reducers/command-reducers.spec.ts b/src/core/reducers/command-reducers.spec.ts
@@ -4,7 +4,6 @@ import { createCommand, Command } from '../../data/model/command/command';
 import { CommandReducerActionType } from '../../ui/model/command/command-editing-context';
 import {
   CommandsState,
-  selectCommand,
   saveCommand,
   commandReduxReducer,
   commandReactReducer,
@@ -28,7 +27,6 @@ describe('command reducer', () => {
 
     const initialState: CommandsState = {
       saved: {},
-      editingId: undefined,
     };
 
     const actual = commandReduxReducer(initialState, saveCommand(obj));
@@ -47,7 +45,6 @@ describe('command reducer', () => {
 
     const initialState: CommandsState = {
       saved: {},
-      editingId: undefined,
     };
 
     const actual = commandReduxReducer(initialState, saveCommand(obj));
@@ -58,38 +55,11 @@ describe('command reducer', () => {
     expect(actual.saved).toEqual(expected);
   });
 
-  it('should handle select', () => {
-    const initialState: CommandsState = {
-      saved: {},
-      editingId: undefined,
-    };
-    const actual = commandReduxReducer(initialState, selectCommand('asdf'));
-
-    expect(actual).toEqual({
-      saved: {},
-      editingId: 'asdf',
-    });
-  });
-
-  it('should handle clear', () => {
-    const initialState: CommandsState = {
-      saved: {},
-      editingId: 'asdf',
-    };
-    const actual = commandReduxReducer(initialState, selectCommand());
-
-    expect(actual).toEqual({
-      saved: {},
-      editingId: undefined,
-    });
-  });
-
   it('should handle delete', () => {
     const obj = createCommand();
 
     const preReducerState: CommandsState = {
       saved: { [obj.id]: obj },
-      editingId: undefined,
     };
 
     const actual = commandReduxReducer(preReducerState, deleteCommand(obj.id));

diff --git a/src/core/reducers/command-reducers.ts b/src/core/reducers/command-reducers.ts
@@ -16,12 +16,10 @@ import { Tokens } from '../../di/config/brandi-tokens';
 
 export type CommandsState = {
   readonly saved: Record<string, Command>;
-  readonly editingId?: string;
 };
 
 const initialState: CommandsState = {
   saved: {},
-  editingId: undefined,
 };
 
 const addDefaults = (command: Command): Command => {
@@ -36,9 +34,6 @@ const commandsSlice = createSlice({
   name: 'commands',
   initialState,
   reducers: {
-    selectCommand: (state, action: PayloadAction<string | undefined>) => {
-      state.editingId = action.payload;
-    },
     saveCommand: (state, action: PayloadAction<Command>) => {
       state.saved[action.payload.id] = addDefaults(action.payload);
     },
@@ -48,8 +43,7 @@ const commandsSlice = createSlice({
   },
 });
 
-export const { selectCommand, saveCommand, deleteCommand } =
-  commandsSlice.actions;
+export const { saveCommand, deleteCommand } = commandsSlice.actions;
 export const commandReduxReducer = commandsSlice.reducer;
 
 const changeEditingCommandName = (

diff --git a/src/core/reducers/context-reducers.spec.ts b/src/core/reducers/context-reducers.spec.ts
@@ -1,7 +1,6 @@
 import { Context, createContext } from '../../data/model/context/context';
 import {
   ContextsState,
-  selectContext,
   contextReduxReducer,
   saveContext,
   contextReactReducer,
@@ -27,7 +26,6 @@ describe('context reducer', () => {
 
     const prereducerState: ContextsState = {
       saved: {},
-      editingId: undefined,
     };
 
     const actual = contextReduxReducer(prereducerState, saveContext(obj));
@@ -51,7 +49,6 @@ describe('context reducer', () => {
 
     const prereducerState: ContextsState = {
       saved: {},
-      editingId: undefined,
     };
 
     const actual = contextReduxReducer(prereducerState, saveContext(obj));
@@ -70,35 +67,11 @@ describe('context reducer', () => {
     expect(actual.saved).toEqual(expected);
   });
 
-  it('should handle select', () => {
-    const prereducerState: ContextsState = {
-      saved: {},
-      editingId: undefined,
-    };
-    const actual = contextReduxReducer(prereducerState, selectContext('asdf'));
-
-    expect(actual).toEqual({
-      saved: {},
-      editingId: 'asdf',
-    });
-  });
-
-  it('should handle clear', () => {
-    const prereducerState: ContextsState = {
-      saved: {},
-      editingId: 'asdf',
-    };
-    const actual = contextReduxReducer(prereducerState, selectContext());
-
-    expect(actual).toEqual({ saved: {}, editingId: undefined });
-  });
-
   it('should handle delete', () => {
     const obj = createContext();
 
     const preReducerState: ContextsState = {
       saved: { [obj.id]: obj },
-      editingId: undefined,
     };
 
     const actual = contextReduxReducer(preReducerState, deleteContext(obj.id));

diff --git a/src/core/reducers/context-reducers.ts b/src/core/reducers/context-reducers.ts
@@ -12,12 +12,10 @@ import { Tokens } from '../../di/config/brandi-tokens';
 
 export interface ContextsState {
   readonly saved: Record<string, Context>;
-  readonly editingId?: string;
 }
 
 const initialState: ContextsState = {
   saved: {},
-  editingId: undefined,
 };
 
 const addDefaults = (context: Context): Context => {
@@ -32,9 +30,6 @@ const contextsSlice = createSlice({
   name: 'contexts',
   initialState,
   reducers: {
-    selectContext: (state, action: PayloadAction<string | undefined>) => {
-      state.editingId = action.payload;
-    },
     saveContext: (state, action: PayloadAction<Context>) => {
       state.saved[action.payload.id] = addDefaults(action.payload);
     },
@@ -44,8 +39,7 @@ const contextsSlice = createSlice({
   },
 });
 
-export const { selectContext, saveContext, deleteContext } =
-  contextsSlice.actions;
+export const { saveContext, deleteContext } = contextsSlice.actions;
 export const contextReduxReducer = contextsSlice.reducer;
 
 const changeEditingContextName = (

diff --git a/src/core/reducers/selector-reducers.spec.ts b/src/core/reducers/selector-reducers.spec.ts
@@ -17,12 +17,10 @@ import {
 describe('selector reducer', () => {
   const initialState: SelectorsState = {
     saved: {},
-    editingId: undefined,
   };
   it('should handle initial state', () => {
     expect(selectorReduxReducer(undefined, { type: 'unknown' })).toEqual({
       saved: {},
-      editingId: undefined,
     });
   });
 

diff --git a/src/core/reducers/selector-reducers.ts b/src/core/reducers/selector-reducers.ts
@@ -8,12 +8,10 @@ import { SelectorDTO } from '../../data/model/selector/selector-dto';
 
 export type SelectorsState = {
   readonly saved: Record<string, SelectorDTO>;
-  readonly editingId?: string;
 };
 
 const initialState: SelectorsState = {
   saved: {},
-  editingId: undefined,
 };
 
 const selectorsSlice = createSlice({
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,5 @@ export const UNSELECTED_ID = 'unselected-sleight-id';
		export const UNSELECTED_ENUM = 'unselected-sleight-enum';

		export const USE_DEFAULT = 'Use Default';

		export const EMPTY_PATH = '/';