clean code

apps/app/src/client/services/user-ui-settings.ts

@@ -18,7 +18,7 @@ const _putUserUISettingsInBulk = (): Promise<AxiosResponse<IUserUISettings>> =>
 const _putUserUISettingsInBulkDebounced = debounce(1500, _putUserUISettingsInBulk);
 
 type ScheduleToPutFunction = (settings: Partial<IUserUISettings>) => Promise<AxiosResponse<IUserUISettings>>;
-const scheduleToPut: ScheduleToPutFunction = (settings: Partial<IUserUISettings>): Promise<AxiosResponse<IUserUISettings>> => {
+export const scheduleToPut: ScheduleToPutFunction = (settings: Partial<IUserUISettings>): Promise<AxiosResponse<IUserUISettings>> => {
   settingsForBulk = {
     ...settingsForBulk,
     ...settings,
@@ -26,13 +26,3 @@ const scheduleToPut: ScheduleToPutFunction = (settings: Partial<IUserUISettings>
 
   return _putUserUISettingsInBulkDebounced();
 };
-
-type UserUISettingsUtil = {
-  scheduleToPut: ScheduleToPutFunction | (() => void),
-}
-export const useUserUISettings = (): UserUISettingsUtil => {
-
-  return {
-    scheduleToPut,
-  };
-};

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -4,7 +4,7 @@ import React, {
 
 import dynamic from 'next/dynamic';
 
-import { useUserUISettings } from '~/client/services/user-ui-settings';
+import { scheduleToPut } from '~/client/services/user-ui-settings';
 import {
   useDrawerMode, useDrawerOpened,
   useSidebarCollapsed,
@@ -35,8 +35,6 @@ export const SidebarSubstance = memo((): JSX.Element => {
 
   const [resizableAreaWidth, setResizableAreaWidth] = useState(0);
 
-  const { scheduleToPut } = useUserUISettings();
-
   const toggleDrawerMode = useCallback((bool) => {
     const isStateModified = isResizeDisabled !== bool;
     if (!isStateModified) {
@@ -62,13 +60,13 @@ export const SidebarSubstance = memo((): JSX.Element => {
   const resizeDoneHandler = useCallback((newWidth: number) => {
     mutateProductNavWidth(newWidth, false);
     scheduleToPut({ preferCollapsedModeByUser: false, currentProductNavWidth: newWidth });
-  }, [mutateProductNavWidth, scheduleToPut]);
+  }, [mutateProductNavWidth]);
 
   const collapsedByResizableAreaHandler = useCallback(() => {
     mutateSidebarCollapsed(true);
     mutateProductNavWidth(sidebarMinWidth, false);
     scheduleToPut({ preferCollapsedModeByUser: true, currentProductNavWidth: sidebarMinWidth });
-  }, [mutateProductNavWidth, mutateSidebarCollapsed, scheduleToPut]);
+  }, [mutateProductNavWidth, mutateSidebarCollapsed]);
 
   useEffect(() => {
     toggleDrawerMode(isDrawerMode);

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.tsx

@@ -2,7 +2,7 @@ import { FC, memo, useCallback } from 'react';
 
 import dynamic from 'next/dynamic';
 
-import { useUserUISettings } from '~/client/services/user-ui-settings';
+import { scheduleToPut } from '~/client/services/user-ui-settings';
 import { SidebarContentsType } from '~/interfaces/ui';
 import { useCurrentSidebarContents } from '~/stores/ui';
 
@@ -26,7 +26,6 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
   } = props;
 
   const { data: currentContents, mutate } = useCurrentSidebarContents();
-  const { scheduleToPut } = useUserUISettings();
 
   const isSelected = contents === currentContents;
 
@@ -34,7 +33,7 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
     mutate(contents, false);
     scheduleToPut({ currentSidebarContents: contents });
     onItemSelected?.(contents);
-  }, [contents, mutate, onItemSelected, scheduleToPut]);
+  }, [contents, mutate, onItemSelected]);
 
   const labelForTestId = label.toLowerCase().replace(' ', '-');
 

apps/app/src/stores/ui.tsx

@@ -1,7 +1,7 @@
 import { type RefObject, useCallback, useEffect } from 'react';
 
 import { PageGrant, type Nullable } from '@growi/core';
-import { type SWRResponseWithUtils, withUtils } from '@growi/core/dist/swr';
+import { type SWRResponseWithUtils, useSWRStatic } from '@growi/core/dist/swr';
 import { pagePathUtils, isClient, isServer } from '@growi/core/dist/utils';
 import { Breakpoint } from '@growi/ui/dist/interfaces';
 import { addBreakpointListener, cleanupBreakpointListener } from '@growi/ui/dist/utils';
@@ -13,7 +13,6 @@ import {
 import useSWRImmutable from 'swr/immutable';
 
 import type { IFocusable } from '~/client/interfaces/focusable';
-import { useUserUISettings } from '~/client/services/user-ui-settings';
 import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
 import type { IPageGrantData } from '~/interfaces/page';
 import type { ISidebarConfig } from '~/interfaces/sidebar-config';
@@ -221,36 +220,21 @@ export const useIsDeviceSmallerThanLg = (): SWRResponse<boolean, Error> => {
   return useStaticSWR(key);
 };
 
-type PreferCollapsedModeByUserUtils = {
-  update: (preferCollapsedMode: boolean) => void
-}
-
-export const usePreferCollapsedModeByUser = (initialData?: boolean): SWRResponseWithUtils<PreferCollapsedModeByUserUtils, boolean> => {
-  const { scheduleToPut } = useUserUISettings();
-
-  const swrResponse: SWRResponse<boolean, Error> = useStaticSWR('preferCollapsedModeByUser', initialData);
-
-  const utils: PreferCollapsedModeByUserUtils = {
-    update: (preferCollapsedMode: boolean) => {
-      swrResponse.mutate(preferCollapsedMode);
-      scheduleToPut({ preferCollapsedModeByUser: preferCollapsedMode });
-    },
-  };
-
-  return withUtils<PreferCollapsedModeByUserUtils>(swrResponse, utils);
 
+export const usePreferCollapsedModeByUser = (initialData?: boolean): SWRResponse<boolean> => {
+  return useSWRStatic('preferCollapsedModeByUser', initialData);
 };
 
 export const useSidebarCollapsed = (initialData?: boolean): SWRResponse<boolean, Error> => {
-  return useStaticSWR('isSidebarCollapsed', initialData, { fallbackData: false });
+  return useSWRStatic('isSidebarCollapsed', initialData, { fallbackData: false });
 };
 
 export const useCurrentSidebarContents = (initialData?: SidebarContentsType): SWRResponse<SidebarContentsType, Error> => {
-  return useStaticSWR('sidebarContents', initialData, { fallbackData: SidebarContentsType.TREE });
+  return useSWRStatic('sidebarContents', initialData, { fallbackData: SidebarContentsType.TREE });
 };
 
 export const useCurrentProductNavWidth = (initialData?: number): SWRResponse<number, Error> => {
-  return useStaticSWR('productNavWidth', initialData, { fallbackData: 320 });
+  return useSWRStatic('productNavWidth', initialData, { fallbackData: 320 });
 };
 
 export const useDrawerMode = (): SWRResponse<boolean, Error> => {