call swr in front

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

@@ -3,77 +3,29 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardBody } from 'reactstrap';
 
-import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
+import { toastSuccess } 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 [isSidebarDrawerMode, setIsSidebarDrawerMode] = useState(false);
-  const [isSidebarClosedAtDockMode, setIsSidebarClosedAtDockMode] = useState(false);
-  const [retrieveError, setRetrieveError] = useState();
+  const { data: sidebarConfig, update } = useSidebarConfig();
+  const [isSidebarDrawerMode, setIsSidebarDrawerMode] = useState(sidebarConfig?.isSidebarDrawerMode);
+  const [isSidebarClosedAtDockMode, setIsSidebarClosedAtDockMode] = useState(sidebarConfig?.isSidebarClosedAtDockMode);
 
   const isDarkMode = isDarkModeByUtil();
   const colorText = isDarkMode ? 'dark' : 'light';
   const drawerIconFileName = `/images/customize-settings/drawer-${colorText}.svg`;
   const dockIconFileName = `/images/customize-settings/dock-${colorText}.svg`;
 
-  const retrieveIsSidebarDrawerMode = useCallback(async() => {
-    try {
-      const res = await apiv3Get('/customize-setting/sidebar');
-      setIsSidebarDrawerMode(res.data.isSidebarDrawerMode);
-    }
-    catch (err) {
-      setRetrieveError(err);
-      toastError(err);
-    }
-  }, []);
-
-  const retrieveIsSidebarClosedAtDockMode = useCallback(async() => {
-    try {
-      const res = await apiv3Get('/customize-setting/isSidebarClosedAtDockMode');
-      setIsSidebarClosedAtDockMode(res.data.isSidebarClosedAtDockMode);
-    }
-    catch (err) {
-      setRetrieveError(err);
-      toastError(err);
-    }
-  }, []);
-
-  const retrieveData = useCallback(async() => {
-    await retrieveIsSidebarDrawerMode();
-    await retrieveIsSidebarClosedAtDockMode();
-  }, [retrieveIsSidebarDrawerMode, retrieveIsSidebarClosedAtDockMode]);
-
-  const submitIsSidebarDrawerMode = useCallback(async() => {
-    try {
-      await apiv3Put('/customize-setting/sidebar', { isSidebarDrawerMode });
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.title') }));
-    }
-    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();
-  }, [retrieveData]);
+    const sidebarConfig = {
+      isSidebarDrawerMode,
+      isSidebarClosedAtDockMode,
+    };
+    update(sidebarConfig);
+    toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.default_sidebar_mode.title') }));
+  }, [t, isSidebarDrawerMode, isSidebarClosedAtDockMode, update]);
 
   return (
     <React.Fragment>
@@ -152,7 +104,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
 
           <div className="row my-3">
             <div className="mx-auto">
-              <button type="button" onClick={onClickSubmit} className="btn btn-primary" disabled={retrieveError != null}>{ t('Update') }</button>
+              <button type="button" onClick={onClickSubmit} className="btn btn-primary">{ t('Update') }</button>
             </div>
           </div>