refactor: redux migration - toggle menubar

renderer/components/Sidebar/MenuBar/index.js

@@ -1,18 +1,13 @@
 import React from 'react';
 import Link from 'next/link';
 import { IconCode, IconStack, IconGitPullRequest, IconUser, IconUsers, IconSettings, IconBuilding, IconChevronsLeft} from '@tabler/icons';
-import actions from 'providers/Store/actions';
-import { useStore } from 'providers/Store';
+import { useSelector, useDispatch } from 'react-redux';
+import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'
 import StyledWrapper from './StyledWrapper';
 
 const MenuBar = () => {
-  const [store, storeDispatch] = useStore();
-
-  const hideMenuBar = () => {
-    storeDispatch({
-      type: actions.TOGGLE_LEFT_MENUBAR
-    })
-  };
+  const leftMenuBarOpen = useSelector((state) => state.app.leftMenuBarOpen);
+  const dispatch = useDispatch();
 
   return (
     <StyledWrapper className="h-full flex flex-col">
@@ -45,7 +40,7 @@ const MenuBar = () => {
         <div className="menu-item">
           <IconSettings size={28} strokeWidth={1.5}/>
         </div>
-        <div className="menu-item" onClick={hideMenuBar}>
+        <div className="menu-item" onClick={() => dispatch(toggleLeftMenuBar())}>
           <IconChevronsLeft size={28} strokeWidth={1.5}/>
         </div>
       </div>

renderer/components/Sidebar/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import actions from 'providers/Store/actions';
-import { useStore } from 'providers/Store';
+import { useSelector, useDispatch } from 'react-redux';
+import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'
 import Collections from './Collections';
 import MenuBar from './MenuBar';
 import TitleBar from './TitleBar';
@@ -8,20 +8,12 @@ import { IconSearch, IconChevronsRight} from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const Sidebar = () => {
-  const [store, storeDispatch] = useStore();
-  const {
-    asideWidth,
-    leftMenuBarOpen
-  } = store;
-
-  const showMenuBar = () => {
-    storeDispatch({
-      type: actions.TOGGLE_LEFT_MENUBAR
-    })
-  };
+  const leftMenuBarOpen = useSelector((state) => state.app.leftMenuBarOpen);
+  const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
+  const dispatch = useDispatch();
 
   return (
-    <StyledWrapper style={{width: `${asideWidth}px`, minWidth: `${asideWidth}px`}}>
+    <StyledWrapper style={{width: `${leftSidebarWidth}px`, minWidth: `${leftSidebarWidth}px`}}>
       <div className="flex flex-row h-full">
         {leftMenuBarOpen && <MenuBar />}
 
@@ -47,7 +39,7 @@ const Sidebar = () => {
             <Collections />
           </div>
           <div
-            onClick={showMenuBar}
+            onClick={() => dispatch(toggleLeftMenuBar())}
             className="flex flex-col px-1 py-2 cursor-pointer text-gray-500 hover:text-gray-700"
           >
             {!leftMenuBarOpen && <IconChevronsRight size={24} strokeWidth={1.5}/>}

renderer/pages/_app.js

@@ -1,6 +1,8 @@
 import { StoreProvider } from 'providers/Store';
 import { HotkeysProvider } from 'providers/Hotkeys';
 import { AuthProvider } from 'providers/Auth';
+import ReduxStore from 'providers/ReduxStore';
+import { Provider } from 'react-redux';
 
 import '../styles/globals.css'
 import 'tailwindcss/dist/tailwind.min.css';
@@ -22,11 +24,13 @@ function MyApp({ Component, pageProps }) {
   return (
     <SafeHydrate>
       <AuthProvider>
-        <StoreProvider>
-          <HotkeysProvider>
-            <Component {...pageProps} />
-          </HotkeysProvider>
-        </StoreProvider>
+        <Provider store={ReduxStore}>
+          <StoreProvider>
+            <HotkeysProvider>
+              <Component {...pageProps} />
+            </HotkeysProvider>
+          </StoreProvider>
+        </Provider>
       </AuthProvider>
     </SafeHydrate>
   );

renderer/providers/ReduxStore/index.js

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import appReducer from './slices/app';
+
+export const store = configureStore({
+  reducer: {
+    app:appReducer
+  }
+});
+
+export default store;

renderer/providers/ReduxStore/slices/app.js

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+  leftMenuBarOpen: true,
+  leftSidebarWidth: 270
+};
+
+export const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    toggleLeftMenuBar: (state) => {
+      state.leftMenuBarOpen = !state.leftMenuBarOpen;
+      state.leftSidebarWidth = state.leftMenuBarOpen ? 270 : 222;
+    }
+  }
+});
+
+export const { toggleLeftMenuBar } = appSlice.actions;
+
+export default appSlice.reducer;

renderer/providers/Store/actions.js

@@ -17,7 +17,6 @@ const ADD_NEW_GQL_REQUEST = "ADD_NEW_GQL_REQUEST";
 const IDB_CONNECTION_READY = "IDB_CONNECTION_READY";
 const IDB_COLLECTIONS_SYNC_STARTED = "IDB_COLLECTIONS_SYNC_STARTED";
 const IDB_COLLECTIONS_SYNC_ERROR = "IDB_COLLECTIONS_SYNC_ERROR";
-const TOGGLE_LEFT_MENUBAR = "TOGGLE_LEFT_MENUBAR";
 const HOTKEY_SAVE = "HOTKEY_SAVE";
 
 export default {
@@ -40,6 +39,5 @@ export default {
   IDB_CONNECTION_READY,
   IDB_COLLECTIONS_SYNC_STARTED,
   IDB_COLLECTIONS_SYNC_ERROR,
-  TOGGLE_LEFT_MENUBAR,
   HOTKEY_SAVE
 };

renderer/providers/Store/index.js

@@ -118,9 +118,7 @@ const initialState = {
 	activeRequestTabUid: null,
 	requestQueuedToSend: null,
 	requestTabs: [],
-	collectionsToSyncToIdb: [],
-	asideWidth: 270,
-	leftMenuBarOpen: true
+	collectionsToSyncToIdb: []
 };
 
 export const StoreProvider = props => {

renderer/providers/Store/reducer.js

@@ -335,13 +335,6 @@ const reducer = (state, action) => {
       });
     }
 
-    case actions.TOGGLE_LEFT_MENUBAR: {
-      return produce(state, (draft) => {
-        draft.leftMenuBarOpen = !draft.leftMenuBarOpen;
-        draft.asideWidth = draft.leftMenuBarOpen ? 270 : 222;
-      });
-    }
-
     case actions.HOTKEY_SAVE: {
       return produce(state, (draft) => {
         if(!draft.activeRequestTabUid) {