refactor swr and remove state

packages/app/resource/locales/en_US/admin/admin.json

@@ -152,7 +152,6 @@
     "default_sidebar_mode": {
       "title": "Default sidebar mode",
       "desc": "You can set the sidebar mode for new users and guests visiting the page.",
-      "dock_mode_default": "Initial state of Dock Mode",
       "dock_mode_default_desc": "You can set the initial state of the sidebar when Dock Mode is selected.",
       "dock_mode_default_open": "Open the page as it was opened from the beginning",
       "dock_mode_default_close": "Open the page as it was closed from the beginning"

packages/app/resource/locales/ja_JP/admin/admin.json

@@ -152,7 +152,6 @@
     "default_sidebar_mode": {
       "title": "デフォルトのサイドバーモード",
       "desc": "新規ユーザー、ページを訪れたゲストのサイドバーモードを設定できます。",
-      "dock_mode_default": "Dock Modeの初期状態",
       "dock_mode_default_desc": "Dock Mode選択時のサイドバーの初期状態を設定できます。",
       "dock_mode_default_open": "初めから開いた状態でページを開く",
       "dock_mode_default_close": "初めから閉じた状態でページを開く"

packages/app/resource/locales/zh_CN/admin/admin.json

@@ -151,7 +151,6 @@
     "default_sidebar_mode": {
       "title": "默认的侧边栏模式",
       "desc": "你可以为新用户和访问该网页的客人设置侧边栏模式。",
-      "dock_mode_default": "Dock模式的初始状态",
       "dock_mode_default_desc": "当选择Dock模式时，可以设置侧边栏的初始状态。",
       "dock_mode_default_open": "从头开始翻页",
       "dock_mode_default_close": "从头开始打开关闭的页面"

packages/app/src/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -3,15 +3,15 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardBody } from 'reactstrap';
 
-import { toastSuccess } from '~/client/util/apiNotification';
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { isDarkMode as isDarkModeByUtil } from '~/client/util/color-scheme';
 import { useSidebarConfig } from '~/stores/ui';
 
 const CustomizeSidebarsetting = (): JSX.Element => {
   const { t } = useTranslation();
-  const { data: sidebarConfig, update } = useSidebarConfig();
-  const [isSidebarDrawerMode, setIsSidebarDrawerMode] = useState(false);
-  const [isSidebarClosedAtDockMode, setIsSidebarClosedAtDockMode] = useState(false);
+  const {
+    update, isSidebarDrawerMode, isSidebarClosedAtDockMode, setIsSidebarDrawerMode, setIsSidebarClosedAtDockMode,
+  } = useSidebarConfig();
 
   const isDarkMode = isDarkModeByUtil();
   const colorText = isDarkMode ? 'dark' : 'light';
@@ -23,16 +23,14 @@ const CustomizeSidebarsetting = (): JSX.Element => {
       isSidebarDrawerMode,
       isSidebarClosedAtDockMode,
     };
-    update(sidebarConfig);
-    toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.title') }));
-  }, [t, isSidebarDrawerMode, isSidebarClosedAtDockMode, update]);
-
-  useEffect(() => {
-    if (sidebarConfig != null) {
-      setIsSidebarDrawerMode(sidebarConfig.isSidebarDrawerMode);
-      setIsSidebarClosedAtDockMode(sidebarConfig.isSidebarClosedAtDockMode);
+    try {
+      await update(sidebarConfig);
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.title') }));
     }
-  }, [sidebarConfig]);
+    catch (err) {
+      toastError(err);
+    }
+  }, [t, isSidebarDrawerMode, isSidebarClosedAtDockMode, update]);
 
   return (
     <React.Fragment>

packages/app/src/stores/ui.tsx

@@ -280,11 +280,15 @@ export const useDrawerMode = (): SWRResponse<boolean, Error> => {
   );
 };
 
-type SidebarConfigOperation = {
-  update: (updateData: Partial<ISidebarConfig>) => void,
+type SidebarConfigOption = {
+  update: (updateData: Partial<ISidebarConfig>) => Promise<void>,
+  isSidebarDrawerMode: boolean|undefined,
+  isSidebarClosedAtDockMode: boolean|undefined,
+  setIsSidebarDrawerMode: (isSidebarDrawerMode: boolean) => void,
+  setIsSidebarClosedAtDockMode: (isSidebarClosedAtDockMode: boolean) => void
 }
 
-export const useSidebarConfig = (): SWRResponse<ISidebarConfig, Error> & SidebarConfigOperation => {
+export const useSidebarConfig = (): SWRResponse<ISidebarConfig, Error> & SidebarConfigOption => {
   const swrResponse = useSWRImmutable<ISidebarConfig>(
     '/customize-setting/sidebar',
     endpoint => apiv3Get(endpoint).then(result => result.data),
@@ -303,6 +307,37 @@ export const useSidebarConfig = (): SWRResponse<ISidebarConfig, Error> & Sidebar
       // invoke API
       await apiv3Put('/customize-setting/sidebar', updateData);
     },
+    isSidebarDrawerMode: swrResponse.data?.isSidebarDrawerMode,
+    isSidebarClosedAtDockMode: swrResponse.data?.isSidebarClosedAtDockMode,
+    setIsSidebarDrawerMode: (isSidebarDrawerMode) => {
+      const { data, mutate } = swrResponse;
+
+      if (data == null) {
+        return;
+      }
+
+      const updateData = {
+        isSidebarDrawerMode,
+      };
+
+      // update isSidebarDrawerMode in cache, not revalidate
+      mutate({ ...data, ...updateData }, false);
+
+    },
+    setIsSidebarClosedAtDockMode: (isSidebarClosedAtDockMode) => {
+      const { data, mutate } = swrResponse;
+
+      if (data == null) {
+        return;
+      }
+
+      const updateData = {
+        isSidebarClosedAtDockMode,
+      };
+
+      // update isSidebarClosedAtDockMode in cache, not revalidate
+      mutate({ ...data, ...updateData }, false);
+    },
   };
 };