Merge pull request #4673 from weseek/feat/db-sync-ui-settings

[After #4670] feat: Sync UI settings with DB

packages/app/src/components/Navbar/PersonalDropdown.jsx

@@ -9,7 +9,8 @@ import { UserPicture } from '@growi/ui';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import NavigationContainer from '~/client/services/NavigationContainer';
-import { usePreferDrawerModeByUser } from '~/stores/ui';
+import { usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser } from '~/stores/ui';
+import { scheduleToPutUserUISettings } from '~/services/user-ui-settings';
 
 import {
   isUserPreferenceExists,
@@ -29,13 +30,14 @@ import SunIcon from '../Icons/SunIcon';
 
 const PersonalDropdown = (props) => {
 
-  const { t, appContainer, navigationContainer } = props;
+  const { t, appContainer } = props;
   const user = appContainer.currentUser || {};
 
   const [useOsSettings, setOsSettings] = useState(!isUserPreferenceExists());
   const [isDarkMode, setIsDarkMode] = useState(isDarkModeByUtil());
 
   const { data: isPreferDrawerMode, mutate: mutatePreferDrawerMode } = usePreferDrawerModeByUser();
+  const { data: isPreferDrawerModeOnEdit, mutate: mutatePreferDrawerModeOnEdit } = usePreferDrawerModeOnEditByUser();
 
   const logoutHandler = () => {
     const { interceptorManager } = appContainer;
@@ -51,11 +53,13 @@ const PersonalDropdown = (props) => {
 
   const preferDrawerModeSwitchModifiedHandler = useCallback((bool) => {
     mutatePreferDrawerMode(bool);
+    scheduleToPutUserUISettings({ preferDrawerModeByUser: bool });
   }, [mutatePreferDrawerMode]);
 
-  const preferDrawerModeOnEditSwitchModifiedHandler = (bool) => {
-    navigationContainer.setDrawerModePreferenceOnEdit(bool);
-  };
+  const preferDrawerModeOnEditSwitchModifiedHandler = useCallback((bool) => {
+    mutatePreferDrawerModeOnEdit(bool);
+    scheduleToPutUserUISettings({ preferDrawerModeOnEditByUser: bool });
+  }, [mutatePreferDrawerModeOnEdit]);
 
   const followOsCheckboxModifiedHandler = (bool) => {
     if (bool) {
@@ -80,13 +84,6 @@ const PersonalDropdown = (props) => {
   };
 
 
-  /*
-   * render
-   */
-  const {
-    preferDrawerModeByUser, preferDrawerModeOnEditByUser,
-  } = navigationContainer.state;
-
   /* eslint-disable react/prop-types */
   const IconWithTooltip = ({
     id, label, children, additionalClasses,
@@ -172,7 +169,7 @@ const PersonalDropdown = (props) => {
                   id="swSidebarModeOnEditor"
                   className="custom-control-input"
                   type="checkbox"
-                  checked={!preferDrawerModeOnEditByUser}
+                  checked={!isPreferDrawerModeOnEdit}
                   onChange={e => preferDrawerModeOnEditSwitchModifiedHandler(!e.target.checked)}
                 />
                 <label className="custom-control-label" htmlFor="swSidebarModeOnEditor"></label>
@@ -239,13 +236,12 @@ const PersonalDropdown = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const PersonalDropdownWrapper = withUnstatedContainers(PersonalDropdown, [AppContainer, NavigationContainer]);
+const PersonalDropdownWrapper = withUnstatedContainers(PersonalDropdown, [AppContainer]);
 
 
 PersonalDropdown.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
 export default withTranslation()(PersonalDropdownWrapper);

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

@@ -7,4 +7,6 @@ export interface IUserUISettings {
   isSidebarCollapsed: boolean,
   currentSidebarContents: SidebarContentsType,
   currentProductNavWidth: number,
+  preferDrawerModeByUser: boolean,
+  preferDrawerModeOnEditByUser: boolean,
 }

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

@@ -20,6 +20,8 @@ const schema = new Schema<UserUISettingsDocument, UserUISettingsModel>({
     default: SidebarContentsType.RECENT,
   },
   currentProductNavWidth: { type: Number },
+  preferDrawerModeByUser: { type: Boolean, default: false },
+  preferDrawerModeOnEditByUser: { type: Boolean, default: false },
 });
 
 

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

@@ -21,6 +21,8 @@ module.exports = (crowi) => {
     body('settings.isSidebarCollapsed').optional().isBoolean(),
     body('settings.currentSidebarContents').optional().isIn(AllSidebarContentsType),
     body('settings.currentProductNavWidth').optional().isNumeric(),
+    body('settings.preferDrawerModeByUser').optional().isBoolean(),
+    body('settings.preferDrawerModeOnEditByUser').optional().isBoolean(),
   ];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -51,6 +53,8 @@ module.exports = (crowi) => {
       isSidebarCollapsed: settings.isSidebarCollapsed,
       currentSidebarContents: settings.currentSidebarContents,
       currentProductNavWidth: settings.currentProductNavWidth,
+      preferDrawerModeByUser: settings.preferDrawerModeByUser,
+      preferDrawerModeOnEditByUser: settings.preferDrawerModeOnEditByUser,
     };
     // remove the keys that have null value
     Object.keys(updateData).forEach((key) => {

packages/app/src/stores/ui.tsx

@@ -1,5 +1,5 @@
 import useSWR, {
-  useSWRConfig, SWRResponse, Key, Fetcher, Middleware, mutate, SWRConfig,
+  useSWRConfig, SWRResponse, Key, Fetcher, Middleware,
 } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
@@ -111,15 +111,17 @@ export const useIsDeviceSmallerThanMd = (): SWRResponse<boolean|null, Error> =>
 };
 
 export const usePreferDrawerModeByUser = (isPrefered?: boolean): SWRResponse<boolean, Error> => {
-  const key: Key = isServer ? null : 'preferDrawerModeByUser';
-  const initialData = localStorage?.preferDrawerModeByUser === 'true';
+  const { data } = useSWRxUserUISettings();
+  const key: Key = data === undefined ? null : 'preferDrawerModeByUser';
+  const initialData = data?.preferDrawerModeByUser;
 
   return useStaticSWR(key, isPrefered || null, { fallbackData: initialData, use: [mutateDrawerMode, sessionStorageMiddleware] });
 };
 
 export const usePreferDrawerModeOnEditByUser = (isPrefered?: boolean): SWRResponse<boolean, Error> => {
-  const key: Key = isServer ? null : 'preferDrawerModeOnEditByUser';
-  const initialData = localStorage?.preferDrawerModeOnEditByUser == null || localStorage?.preferDrawerModeOnEditByUser === 'true';
+  const { data } = useSWRxUserUISettings();
+  const key: Key = data === undefined ? null : 'preferDrawerModeOnEditByUser';
+  const initialData = data?.preferDrawerModeOnEditByUser;
 
   return useStaticSWR(key, isPrefered || null, { fallbackData: initialData, use: [mutateDrawerMode, sessionStorageMiddleware] });
 };