SWRized admin layout setting

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

@@ -3,37 +3,24 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
+import { apiv3Put } from '~/client/util/apiv3-client';
+import { useSWRxLayoutSetting } from '~/stores/admin/customize';
 import { useNextThemes } from '~/stores/use-next-themes';
 
 const CustomizeLayoutSetting = (): JSX.Element => {
   const { t } = useTranslation('admin');
 
   const { resolvedTheme } = useNextThemes();
+  const { data: layoutSetting, mutate: mutateLayoutSetting } = useSWRxLayoutSetting();
 
-  const [isContainerFluid, setIsContainerFluid] = useState(false);
+  const [isContainerFluid, setIsContainerFluid] = useState<boolean>(layoutSetting?.isContainerFluid ?? false);
   const [retrieveError, setRetrieveError] = useState<any>();
 
-  const retrieveData = useCallback(async() => {
-    try {
-      const res = await apiv3Get('/customize-setting/layout');
-      setIsContainerFluid(res.data.isContainerFluid);
-    }
-    catch (err) {
-      setRetrieveError(err);
-      toastError(err);
-    }
-  }, []);
-
-  useEffect(() => {
-    retrieveData();
-  }, [retrieveData]);
-
   const onClickSubmit = async() => {
     try {
       await apiv3Put('/customize-setting/layout', { isContainerFluid });
       toastSuccess(t('toaster.update_successed', { target: t('customize_settings.layout') }));
-      retrieveData();
+      mutateLayoutSetting();
     }
     catch (err) {
       toastError(err);

packages/app/src/pages/[[...path]].page.tsx

@@ -68,6 +68,7 @@ import {
 import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
+import { useSWRxLayoutSetting } from '~/stores/admin/customize';
 // import { useCurrentPageSWR } from '../stores/page';
 
 
@@ -242,6 +243,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   useCurrentPagePath(pagePath);
   useCurrentPathname(props.currentPathname);
   useIsTrashPage(pagePath != null && _isTrashPage(pagePath));
+  const { data: layoutSetting } = useSWRxLayoutSetting({ isContainerFluid: props.isContainerFluid });
   const { data: dataPageInfo } = useSWRxPageInfo(pageId);
 
   const { data: grantData } = useSWRxIsGrantNormalized(pageId);
@@ -278,9 +280,11 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // }
 
   const isTopPagePath = isTopPage(pageWithMeta?.data.path ?? '');
+
+  // Use `props.isContainerFluid` as default, `layoutSetting.isContainerFluid` as admin setting, `dataPageInfo.expandContentWidth` as each page's setting
   const expandContentWidth = dataPageInfo == null || !('expandContentWidth' in dataPageInfo)
-    ? props.isContainerFluid
-    : dataPageInfo.expandContentWidth ?? props.isContainerFluid;
+    ? layoutSetting?.isContainerFluid ?? props.isContainerFluid
+    : dataPageInfo.expandContentWidth ?? layoutSetting?.isContainerFluid ?? props.isContainerFluid;
 
   return (
     <>

packages/app/src/stores/admin/customize.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+import useSWR, { SWRResponse } from 'swr';
+
+import { apiv3Get } from '~/client/util/apiv3-client';
+
+
+type IResLayoutSetting = {
+  isContainerFluid: boolean,
+};
+
+export const useSWRxLayoutSetting = (fallbackData?: IResLayoutSetting): SWRResponse<IResLayoutSetting, Error> => {
+  const fetcher = useCallback(async() => {
+    const res = await apiv3Get('/customize-setting/layout');
+
+    return res.data;
+  }, []);
+
+  return useSWR(
+    '/customize-setting/layout',
+    fetcher,
+    { fallbackData },
+  );
+};