adds middleware to sync redux with local storage also adds ununsed

import error rule to linter

frontend/.eslintrc.cjs

@@ -16,8 +16,9 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react'],
+  plugins: ['react', 'unused-imports'],
   rules: {
+    'unused-imports/no-unused-imports': 'error',
     'react/react-in-jsx-scope': 'off',
     'prettier/prettier': [
       'error',

frontend/package.json

@@ -40,6 +40,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.1.1",
     "postcss": "^8.4.21",

frontend/src/Navigation.tsx

@@ -17,7 +17,6 @@ import {
   selectSourceDocs,
   setSelectedDocs,
 } from './preferences/preferenceSlice';
-import { setLocalRecentDocs } from './preferences/preferenceApi';
 
 export default function Navigation({
   navState,
@@ -98,7 +97,6 @@ export default function Navigation({
                         <div
                           key={index}
                           onClick={() => {
-                            setLocalRecentDocs(doc);
                             dispatch(setSelectedDocs(doc));
                             setIsDocsListOpen(false);
                           }}

frontend/src/preferences/APIKeyModal.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
-import { setApiKey } from './preferenceSlice';
-import { getLocalApiKey, setLocalApiKey } from './preferenceApi';
+import { selectApiKey, setApiKey } from './preferenceSlice';
 
 export default function APIKeyModal({
   modalState,
@@ -14,14 +13,14 @@ export default function APIKeyModal({
   isCancellable?: boolean;
 }) {
   const dispatch = useDispatch();
-  const [key, setKey] = useState('');
+  const apiKey = useSelector(selectApiKey);
+  const [key, setKey] = useState(apiKey);
   const [isError, setIsError] = useState(false);
 
   function handleSubmit() {
     if (key.length <= 1) {
       setIsError(true);
     } else {
-      setLocalApiKey(key);
       dispatch(setApiKey(key));
       setModalState('INACTIVE');
       setIsError(false);
@@ -29,31 +28,11 @@ export default function APIKeyModal({
   }
 
   function handleCancel() {
-    async function getApiKey() {
-      const localKey = await getLocalApiKey();
-      if (localKey) {
-        setKey(localKey);
-      }
-    }
-
-    getApiKey();
+    setKey(apiKey);
     setIsError(false);
     setModalState('INACTIVE');
   }
 
-  useEffect(() => {
-    function getApiKey() {
-      const localKey = getLocalApiKey();
-      if (localKey) {
-        dispatch(setApiKey(localKey));
-        setKey(localKey);
-        setModalState('INACTIVE');
-      }
-    }
-
-    getApiKey();
-  }, []);
-
   return (
     <div
       className={`${

frontend/src/preferences/SelectDocsModal.tsx

@@ -5,6 +5,7 @@ import {
   setSelectedDocs,
   setSourceDocs,
   selectSourceDocs,
+  selectSelectedDocs,
 } from './preferenceSlice';
 import { getDocs, Doc } from './selectDocsApi';
 
@@ -19,7 +20,10 @@ export default function APIKeyModal({
 }) {
   const dispatch = useDispatch();
   const docs = useSelector(selectSourceDocs);
-  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
+  const selectedDoc = useSelector(selectSelectedDocs);
+  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(
+    selectedDoc,
+  );
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
   const [isError, setIsError] = useState(false);
 
@@ -29,13 +33,11 @@ export default function APIKeyModal({
     } else {
       dispatch(setSelectedDocs(localSelectedDocs));
       setModalState('INACTIVE');
-      setLocalSelectedDocs(null);
       setIsError(false);
     }
   }
 
   function handleCancel() {
-    setLocalSelectedDocs(null);
     setIsError(false);
     setModalState('INACTIVE');
   }

frontend/src/preferences/preferenceSlice.ts

@@ -1,6 +1,10 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { Doc } from './preferenceApi';
-import store from '../store';
+import {
+  createListenerMiddleware,
+  createSlice,
+  isAnyOf,
+} from '@reduxjs/toolkit';
+import { Doc, setLocalApiKey, setLocalRecentDocs } from './preferenceApi';
+import { RootState } from '../store';
 
 interface Preference {
   apiKey: string;
@@ -33,7 +37,23 @@ export const prefSlice = createSlice({
 export const { setApiKey, setSelectedDocs, setSourceDocs } = prefSlice.actions;
 export default prefSlice.reducer;
 
-type RootState = ReturnType<typeof store.getState>;
+export const prefListenerMiddleware = createListenerMiddleware();
+prefListenerMiddleware.startListening({
+  matcher: isAnyOf(setApiKey),
+  effect: (action, listenerApi) => {
+    setLocalApiKey((listenerApi.getState() as RootState).preference.apiKey);
+  },
+});
+
+prefListenerMiddleware.startListening({
+  matcher: isAnyOf(setSelectedDocs),
+  effect: (action, listenerApi) => {
+    setLocalRecentDocs(
+      (listenerApi.getState() as RootState).preference.selectedDocs ??
+        ([] as unknown as Doc),
+    );
+  },
+});
 
 export const selectApiKey = (state: RootState) => state.preference.apiKey;
 export const selectApiKeyStatus = (state: RootState) =>

frontend/src/store.ts

@@ -1,13 +1,31 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { conversationSlice } from './conversation/conversationSlice';
-import { prefSlice } from './preferences/preferenceSlice';
+import {
+  prefListenerMiddleware,
+  prefSlice,
+} from './preferences/preferenceSlice';
+
+const key = localStorage.getItem('DocsGPTApiKey');
+const doc = localStorage.getItem('DocsGPTRecentDocs');
 
 const store = configureStore({
+  preloadedState: {
+    preference: {
+      apiKey: key ?? '',
+      selectedDocs: doc !== null ? JSON.parse(doc) : null,
+      sourceDocs: null,
+    },
+  },
   reducer: {
     preference: prefSlice.reducer,
     conversation: conversationSlice.reducer,
   },
+  middleware: (getDefaultMiddleware) => [
+    ...getDefaultMiddleware(),
+    prefListenerMiddleware.middleware,
+  ],
 });
 
+export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 export default store;