Implements state persistence in localStorage

psychedelicious · psychedelicious · commit 5cf11bd6f019 · 2022-09-07T12:33:48.000+10:00
diff --git a/frontend/dist/assets/index.235e49ab.js b/frontend/dist/assets/index.235e49ab.js
diff --git a/frontend/dist/assets/index.f988921c.js b/frontend/dist/assets/index.f988921c.js
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Stable Diffusion Dream Server</title>
-    <script type="module" crossorigin src="/assets/index.235e49ab.js"></script>
+    <script type="module" crossorigin src="/assets/index.f988921c.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
     "react-dropzone": "^14.2.2",
     "react-icons": "^4.4.0",
     "react-redux": "^8.0.2",
+    "redux-persist": "^6.0.0",
     "socket.io-client": "^4.5.2",
     "uuid": "^9.0.0"
   },
diff --git a/frontend/src/app/store.ts b/frontend/src/app/store.ts
@@ -1,21 +1,26 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
+
 import sdReducer from '../features/sd/sdSlice';
 import galleryReducer from '../features/gallery/gallerySlice';
 import systemReducer from '../features/system/systemSlice';
 
-/*
-Store Slices
-- sd: image generation parameters
-- gallery: image gallery
-- system: logs, site settings, etc
-*/
+const reducers = combineReducers({
+  sd: sdReducer,
+  gallery: galleryReducer,
+  system: systemReducer,
+});
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, reducers);
 
 export const store = configureStore({
-  reducer: {
-    sd: sdReducer,
-    gallery: galleryReducer,
-    system: systemReducer,
-  },
+  reducer: persistedReducer,
   // devTools: {
   //   trace: true,
   // },
diff --git a/frontend/src/app/theme.ts b/frontend/src/app/theme.ts
@@ -1,4 +1,4 @@
-import { extendTheme, type ThemeConfig } from '@chakra-ui/react';
+import { extendTheme } from '@chakra-ui/react';
 import type { StyleFunctionProps } from '@chakra-ui/styled-system';
 
 export const theme = extendTheme({
diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx
@@ -0,0 +1,22 @@
+import { Flex, Spinner } from '@chakra-ui/react';
+
+const Loading = () => {
+    return (
+        <Flex
+            width={'100vw'}
+            height={'100vh'}
+            alignItems='center'
+            justifyContent='center'
+        >
+            <Spinner
+                thickness='2px'
+                speed='1s'
+                emptyColor='gray.200'
+                color='gray.400'
+                size='xl'
+            />
+        </Flex>
+    );
+};
+
+export default Loading;
diff --git a/frontend/src/components/SDFileUpload.tsx b/frontend/src/components/SDFileUpload.tsx
@@ -15,7 +15,6 @@ import { useAppDispatch, useAppSelector } from '../app/hooks';
 import { FaUpload } from 'react-icons/fa';
 import { RootState } from '../app/store';
 import { useSocketIOEmitters } from '../context/socket';
-import { MdDeleteForever } from 'react-icons/md';
 import { resetInitialImagePath } from '../features/sd/sdSlice';
 import { RiCloseFill } from 'react-icons/ri';
 
diff --git a/frontend/src/components/SDSwitch.tsx b/frontend/src/components/SDSwitch.tsx
@@ -1,5 +1,5 @@
 import { FormControl, FormLabel, HStack, Switch } from '@chakra-ui/react';
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 
 type Props = {
   label: string;
diff --git a/frontend/src/features/gallery/CurrentImage.tsx b/frontend/src/features/gallery/CurrentImage.tsx
@@ -3,15 +3,15 @@ import {
     Flex,
     IconButton,
     Image,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuList,
     Tooltip,
     VStack,
 } from '@chakra-ui/react';
-import { BsThreeDots } from 'react-icons/bs';
-import { FaCopy, FaPaintBrush, FaRecycle, FaSeedling, FaUpload } from 'react-icons/fa';
+import {
+    FaCopy,
+    FaPaintBrush,
+    FaRecycle,
+    FaSeedling,
+} from 'react-icons/fa';
 import { RiBracesFill } from 'react-icons/ri';
 import { GiResize } from 'react-icons/gi';
 import { MdDeleteForever, MdFaceRetouchingNatural } from 'react-icons/md';
diff --git a/frontend/src/features/sd/SDSettings.tsx b/frontend/src/features/sd/SDSettings.tsx
@@ -1,4 +1,10 @@
-import { Flex, IconButton, HStack, Box, Spacer, Image, ChakraProps } from '@chakra-ui/react';
+import {
+    Flex,
+    IconButton,
+    HStack,
+    Spacer,
+    ChakraProps,
+} from '@chakra-ui/react';
 
 import { RootState } from '../../app/store';
 
@@ -25,7 +31,6 @@ import {
 import SDNumberInput from '../../components/SDNumberInput';
 import SDSelect from '../../components/SDSelect';
 import SDButton from '../../components/SDButton';
-import SDFileUpload from '../../components/SDFileUpload';
 
 import {
     HEIGHTS,
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,22 +1,30 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ChakraProvider, ColorModeScript, CSSReset } from '@chakra-ui/react';
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
 import { store } from './app/store';
 import { Provider } from 'react-redux';
 import { SocketContext, socket } from './context/socket';
 
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+
+let persistor = persistStore(store);
+
 import App from './App';
 import { theme } from './app/theme';
+import Loading from './components/Loading';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Provider store={store}>
-      <ChakraProvider theme={theme}>
-        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-        <SocketContext.Provider value={socket}>
-          <App />
-        </SocketContext.Provider>
-      </ChakraProvider>
+      <PersistGate loading={<Loading />} persistor={persistor}>
+        <ChakraProvider theme={theme}>
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          <SocketContext.Provider value={socket}>
+            <App />
+          </SocketContext.Provider>
+        </ChakraProvider>
+      </PersistGate>
     </Provider>
   </React.StrictMode>
 );
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2014,6 +2014,11 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-thunk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { extendTheme, type ThemeConfig } from '@chakra-ui/react';`
	`1`	`+import { extendTheme } from '@chakra-ui/react';`
`2`	`2`	`import type { StyleFunctionProps } from '@chakra-ui/styled-system';`
`3`	`3`
`4`	`4`	`export const theme = extendTheme({`