feat: setup redux store for settings

This commit is contained in:
鲁树人 2023-06-03 14:09:11 +01:00
parent c4dbaa4b73
commit 4602f96260
9 changed files with 150 additions and 14 deletions

View File

@ -23,7 +23,9 @@
"@jixun/libparakeet": "0.1.1",
"@reduxjs/toolkit": "^1.9.5",
"framer-motion": "^10.12.16",
"immer": "^10.0.2",
"nanoid": "^4.0.2",
"radash": "^10.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",

View File

@ -22,9 +22,15 @@ dependencies:
framer-motion:
specifier: ^10.12.16
version: 10.12.16(react-dom@18.2.0)(react@18.2.0)
immer:
specifier: ^10.0.2
version: 10.0.2
nanoid:
specifier: ^4.0.2
version: 4.0.2
radash:
specifier: ^10.8.1
version: 10.8.1
react:
specifier: ^18.2.0
version: 18.2.0
@ -5483,6 +5489,11 @@ packages:
engines: { node: '>= 4' }
dev: true
/immer@10.0.2:
resolution:
{ integrity: sha512-Rx3CqeqQ19sxUtYV9CU911Vhy8/721wRFnJv3REVGWUmoAcIwzifTsdmJte/MV+0/XpM35LZdQMBGkRIoLPwQA== }
dev: false
/immer@9.0.21:
resolution:
{ integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA== }
@ -6608,6 +6619,12 @@ packages:
{ integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== }
dev: true
/radash@10.8.1:
resolution:
{ integrity: sha512-NzYo3XgM9Tzjf5iFPIMG2l5+LSOCi2H7Axe3Ry/1PrhlvuqxUoiLsmcTBtw4CfKtzy5Fzo79STiEj9JZWMfDQg== }
engines: { node: '>=14.18.0' }
dev: false
/randombytes@2.1.0:
resolution:
{ integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ== }

24
src/Loader.tsx Normal file
View File

@ -0,0 +1,24 @@
import React, { useEffect } from 'react';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import { theme } from './theme';
import { persistSettings } from './features/settings/persistSettings';
import type { AppStore } from './store';
export function Loader({ store }: { store: AppStore }) {
useEffect(() => {
return persistSettings(store);
}, [store]);
return (
<React.StrictMode>
<ChakraProvider theme={theme}>
<Provider store={store}>
<App />
</Provider>
</ChakraProvider>
</React.StrictMode>
);
}

View File

@ -0,0 +1,45 @@
import { debounce } from 'radash';
import { produce } from 'immer';
import type { AppStore } from '~/store';
import { SettingsState, settingsSlice, updateSettings } from './settingsSlice';
import { enumObject } from '~/util/objects';
import { getLogger } from '~/util/logUtils';
const DEFAULT_STORAGE_KEY = 'um-react-settings';
function mergeSettings(settings: SettingsState): SettingsState {
return produce(settingsSlice.getInitialState(), (draft) => {
for (const [k, v] of enumObject(settings.qmc2?.keys)) {
if (typeof v === 'string') {
draft.qmc2.keys[k] = v;
}
}
});
}
export function persistSettings(store: AppStore, storageKey = DEFAULT_STORAGE_KEY) {
let lastSettings: unknown;
try {
const loadedSettings: SettingsState = JSON.parse(localStorage.getItem(storageKey) ?? '');
if (loadedSettings) {
const mergedSettings = mergeSettings(loadedSettings);
store.dispatch(updateSettings(mergedSettings));
getLogger().debug('settings loaded');
}
} catch {
// load failed, ignore.
}
return store.subscribe(
debounce({ delay: 150 }, () => {
const currentSettings = store.getState().settings;
if (lastSettings !== currentSettings) {
lastSettings = currentSettings;
localStorage.setItem(storageKey, JSON.stringify(currentSettings));
getLogger().debug('settings saved');
}
})
);
}

View File

@ -0,0 +1,31 @@
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
export interface QMCSettings {
keys: Record<string, string>; // { [fileName]: ekey }
}
export interface SettingsState {
qmc2: QMCSettings;
}
const initialState: SettingsState = {
qmc2: { keys: {} },
};
export const settingsSlice = createSlice({
name: 'settings',
initialState,
reducers: {
updateSettings: (_state, { payload }: PayloadAction<SettingsState>) => {
return payload;
},
resetConfig: () => {
return initialState;
},
},
});
export const { updateSettings, resetConfig } = settingsSlice.actions;
export default settingsSlice.reducer;

View File

@ -1,21 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import { setupStore } from './store';
import { theme } from './theme';
import { Loader } from './Loader';
// Private to this file only.
const store = setupStore();
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ChakraProvider theme={theme}>
<Provider store={store}>
<App />
</Provider>
</ChakraProvider>
</React.StrictMode>
);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<Loader store={store} />);

View File

@ -1,8 +1,10 @@
import { PreloadedState, combineReducers, configureStore } from '@reduxjs/toolkit';
import fileListingReducer from './features/file-listing/fileListingSlice';
import settingsReducer from './features/settings/settingsSlice';
const rootReducer = combineReducers({
fileListing: fileListingReducer,
settings: settingsReducer,
});
export const setupStore = (preloadedState?: PreloadedState<RootState>) =>

View File

@ -23,3 +23,23 @@ export function withGroupedLogs<R = unknown>(label: string, fn: () => R): R {
);
}
}
const noop = (..._args: unknown[]) => {
// noop
};
const dummyLogger = {
log: noop,
info: noop,
warn: noop,
debug: noop,
trace: noop,
};
export function getLogger() {
if (import.meta.env.ENABLE_PERF_LOG === '1') {
return window.console;
} else {
return dummyLogger;
}
}

7
src/util/objects.ts Normal file
View File

@ -0,0 +1,7 @@
export function* enumObject<T>(obj: Record<string, T> | null | void): Generator<[string, T]> {
if (obj && typeof obj === 'object') {
for (const key in obj) {
yield [key, obj[key]];
}
}
}