Refactored useLayoutSetting

packages/app/src/interfaces/customize.ts

@@ -19,3 +19,7 @@ export type IHighlightJsCssSelectorOptions = {
     border: boolean
   }
 }
+
+export type IResLayoutSetting = {
+  isContainerFluid: boolean,
+};

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

@@ -63,7 +63,7 @@ import {
   useIsAclEnabled, useIsUserPage,
   useCsrfToken, useIsSearchScopeChildrenAsDefault, useCurrentPageId, useCurrentPathname,
   useIsSlackConfigured, useRendererConfig, useEditingMarkdown,
-  useEditorConfig, useIsAllReplyShown, useIsUploadableFile, useIsUploadableImage,
+  useEditorConfig, useIsAllReplyShown, useIsUploadableFile, useIsUploadableImage, useLayoutSetting,
 } from '../stores/context';
 
 import {
@@ -244,7 +244,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: layoutSetting } = useLayoutSetting({ isContainerFluid: props.isContainerFluid });
   const { data: dataPageInfo } = useSWRxPageInfo(pageId);
 
   const { data: grantData } = useSWRxIsGrantNormalized(pageId);

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

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

packages/app/src/stores/context.tsx

@@ -5,6 +5,7 @@ import useSWRImmutable from 'swr/immutable';
 
 
 import { SupportedActionType } from '~/interfaces/activity';
+import { IResLayoutSetting } from '~/interfaces/customize';
 import { EditorConfig } from '~/interfaces/editor-settings';
 // import { CustomWindow } from '~/interfaces/global';
 import { RendererConfig } from '~/interfaces/services/renderer';
@@ -258,6 +259,10 @@ export const useShowPageLimitationXL = (initialData?: number): SWRResponse<numbe
   return useStaticSWR('showPageLimitationXL', initialData);
 };
 
+export const useLayoutSetting = (initialData?: IResLayoutSetting): SWRResponse<IResLayoutSetting, Error> => {
+  return useStaticSWR('layoutSetting', initialData);
+};
+
 /** **********************************************************
  *                     Computed contexts
  *********************************************************** */