From f6ec5046d021dfaf76d1b26b7398cc0f0fd2d57b Mon Sep 17 00:00:00 2001 From: choidabom Date: Tue, 1 Oct 2024 16:53:08 +0900 Subject: [PATCH] Improve redux store and featureSettingSlice --- frontend/src/components/editor/Editor.tsx | 4 +-- .../components/editor/YorkieIntelligence.tsx | 6 ++-- .../editor/YorkieIntelligenceFeatureList.tsx | 18 ++++++---- frontend/src/hooks/api/settings.ts | 16 ++++++--- frontend/src/main.tsx | 13 +++---- ...settingSlice.ts => featureSettingSlice.ts} | 14 ++++---- frontend/src/store/store.ts | 36 ++++++++++--------- frontend/src/store/workspaceSlice.ts | 2 +- 8 files changed, 60 insertions(+), 49 deletions(-) rename frontend/src/store/{settingSlice.ts => featureSettingSlice.ts} (68%) diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx index 82bf2ca7..7b9f33e6 100644 --- a/frontend/src/components/editor/Editor.tsx +++ b/frontend/src/components/editor/Editor.tsx @@ -14,7 +14,7 @@ import { useFormatUtils } from "../../hooks/useFormatUtils"; import { useToolBar } from "../../hooks/useToolBar"; import { CodeKeyType, selectConfig } from "../../store/configSlice"; import { selectEditor, setCmView } from "../../store/editorSlice"; -import { selectSetting } from "../../store/settingSlice"; +import { selectFeatureSetting } from "../../store/featureSettingSlice"; import { selectWorkspace } from "../../store/workspaceSlice"; import { imageUploader } from "../../utils/imageUploader"; import { intelligencePivot } from "../../utils/intelligence/intelligencePivot"; @@ -34,7 +34,7 @@ function Editor(props: EditorProps) { const [element, setElement] = useState(); const editorStore = useSelector(selectEditor); const configStore = useSelector(selectConfig); - const settingStore = useSelector(selectSetting); + const settingStore = useSelector(selectFeatureSetting); const workspaceStore = useSelector(selectWorkspace); const { mutateAsync: createUploadUrl } = useCreateUploadUrlMutation(); const { mutateAsync: uploadFile } = useUploadFileMutation(); diff --git a/frontend/src/components/editor/YorkieIntelligence.tsx b/frontend/src/components/editor/YorkieIntelligence.tsx index 26b7c335..2e8a717c 100644 --- a/frontend/src/components/editor/YorkieIntelligence.tsx +++ b/frontend/src/components/editor/YorkieIntelligence.tsx @@ -1,16 +1,16 @@ import { Button, Typography } from "@mui/material"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; +import { useSelector } from "react-redux"; import { INTELLIGENCE_FOOTER_ID } from "../../constants/intelligence"; +import { selectFeatureSetting } from "../../store/featureSettingSlice"; import YorkieIntelligenceFooter from "./YorkieIntelligenceFooter"; -import { useSelector } from "react-redux"; -import { selectSetting } from "../../store/settingSlice"; function YorkieIntelligence() { const [footerOpen, setFooterOpen] = useState(false); const [intelligenceFooterPivot, setIntelligenceFooterPivot] = useState(null); - const { yorkieIntelligence } = useSelector(selectSetting); + const { yorkieIntelligence } = useSelector(selectFeatureSetting); useEffect(() => { // initialize intelligence footer pivot diff --git a/frontend/src/components/editor/YorkieIntelligenceFeatureList.tsx b/frontend/src/components/editor/YorkieIntelligenceFeatureList.tsx index 8ac46502..a03149a9 100644 --- a/frontend/src/components/editor/YorkieIntelligenceFeatureList.tsx +++ b/frontend/src/components/editor/YorkieIntelligenceFeatureList.tsx @@ -7,10 +7,10 @@ import { Stack, TextField, } from "@mui/material"; -import { useMemo, useState } from "react"; import { matchSorter } from "match-sorter"; -import { selectSetting } from "../../store/settingSlice"; +import { useMemo, useState } from "react"; import { useSelector } from "react-redux"; +import { selectFeatureSetting } from "../../store/featureSettingSlice"; interface YorkieIntelligenceFeatureListProps { onSelectFeature: (feature: string, title: string) => void; @@ -18,13 +18,17 @@ interface YorkieIntelligenceFeatureListProps { function YorkieIntelligenceFeatureList(props: YorkieIntelligenceFeatureListProps) { const { onSelectFeature } = props; - const settingStore = useSelector(selectSetting); + const featureSettingStore = useSelector(selectFeatureSetting); const [featureText, setFeatureText] = useState(""); const filteredFeatureInfoList = useMemo(() => { - return matchSorter(settingStore.yorkieIntelligence?.config.features ?? [], featureText, { - keys: ["title", "feature"], - }); - }, [featureText, settingStore.yorkieIntelligence?.config.features]); + return matchSorter( + featureSettingStore.yorkieIntelligence?.config.features ?? [], + featureText, + { + keys: ["title", "feature"], + } + ); + }, [featureText, featureSettingStore.yorkieIntelligence?.config.features]); const handleFeatureTextChange: React.ChangeEventHandler< HTMLInputElement | HTMLTextAreaElement diff --git a/frontend/src/hooks/api/settings.ts b/frontend/src/hooks/api/settings.ts index 884d9bf8..0d479116 100644 --- a/frontend/src/hooks/api/settings.ts +++ b/frontend/src/hooks/api/settings.ts @@ -1,9 +1,13 @@ import { useQuery } from "@tanstack/react-query"; import axios from "axios"; -import { GetSettingsResponse } from "./types/settings"; -import { useDispatch, useSelector } from "react-redux"; -import { selectSetting, setFileUpload, setYorkieIntelligence } from "../../store/settingSlice"; import { useEffect } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { + selectFeatureSetting, + setFileUpload, + setYorkieIntelligence, +} from "../../store/featureSettingSlice"; +import { GetSettingsResponse } from "./types/settings"; export const generateGetSettingsQueryKey = () => { return ["settings"]; @@ -11,10 +15,12 @@ export const generateGetSettingsQueryKey = () => { export const useGetSettingsQuery = () => { const dispatch = useDispatch(); - const settingStore = useSelector(selectSetting); + const featureSettingStore = useSelector(selectFeatureSetting); const query = useQuery({ queryKey: generateGetSettingsQueryKey(), - enabled: settingStore.yorkieIntelligence === null && settingStore.fileUpload === null, + enabled: + featureSettingStore.yorkieIntelligence === null && + featureSettingStore.fileUpload === null, queryFn: async () => { const res = await axios.get("/settings"); return res.data; diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 8245f9de..cf95f0b2 100755 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,21 +1,18 @@ +import { SnackbarProvider } from "notistack"; import React from "react"; import ReactDOM from "react-dom/client"; -import "./index.css"; -import App from "./App"; -import { store } from "./store/store"; +import ReactGA from "react-ga4"; import { Provider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react"; -import { persistStore } from "redux-persist"; -import { SnackbarProvider } from "notistack"; -import ReactGA from "react-ga4"; +import App from "./App"; +import "./index.css"; +import { persistor, store } from "./store/store"; const trackingCode = `${import.meta.env.VITE_APP_GOOGLE_ANALYTICS}`; if (trackingCode) { ReactGA.initialize(trackingCode); } -const persistor = persistStore(store); - ReactDOM.createRoot(document.getElementById("root")!).render( diff --git a/frontend/src/store/settingSlice.ts b/frontend/src/store/featureSettingSlice.ts similarity index 68% rename from frontend/src/store/settingSlice.ts rename to frontend/src/store/featureSettingSlice.ts index d4754766..bd38a0c6 100644 --- a/frontend/src/store/settingSlice.ts +++ b/frontend/src/store/featureSettingSlice.ts @@ -17,18 +17,18 @@ interface FileUploadSetting { enable: boolean; } -export interface SettingState { +export interface FeatureSettingState { yorkieIntelligence: YorkieIntelligenceSetting | null; fileUpload: FileUploadSetting | null; } -const initialState: SettingState = { +const initialState: FeatureSettingState = { yorkieIntelligence: null, fileUpload: null, }; -export const settingSlice = createSlice({ - name: "setting", +export const featureSettingSlice = createSlice({ + name: "featureSetting", initialState, reducers: { setYorkieIntelligence: (state, action: PayloadAction) => { @@ -40,8 +40,8 @@ export const settingSlice = createSlice({ }, }); -export const { setYorkieIntelligence, setFileUpload } = settingSlice.actions; +export const { setYorkieIntelligence, setFileUpload } = featureSettingSlice.actions; -export const selectSetting = (state: RootState) => state.setting; +export const selectFeatureSetting = (state: RootState) => state.featureSetting; -export default settingSlice.reducer; +export default featureSettingSlice.reducer; diff --git a/frontend/src/store/store.ts b/frontend/src/store/store.ts index 81fb07f7..d2f97b9f 100644 --- a/frontend/src/store/store.ts +++ b/frontend/src/store/store.ts @@ -1,33 +1,35 @@ import { combineReducers, configureStore } from "@reduxjs/toolkit"; -import editorSlice from "./editorSlice"; -import configSlice from "./configSlice"; -import storage from "redux-persist/lib/storage"; import { persistReducer } from "redux-persist"; +import persistStore from "redux-persist/es/persistStore"; +import storage from "redux-persist/lib/storage"; import authSlice from "./authSlice"; +import configSlice from "./configSlice"; +import documentSlice from "./documentSlice"; +import editorSlice from "./editorSlice"; +import featureSettingSlice from "./featureSettingSlice"; import userSlice from "./userSlice"; import workspaceSlice from "./workspaceSlice"; -import documentSlice from "./documentSlice"; -import settingSlice from "./settingSlice"; -const reducers = combineReducers({ - // Persistence +const persistConfig = { + key: "root", + storage, // Use local storage + whitelist: ["auth", "config"], // Only persis these slices +}; + +const rootReducer = combineReducers({ + // Persistent slices auth: authSlice, config: configSlice, - // Volatile + + // Volatile slices user: userSlice, editor: editorSlice, workspace: workspaceSlice, document: documentSlice, - setting: settingSlice, + featureSetting: featureSettingSlice, }); -const persistConfig = { - key: "root", - storage, // Local Storage - whitelist: ["auth", "config"], -}; - -const persistedReducer = persistReducer(persistConfig, reducers); +const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, @@ -48,5 +50,7 @@ export const store = configureStore({ }), }); +export const persistor = persistStore(store); + export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; diff --git a/frontend/src/store/workspaceSlice.ts b/frontend/src/store/workspaceSlice.ts index 26319cca..482fd521 100644 --- a/frontend/src/store/workspaceSlice.ts +++ b/frontend/src/store/workspaceSlice.ts @@ -1,5 +1,5 @@ -import { createSlice } from "@reduxjs/toolkit"; import type { PayloadAction } from "@reduxjs/toolkit"; +import { createSlice } from "@reduxjs/toolkit"; import { RootState } from "./store"; export interface Workspace {