refactor api call

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

@@ -152,6 +152,7 @@
     "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,6 +152,7 @@
     "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,6 +151,7 @@
     "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

@@ -18,13 +18,21 @@ const CustomizeSidebarsetting = (): JSX.Element => {
   const drawerIconFileName = `/images/customize-settings/drawer-${colorText}.svg`;
   const dockIconFileName = `/images/customize-settings/dock-${colorText}.svg`;
 
-  const retrieveData = useCallback(async() => {
+  const retrieveIsSidebarDrawerMode = useCallback(async() => {
     try {
-      const resSidebar = await apiv3Get('/customize-setting/sidebar');
-      setIsSidebarDrawerMode(resSidebar.data.isSidebarDrawerMode);
+      const res = await apiv3Get('/customize-setting/sidebar');
+      setIsSidebarDrawerMode(res.data.isSidebarDrawerMode);
+    }
+    catch (err) {
+      setRetrieveError(err);
+      toastError(err);
+    }
+  }, []);
 
-      const resIsClosed = await apiv3Get('/customize-setting/isSidebarClosedAtDockMode');
-      setIsSidebarClosedAtDockMode(resIsClosed.data.isSidebarClosedAtDockMode);
+  const retrieveIsSidebarClosedAtDockMode = useCallback(async() => {
+    try {
+      const res = await apiv3Get('/customize-setting/isSidebarClosedAtDockMode');
+      setIsSidebarClosedAtDockMode(res.data.isSidebarClosedAtDockMode);
     }
     catch (err) {
       setRetrieveError(err);
@@ -32,18 +40,36 @@ const CustomizeSidebarsetting = (): JSX.Element => {
     }
   }, []);
 
-  const onClickSubmit = async() => {
+  const retrieveData = useCallback(async() => {
+    await retrieveIsSidebarDrawerMode();
+    await retrieveIsSidebarClosedAtDockMode();
+  }, [retrieveIsSidebarDrawerMode, retrieveIsSidebarClosedAtDockMode]);
+
+  const submitIsSidebarDrawerMode = useCallback(async() => {
     try {
       await apiv3Put('/customize-setting/sidebar', { isSidebarDrawerMode });
-      await apiv3Put('/customize-setting/isSidebarClosedAtDockMode', { isSidebarClosedAtDockMode });
-
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.title') }));
-      retrieveData();
     }
     catch (err) {
       toastError(err);
     }
-  };
+  }, [t, isSidebarDrawerMode]);
+
+  const submitIsSidebarClosedAtDockMode = useCallback(async() => {
+    try {
+      await apiv3Put('/customize-setting/isSidebarClosedAtDockMode', { isSidebarClosedAtDockMode });
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.dock_mode_default') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [t, isSidebarClosedAtDockMode]);
+
+  const onClickSubmit = useCallback(async() => {
+    await submitIsSidebarDrawerMode();
+    await submitIsSidebarClosedAtDockMode();
+    retrieveData();
+  }, [retrieveData, submitIsSidebarClosedAtDockMode, submitIsSidebarDrawerMode]);
 
   useEffect(() => {
     retrieveData();