add the method to update UserUISettings

packages/app/src/components/Sidebar.tsx

@@ -3,10 +3,12 @@ import React, {
 } from 'react';
 
 import {
-  useCurrentSidebarContents, useDrawerMode, useDrawerOpened, usePreferDrawerModeByUser,
+  useDrawerMode, useDrawerOpened, usePreferDrawerModeByUser,
+  useSidebarCollapsed,
+  useCurrentSidebarContents,
   useCurrentProductNavWidth,
-  useSidebarCollapsed, putSidebarCollapsed,
   useSidebarResizeDisabled,
+  putUserUISettings,
 } from '~/stores/ui';
 
 import DrawerToggler from './Navbar/DrawerToggler';
@@ -32,7 +34,7 @@ const GlobalNavigation = () => {
     }
 
     mutateSidebarCollapsed(newValue, false);
-    putSidebarCollapsed(newValue);
+    putUserUISettings({ isSidebarCollapsed: newValue });
 
   }, [currentContents, isCollapsed, mutateSidebarCollapsed]);
 
@@ -91,13 +93,12 @@ const SidebarSkeltonContents = () => {
 
 
 type Props = {
-  productNavWidth: number
 }
 
 const Sidebar: FC<Props> = (props: Props) => {
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
-  const { data: currentProductNavWidth, mutate: mutateProductNavWidth } = useCurrentProductNavWidth(props.productNavWidth);
+  const { data: currentProductNavWidth, mutate: mutateProductNavWidth } = useCurrentProductNavWidth();
   const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
   const { data: isResizeDisabled, mutate: mutateSidebarResizeDisabled } = useSidebarResizeDisabled();
 
@@ -135,7 +136,7 @@ const Sidebar: FC<Props> = (props: Props) => {
       // }
 
       // disable resize
-      mutateSidebarResizeDisabled(true);
+      mutateSidebarResizeDisabled(true, false);
     }
     // Drawer --> Dock
     else {
@@ -145,7 +146,7 @@ const Sidebar: FC<Props> = (props: Props) => {
       // }
 
       // enable resize
-      mutateSidebarResizeDisabled(false);
+      mutateSidebarResizeDisabled(false, false);
 
       // // restore width
       // if (this.sidebarWidthCached != null) {
@@ -165,7 +166,7 @@ const Sidebar: FC<Props> = (props: Props) => {
   // }
 
   const backdropClickedHandler = useCallback(() => {
-    mutateDrawerOpened(false);
+    mutateDrawerOpened(false, false);
   }, [mutateDrawerOpened]);
 
   const [isMounted, setMounted] = useState(false);
@@ -208,7 +209,7 @@ const Sidebar: FC<Props> = (props: Props) => {
   const toggleNavigationBtnClickHandler = useCallback(() => {
     const newValue = !isCollapsed;
     mutateSidebarCollapsed(newValue, false);
-    putSidebarCollapsed(newValue);
+    putUserUISettings({ isSidebarCollapsed: newValue });
   }, [isCollapsed, mutateSidebarCollapsed]);
 
   useEffect(() => {
@@ -240,13 +241,14 @@ const Sidebar: FC<Props> = (props: Props) => {
 
     if (resizableContainer.current.clientWidth < sidebarMinWidth) {
       // force collapsed
-      mutateSidebarCollapsed(true);
-      mutateProductNavWidth(sidebarMinWidth);
-      // TODO call API and save DB
+      mutateSidebarCollapsed(true, false);
+      mutateProductNavWidth(sidebarMinWidth, false);
+      putUserUISettings({ isSidebarCollapsed: true, currentProductNavWidth: sidebarMinWidth });
     }
     else {
-      mutateProductNavWidth(resizableContainer.current.clientWidth);
-      // TODO call API and save DB
+      const newWidth = resizableContainer.current.clientWidth;
+      mutateProductNavWidth(newWidth, false);
+      putUserUISettings({ currentProductNavWidth: newWidth });
     }
 
     resizableContainer.current.classList.remove('dragging');

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

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 
 import { SidebarContents } from '~/interfaces/ui';
 import { useCurrentUser, useIsSharedUser } from '~/stores/context';
-import { useCurrentSidebarContents } from '~/stores/ui';
+import { useCurrentSidebarContents, putUserUISettings } from '~/stores/ui';
 
 
 type PrimaryItemProps = {
@@ -28,7 +28,8 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
       onItemSelected(contents);
     }
 
-    mutate(contents);
+    mutate(contents, false);
+    putUserUISettings({ currentSidebarContents: contents });
   }, [contents, mutate, onItemSelected]);
 
   return (

packages/app/src/interfaces/user-ui-settings.ts

@@ -5,6 +5,6 @@ import { SidebarContents } from './ui';
 export interface IUserUISettings {
   userId: IUser | string;
   isSidebarCollapsed: boolean,
-  selectedSidebarContents: SidebarContents,
+  currentSidebarContents: SidebarContents,
   currentProductNavWidth: number,
 }

packages/app/src/server/models/user-ui-settings.ts

@@ -14,7 +14,7 @@ export type UserUISettingsModel = Model<UserUISettingsDocument>
 const schema = new Schema<IUserUISettings>({
   user: { type: Schema.Types.ObjectId, ref: 'User', index: true },
   isSidebarCollapsed: { type: Boolean, default: false },
-  selectedSidebarContents: {
+  currentSidebarContents: {
     type: String,
     enum: SidebarContentType,
     default: SidebarContentType.RECENT,

packages/app/src/server/routes/apiv3/user-ui-settings.ts

@@ -19,7 +19,7 @@ module.exports = (crowi) => {
   const validatorForPut = [
     body('settings').exists().withMessage('The body param \'settings\' is required'),
     body('settings.isSidebarCollapsed').optional().isBoolean(),
-    body('settings.selectedSidebarContents').optional().isIn(AllSidebarContents),
+    body('settings.currentSidebarContents').optional().isIn(AllSidebarContents),
     body('settings.currentProductNavWidth').optional().isNumeric(),
   ];
 
@@ -49,7 +49,7 @@ module.exports = (crowi) => {
     // extract only necessary params
     const updateData = {
       isSidebarCollapsed: settings.isSidebarCollapsed,
-      selectedSidebarContents: settings.selectedSidebarContents,
+      currentSidebarContents: settings.currentSidebarContents,
       currentProductNavWidth: settings.currentProductNavWidth,
     };
 

packages/app/src/stores/ui.tsx

@@ -122,17 +122,6 @@ export const useDrawerOpened = (isOpened?: boolean): SWRResponse<boolean, Error>
  *                      for switching UI
  *********************************************************** */
 
-export const useCurrentSidebarContents = (sidebarContents?: SidebarContents): SWRResponse<SidebarContents, Error> => {
-  const initialData = SidebarContents.RECENT;
-  return useStaticSWR('sidebarContents', sidebarContents || null, { fallbackData: initialData });
-};
-
-
-export const useCurrentProductNavWidth = (productNavWidth?: number): SWRResponse<number, Error> => {
-  const initialData = 320;
-  return useStaticSWR('productNavWidth', productNavWidth || null, { fallbackData: initialData });
-};
-
 export const useSWRxUserUISettings = (): SWRResponse<IUserUISettings, Error> => {
   const key = isServer ? null : 'userUISettings';
 
@@ -142,27 +131,53 @@ export const useSWRxUserUISettings = (): SWRResponse<IUserUISettings, Error> =>
   );
 };
 
+export const putUserUISettings = async(settings: Partial<IUserUISettings>): Promise<AxiosResponse<IUserUISettings>> => {
+  return apiv3Put<IUserUISettings>('/user-ui-settings', { settings });
+};
+
 export const useSidebarCollapsed = (): SWRResponse<boolean, Error> => {
   const { data } = useSWRxUserUISettings();
   const key = data === undefined ? null : 'isSidebarCollapsed';
+  const initialData = data?.isSidebarCollapsed || false;
+
+  return useStaticSWR(
+    key,
+    null,
+    {
+      fallbackData: initialData,
+      use: [sessionStorageMiddleware],
+    },
+  );
+};
+
+export const useCurrentSidebarContents = (): SWRResponse<SidebarContents, Error> => {
+  const { data } = useSWRxUserUISettings();
+  const key = data === undefined ? null : 'sidebarContents';
+  const initialData = data?.currentSidebarContents || SidebarContents.RECENT;
 
   return useStaticSWR(
     key,
-    false,
+    null,
     {
-      revalidateOnFocus: false,
-      fallbackData: data?.isSidebarCollapsed,
+      fallbackData: initialData,
       use: [sessionStorageMiddleware],
     },
   );
 };
 
-export const putSidebarCollapsed = async(isCollapsed: boolean): Promise<AxiosResponse<IUserUISettings>> => {
-  return apiv3Put<IUserUISettings>('/user-ui-settings', {
-    settings: {
-      isSidebarCollapsed: isCollapsed,
+export const useCurrentProductNavWidth = (): SWRResponse<number, Error> => {
+  const { data } = useSWRxUserUISettings();
+  const key = data === undefined ? null : 'productNavWidth';
+  const initialData = data?.currentProductNavWidth || 320;
+
+  return useStaticSWR(
+    key,
+    null,
+    {
+      fallbackData: initialData,
+      use: [sessionStorageMiddleware],
     },
-  });
+  );
 };
 
 export const useSidebarResizeDisabled = (isDisabled?: boolean): SWRResponse<boolean, Error> => {