#40 redux implementation

package.json

@@ -33,8 +33,10 @@
     "react": "^17.0.2",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.5",
     "react-rnd": "^10.3.7",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "stream-browserify": "^3.0.0",
     "typescript": "^4.6.4",

src/App.js

@@ -1,15 +1,19 @@
 import './App.css';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme';
+import { Provider } from 'react-redux';
 import Layout from './components/common/Layout';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+
 // import Loader from './components/common/Loader';
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Layout />
+      <Provider store={}>
+        <Layout />
+      </Provider>
       {/* <Loader /> */}
     </ThemeProvider>
   );

src/constants.ts

@@ -13,4 +13,9 @@ export enum PNLClasses {
     COMPOSITION = 'composition',
     MECHANISM = 'mechanism',
     PROJECTION = 'projection'
+}
+
+export enum GUIStates {
+    EDIT = 'gui_edit',
+    VIEW = 'gui_view'
 }

src/redux/actions/general.js

@@ -0,0 +1,54 @@
+export const OPEN_FILE = 'open_file';
+export const LOAD_MODEL = 'load_model';
+export const SAVE_MODEL = 'save_model';
+export const UPDATE_MODEL = 'update_model';
+export const SIMULATE_MODEL = 'simulate_model';
+export const CHANGE_VIEW = 'change_view';
+export const SELECT = 'select';
+export const OPEN_COMPOSITION = 'open_composition';
+export const CLOSE_COMPOSITION = 'close_composition';
+
+export const openFile = filePath => ({
+  type: OPEN_FILE,
+  data: filePath
+});
+
+export const loadModel = modelData => ({
+  type: LOAD_MODEL,
+  data: modelData
+});
+
+export const saveModel = filePath => ({
+  type: SAVE_MODEL,
+  data: filePath
+});
+
+export const updateModel = newModel => ({
+  type: UPDATE_MODEL,
+  data: newModel
+});
+
+export const simulateModel = model => ({
+  type: SIMULATE_MODEL,
+  data: model
+});
+
+export const changeView = newView => ({
+  type: CHANGE_VIEW,
+  data: newView
+});
+
+export const select = node => ({
+  type: SELECT,
+  data: node
+});
+
+export const openComposition = compositionId => ({
+  type: OPEN_COMPOSITION,
+  data: compositionId
+});
+
+export const closeComposition = () => ({
+  type: OPEN_FILE,
+  data: undefined
+});

src/redux/reducers/general.js

@@ -0,0 +1,11 @@
+import { GUIStates } from "../../constants"
+
+export const GENERAL_DEFAULT_STATE = {
+  error: undefined,
+  selected: undefined,
+  original_model: undefined,
+  model: undefined,
+  gui_state: GUIStates.EDIT,
+  composition_opened: undefined
+}
+

src/redux/store.js

@@ -0,0 +1,34 @@
+export const GENERAL_DEFAULT_STATE = {
+  error: undefined,
+  idsMap: {},
+  idsList: [],
+  idsLoaded: 0,
+  idsToLoad: 0,
+  stepsToLoad: 1,
+  stepsLoaded: 0,
+  loading: false,
+  instanceOnFocus : {},
+  ui : {
+    canvas : {
+      instanceSelection : {},
+      instanceDeleted : {},
+      instanceVisibilityChanged : false
+    },
+    graph : {
+      graphQueryIndex : -1,
+      visible : true,
+      sync : false
+    },
+    termInfo : { termInfoVisible : false },
+    layers : { listViewerInfoVisible : true },
+    circuitBrowser : {
+      circuitQuerySelected : [{ id : "", label : "" } , { id : "", label : "" }],
+      visible : true
+    },
+    layout: {
+      "ThreeDViewer": true,
+      "StackViewer": true,
+      "TermInfo": true
+    }
+  } 
+}