Save unit cell to Redux store

frontend/src/App.jsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/react-in-jsx-scope */
 import './App.css';
 import { Stage } from '@pixi/react';
-import PixiApp from './workspace';
+import InitiateControlFlow from './control-flow';
 
 const stageOptions = {
   backgroundColor: 0x1099bb
 };
 
-function App() {
+export default function App() {
   return (
     <div>
       <div className="App">
@@ -18,10 +18,8 @@ function App() {
         height={window.innerHeight}
         options={stageOptions}
       >
-        <PixiApp />
+        <InitiateControlFlow />
       </Stage>
     </div>
   );
 }
-
-export default App;

frontend/src/actions.js

@@ -0,0 +1,6 @@
+export const SET_UNIT_CELL = 'SET_UNIT_CELL';
+
+export const setUnitCell = (unitCell) => ({
+  type: SET_UNIT_CELL,
+  payload: unitCell,
+});

frontend/src/workspace/index.js → frontend/src/control-flow.js

@@ -11,19 +11,21 @@ import Qubit from './qubits/Qubit';
 import QubitLattice from './qubits/QubitLattice';
 import Button from './components/Button';
 import DownloadButton from './components/download/DownloadButton';
+import store from './store';
 
-export default function TQECApp() {
-  // Initialize the app
+/**
+ * Defines how the app behaves (button and feature placement) upon initialization
+ * @returns {void}
+ */
+export default function InitializeControlFlow() {
   const app = useApp();
-  // Remove all children from the stage to avoid rendering issues
-  app.stage.removeChildren();
+  app.stage.removeChildren(); // avoid rendering issues
   const gridSize = 50;
-  // Let's create the workspace
   const workspace = new Container();
   workspace.name = 'workspace';
-  // Create the grid container
   const grid = new Grid(gridSize, workspace, app);
-
+  // Add qubits from redux store
+  // const storedUnitCell = store.getState().unitCell;
   workspace.addChild(grid);
   grid.units.forEach((row) => {
     row.forEach((unit) => {
@@ -96,6 +98,9 @@ export default function TQECApp() {
     workspace.addChild(saveQubitConstellationButton);
     app.view.addEventListener('click', lattice.selectQubitForConstellation);
   });
+
+  // TODO: Check the redux store for qubits and add them to the workspace
+  // If there are none, instead offer to create a constellation.
   workspace.addChild(createQubitConstellationButton);
 
   saveQubitConstellationButton.on('click', () => {
@@ -138,10 +143,17 @@ export default function TQECApp() {
           });
         });
 
+        // Commit unit cell to redux store
+        store.dispatch({
+          type: 'SET_UNIT_CELL',
+          payload: {
+            qubits: lattice.constellation.map((q) => q.serialized()),
+            gridSquares: grid.visibleUnits().map((u) => u.serialized())
+          },
+        });
+
         // Add qubits to the workspace
-        // eslint-disable-next-line max-len
         for (let horiz = 0; horiz < app.renderer.width; horiz += grid.physicalWidth) {
-          // eslint-disable-next-line max-len
           for (let vertic = 0; vertic < app.renderer.height; vertic += grid.physicalHeight) {
             for (const qubit of lattice.constellation) {
               const newQubit = new Qubit(

frontend/src/workspace/graphics/GridUnit.js → frontend/src/graphics/GridUnit.js

@@ -25,6 +25,13 @@ export default class GridUnit extends Graphics {
     this.workspace.addChild(this);
   }
 
+  serialized = () => ({
+    x: this.x,
+    y: this.y,
+    gridUnitSize: this.gridUnitSize,
+    visible: this.visible,
+  });
+
   // eslint-disable-next-line class-methods-use-this
   viewportX = (x) => Math.floor(x / this.gridUnitSize) * this.gridUnitSize;
 

frontend/src/index.js

@@ -2,32 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
 import App from './App';
-
-const initialState = {
-  todos: [],
-};
-
-// eslint-disable-next-line default-param-last
-const reducer = (state = initialState, action) => {
-  switch (action.type) {
-  case 'ADD_TODO':
-    return {
-      ...state,
-      todos: [...state.todos, action.payload],
-    };
-  case 'REMOVE_TODO':
-    return {
-      ...state,
-      todos: state.todos.filter((todo) => todo.id !== action.payload),
-    };
-  default:
-    return state;
-  }
-};
-
-const store = configureStore({ reducer });
+import store from './store';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

frontend/src/workspace/qubits/Qubit.js → frontend/src/qubits/Qubit.js

@@ -47,6 +47,15 @@ export default class Qubit extends Graphics {
 
   toString = () => this.name;
 
+  serialized = () => ({
+    x: this.globalX,
+    y: this.globalY,
+    radius: this.radius,
+    gridSize: this.gridSize,
+    color: this.color,
+    qubitType: this.qubitType
+  });
+
   onPointerOver = () => {
     this.alpha = 0.5;
   };

frontend/src/reducers.js

@@ -0,0 +1,25 @@
+/* eslint-disable default-param-last */
+import { SET_UNIT_CELL } from './actions';
+
+export const initialState = {
+  untiCell: {
+    qubits: [],
+    gridSquares: [],
+  },
+};
+
+const rootReducer = (state = initialState, action) => {
+  switch (action.type) {
+  case SET_UNIT_CELL:
+    return {
+      unitCell: {
+        qubits: action.payload.qubits,
+        gridSquares: action.payload.gridSquares,
+      }
+    };
+  default:
+    return state;
+  }
+};
+
+export default rootReducer;

frontend/src/store.js

@@ -0,0 +1,39 @@
+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './reducers';
+
+// Load state from localStorage
+const loadState = () => {
+  try {
+    const serializedState = localStorage.getItem('reduxState');
+    if (serializedState === null) {
+      return undefined;
+    }
+    return JSON.parse(serializedState);
+  } catch (err) {
+    return undefined;
+  }
+};
+
+// Save state to localStorage
+const saveState = (state) => {
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem('reduxState', serializedState);
+  } catch {
+    // Ignore write errors
+  }
+};
+
+const preloadedState = loadState();
+
+const store = configureStore({
+  reducer: rootReducer,
+  preloadedState,
+});
+
+// Save state to localStorage whenever store state changes
+store.subscribe(() => {
+  saveState(store.getState());
+});
+
+export default store;