impl swr hooks for drawer

packages/app/src/stores/middlewares/sync-to-storage.ts

@@ -4,17 +4,18 @@ const generateKeyInStorage = (key: string): string => {
   return `swr-cache-${key}`;
 };
 
-export type IStorageSerializer<Data> = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type IStorageSerializer<Data = any> = {
   serialize: (value: Data) => string,
   deserialize: (value: string | null) => Data,
 }
 
-export const createSyncToStorageMiddlware = <Data>(
-  storage: Storage,
-  storageSerializer: IStorageSerializer<Data> = {
-    serialize: JSON.stringify,
-    deserialize: JSON.parse,
-  },
+export const createSyncToStorageMiddlware = (
+    storage: Storage,
+    storageSerializer: IStorageSerializer = {
+      serialize: JSON.stringify,
+      deserialize: JSON.parse,
+    },
 ): Middleware => {
   return (useSWRNext) => {
     return (key, fetcher, config) => {
@@ -23,7 +24,7 @@ export const createSyncToStorageMiddlware = <Data>(
       }
 
       const keyInStorage = generateKeyInStorage(key.toString());
-      let initData;
+      let initData = config.fallbackData;
 
       // retrieve initial data from storage
       const itemInStorage = storage.getItem(keyInStorage);

packages/app/src/stores/ui.tsx

@@ -4,6 +4,7 @@ import { Breakpoint, addBreakpointListener } from '@growi/ui';
 
 import loggerFactory from '~/utils/logger';
 
+import { sessionStorageMiddleware } from './middlewares/sync-to-storage';
 import { useStaticSWR } from './use-static-swr';
 
 const logger = loggerFactory('growi:stores:ui');
@@ -77,87 +78,40 @@ export const useIsDeviceSmallerThanMd = (): SWRResponse<boolean|null, Error> =>
   return useStaticSWR(key);
 };
 
-// export const usePreferDrawerModeByUser = (isPrefered?: boolean): SWRResponse<boolean, any> => {
-//   const isServer = typeof window === 'undefined';
-//   const key = isServer ? null : 'preferDrawerModeByUser';
-
-//   // FIXME
-//   if (isServer) {
-//     return useStaticSWR(key);
-//   }
-
-//   const res = useLocalStorageSyncedSWR<boolean, any>(
-//     key,
-//     {
-//       serialize: value => (value as boolean ? 'true' : 'false'),
-//       deserialize: value => value === 'true',
-//     },
-//   );
-
-//   if (!isServer && isPrefered != null) {
-//     res.mutate(isPrefered);
-//   }
-
-//   return res;
-// };
-
-// export const usePreferDrawerModeOnEditByUser = (isPrefered?: boolean): SWRResponse<boolean, any> => {
-//   const isServer = typeof window === 'undefined';
-//   const key = isServer ? null : 'preferDrawerModeOnEditByUser';
-
-//   const res = useLocalStorageSyncedSWR<boolean, any>(
-//     key,
-//     {
-//       serialize: value => (value as boolean ? 'true' : 'false'),
-//       deserialize: value => value == null || value === 'true', // default true
-//     },
-//   );
-
-//   if (!isServer && isPrefered != null) {
-//     res.mutate(isPrefered);
-//   }
-
-//   return res;
-// };
-
-// export const useDrawerMode = (): SWRResponse<boolean, any> => {
-//   const isServer = typeof window === 'undefined';
-//   const key = isServer ? null : 'isDrawerMode';
-
-//   // FIXME
-//   if (isServer) {
-//     return useStaticSWR(key);
-//   }
-
-//   const { data: editorMode } = useEditorMode();
-//   const { data: preferDrawerModeByUser } = usePreferDrawerModeByUser();
-//   const { data: preferDrawerModeOnEditByUser } = usePreferDrawerModeOnEditByUser();
-//   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
-
-//   // get preference on view or edit
-//   const preferDrawerMode = editorMode !== EditorMode.View ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;
-
-//   const isDrawerMode = isDeviceSmallerThanMd || preferDrawerMode;
-
-//   mutate(key, isDrawerMode);
-
-//   return useStaticSWR(key);
-// };
-
-// export const useDrawerOpened = (isOpened?: boolean): SWRResponse<boolean, any> => {
-//   const key = 'isDrawerOpened';
-
-//   if (isOpened == null) {
-//     if (!cache.has(key)) {
-//       mutate(key, false, false);
-//     }
-//   }
-//   else {
-//     mutate(key, isOpened);
-//   }
-
-//   return useStaticSWR(key);
-// };
+export const usePreferDrawerModeByUser = (isPrefered?: boolean): SWRResponse<boolean, Error> => {
+  const key = isServer ? null : 'preferDrawerModeByUser';
+
+  const initialData = false;
+  return useStaticSWR(key, isPrefered || null, { fallbackData: initialData, use: [sessionStorageMiddleware] });
+};
+
+export const usePreferDrawerModeOnEditByUser = (isPrefered?: boolean): SWRResponse<boolean, Error> => {
+  const key = isServer ? null : 'preferDrawerModeOnEditByUser';
+
+  const initialData = true;
+  return useStaticSWR(key, isPrefered || null, { fallbackData: initialData, use: [sessionStorageMiddleware] });
+};
+
+export const useDrawerMode = (): SWRResponse<boolean, Error> => {
+  const key = isServer ? null : 'isDrawerMode';
+
+  const { data: editorMode } = useEditorMode();
+  const { data: preferDrawerModeByUser } = usePreferDrawerModeByUser();
+  const { data: preferDrawerModeOnEditByUser } = usePreferDrawerModeOnEditByUser();
+  const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
+
+  // get preference on view or edit
+  const preferDrawerMode = editorMode !== EditorMode.View ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;
+
+  const isDrawerMode = isDeviceSmallerThanMd || preferDrawerMode;
+
+  return useStaticSWR(key, isDrawerMode || null);
+};
+
+export const useDrawerOpened = (isOpened?: boolean): SWRResponse<boolean, Error> => {
+  const initialData = false;
+  return useStaticSWR('isDrawerOpened', isOpened || null, { fallbackData: initialData });
+};
 
 
 /** **********************************************************