starting sidebar and added rtk

package.json

@@ -6,13 +6,15 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "@reduxjs/toolkit": "^1.4.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "redux-persist": "^6.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -3,11 +3,19 @@ import React, { useState } from "react";
 import { FeedbackProvider } from "./util/feedback";
 
 import Page from "./components/page";
+import SideBar from "./components/sidebar";
+
+import { Box } from "@material-ui/core";
+
 
 const App = () => {
+  const [sideBarSize, setSideBarSize] = useState(225);
 
   return (
-    <Page />
+    <Box>
+      <SideBar size={sideBarSize} onResize={(size) => setSideBarSize(size)} />
+      <Page />
+    </Box>
   );
 };
 

src/components/page.js

@@ -69,9 +69,9 @@ const Column = ({ column, index }) => {
   return (
     <Droppable key={index} droppableId={`${index}`}>
       {(provided, snapshot) => (
-        <div 
-          ref={provided.innerRef} 
-          style={getColumnStyle(column.length > 0)} 
+        <div
+          ref={provided.innerRef}
+          style={getColumnStyle(column.length > 0)}
           {...provided.droppableProps}
         >
           {column.map((dynComp, j) => (
@@ -128,7 +128,7 @@ const Page = () => {
       // update resulting columns
       newColumns[sourceIndex] = sourceColumn;
       newColumns[destIndex] = destColumn;
-      
+
     }
 
     // clear any potentially empty columns
@@ -142,8 +142,8 @@ const Page = () => {
   return (
     <DragDropContext onBeforeCapture={handleAddColumn} onDragEnd={handleDragEnd}>
       <div style={{ display: 'flex' }}>
-        {columns.map((column, i) => 
-          <Column column={column} index={i} />
+        {columns.map((column, i) =>
+          <Column column={column} index={i} key={i} />
         )}
       </div>
     </DragDropContext>

src/components/sidebar/index.js

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+
+import { Box, MenuItem, IconButton, Typography } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+    sideBar: {
+        position: "fixed",
+        display: "flex",
+        flexDirection: "column",
+        // padding: `0 ${theme.spacing(1)}px`,
+        height: "100%",
+        width: 225,
+        background: theme.palette.grey[100],
+        borderRight: `3px solid ${theme.palette.grey[300]}`
+    }
+}));
+
+const SideBar = () => {
+    const classes = useStyles();
+
+    return (
+        <Box>
+            <Box className={classes.sideBar}>
+                <WorkSpaceSelect />
+            </Box>
+            <Box />
+        </Box>
+    );
+};
+
+const WorkSpaceSelect = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <>
+            <Box onClick={() => setIsOpen(true)}>
+                <WorkSpaceBadge name="Personal" />
+            </Box>
+            {isOpen ? <Box></Box> : null}
+        </>
+    )
+}
+
+const WorkSpaceBadge = ({ icon, name }) => <Box>
+    <Typography>{name}</Typography>
+</Box>
+
+export default SideBar;

src/index.js

@@ -1,12 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
+import { Provider } from "react-redux";
+import { store, persistor } from "./redux";
+import { PersistGate } from "redux-persist/integration/react";
+
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/redux/index.js

@@ -0,0 +1,73 @@
+import {
+    createSlice,
+    configureStore,
+    getDefaultMiddleware,
+} from "@reduxjs/toolkit";
+// import logger from "redux-logger";
+import {
+    persistStore,
+    persistReducer,
+    FLUSH,
+    REHYDRATE,
+    PAUSE,
+    PERSIST,
+    PURGE,
+    REGISTER,
+} from "redux-persist";
+import storage from "redux-persist/lib/storage";
+import hardSet from "redux-persist/lib/stateReconciler/hardSet";
+
+const initialState = {
+    apiToken: null,
+};
+
+const reducers = {
+    // apiToken
+    setApiToken: (
+        state,
+        { payload: newApiToken }
+    ) => {
+        state.apiToken = newApiToken;
+    },
+    unsetApiToken: (state) => {
+        state.apiToken = null;
+    }
+};
+
+const stateSlice = createSlice({
+    name: "state",
+    initialState,
+    reducers,
+});
+
+const persistConfig = {
+    key: "state",
+    storage,
+    stateReconciler: hardSet,
+    blacklist: [],
+};
+
+export const { actions } = stateSlice;
+
+const reducer = (state, action) => stateSlice.reducer(state, action);
+
+const persistedReducer = persistReducer(persistConfig, reducer);
+
+export const store = configureStore({
+    reducer: persistedReducer,
+    middleware: [
+        ...getDefaultMiddleware({
+            serializableCheck: {
+                ignoredActions: [
+                    FLUSH,
+                    REHYDRATE,
+                    PAUSE,
+                    PERSIST,
+                    PURGE,
+                    REGISTER,
+                ],
+            },
+        }),
+    ] /* devTools: false*/,
+});
+export const persistor = persistStore(store);