update isSidebarCollapsed by server data

packages/app/src/components/Sidebar.tsx

@@ -4,7 +4,9 @@ import React, {
 
 import {
   useCurrentSidebarContents, useDrawerMode, useDrawerOpened, usePreferDrawerModeByUser,
-  useCurrentProductNavWidth, useSidebarCollapsed, useSidebarResizeDisabled,
+  useCurrentProductNavWidth,
+  useSidebarCollapsed, putSidebarCollapsed,
+  useSidebarResizeDisabled,
 } from '~/stores/ui';
 
 import DrawerToggler from './Navbar/DrawerToggler';
@@ -21,15 +23,17 @@ const GlobalNavigation = () => {
 
   const itemSelectedHandler = useCallback((selectedContents) => {
 
+    let newValue = false;
+
     // already selected
     if (currentContents === selectedContents) {
       // toggle collapsed
-      mutateSidebarCollapsed(!isCollapsed);
-    }
-    // switch and expand
-    else {
-      mutateSidebarCollapsed(false);
+      newValue = !isCollapsed;
     }
+
+    mutateSidebarCollapsed(newValue, false);
+    putSidebarCollapsed(newValue);
+
   }, [currentContents, isCollapsed, mutateSidebarCollapsed]);
 
   return <SidebarNav onItemSelected={itemSelectedHandler} />;
@@ -202,7 +206,9 @@ const Sidebar: FC<Props> = (props: Props) => {
   }, [isCollapsed, isDrawerMode, setContentWidth, currentProductNavWidth]);
 
   const toggleNavigationBtnClickHandler = useCallback(() => {
-    mutateSidebarCollapsed(!isCollapsed);
+    const newValue = !isCollapsed;
+    mutateSidebarCollapsed(newValue, false);
+    putSidebarCollapsed(newValue);
   }, [isCollapsed, mutateSidebarCollapsed]);
 
   useEffect(() => {

packages/app/src/components/Sidebar/SidebarContents.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from 'react';
 
+import { SidebarContents as SidebarContentType } from '~/interfaces/ui';
+import { useCurrentSidebarContents } from '~/stores/ui';
+
 import RecentChanges from './RecentChanges';
 import CustomSidebar from './CustomSidebar';
-import { useCurrentSidebarContents, SidebarContents as SidebarContentType } from '~/stores/ui';
 
 type Props = {
 };

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -1,6 +1,8 @@
 import React, { FC, useCallback } from 'react';
+
+import { SidebarContents } from '~/interfaces/ui';
 import { useCurrentUser, useIsSharedUser } from '~/stores/context';
-import { SidebarContents, useCurrentSidebarContents } from '~/stores/ui';
+import { useCurrentSidebarContents } from '~/stores/ui';
 
 
 type PrimaryItemProps = {

packages/app/src/stores/ui.tsx

@@ -1,12 +1,20 @@
-import { Key, useSWRConfig, SWRResponse } from 'swr';
+import {
+  useSWRConfig, SWRResponse, Key,
+} from 'swr';
+import useSWRImmutable from 'swr/immutable';
+
+// eslint-disable-next-line no-restricted-imports
+import { AxiosResponse } from 'axios';
 
 import { Breakpoint, addBreakpointListener } from '@growi/ui';
 
+import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
 import { SidebarContents } from '~/interfaces/ui';
 import loggerFactory from '~/utils/logger';
 
 import { sessionStorageMiddleware } from './middlewares/sync-to-storage';
 import { useStaticSWR } from './use-static-swr';
+import { IUserUISettings } from '~/interfaces/user-ui-settings';
 
 const logger = loggerFactory('growi:stores:ui');
 
@@ -125,9 +133,36 @@ export const useCurrentProductNavWidth = (productNavWidth?: number): SWRResponse
   return useStaticSWR('productNavWidth', productNavWidth || null, { fallbackData: initialData });
 };
 
-export const useSidebarCollapsed = (isCollapsed?: boolean): SWRResponse<boolean, Error> => {
-  const initialData = false;
-  return useStaticSWR('isSidebarCollapsed', isCollapsed || null, { fallbackData: initialData });
+export const useSWRxUserUISettings = (): SWRResponse<IUserUISettings, Error> => {
+  const key = isServer ? null : 'userUISettings';
+
+  return useSWRImmutable(
+    key,
+    () => apiv3Get<IUserUISettings>('/user-ui-settings').then(response => response.data),
+  );
+};
+
+export const useSidebarCollapsed = (): SWRResponse<boolean, Error> => {
+  const { data } = useSWRxUserUISettings();
+  const key = data === undefined ? null : 'isSidebarCollapsed';
+
+  return useStaticSWR(
+    key,
+    false,
+    {
+      revalidateOnFocus: false,
+      fallbackData: data?.isSidebarCollapsed,
+      use: [sessionStorageMiddleware],
+    },
+  );
+};
+
+export const putSidebarCollapsed = async(isCollapsed: boolean): Promise<AxiosResponse<IUserUISettings>> => {
+  return apiv3Put<IUserUISettings>('/user-ui-settings', {
+    settings: {
+      isSidebarCollapsed: isCollapsed,
+    },
+  });
 };
 
 export const useSidebarResizeDisabled = (isDisabled?: boolean): SWRResponse<boolean, Error> => {