Improve redux store and featureSettingSlice

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<HTMLElement>();
 	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();

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<Element | null>(null);
 
-	const { yorkieIntelligence } = useSelector(selectSetting);
+	const { yorkieIntelligence } = useSelector(selectFeatureSetting);
 
 	useEffect(() => {
 		// initialize intelligence footer pivot

frontend/src/components/editor/YorkieIntelligenceFeatureList.tsx

@@ -7,24 +7,28 @@ 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;
 }
 
 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

frontend/src/hooks/api/settings.ts

@@ -1,20 +1,26 @@
 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"];
 };
 
 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<GetSettingsResponse>("/settings");
 			return res.data;

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(
 	<React.StrictMode>
 		<Provider store={store}>

frontend/src/store/settingSlice.ts → 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<YorkieIntelligenceSetting>) => {
@@ -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;

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<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;

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 {