WIP

packages/app/src/client/services/ContextExtractor.tsx

@@ -7,6 +7,7 @@ import {
   usePageId, usePageIdOnHackmd, usePageUser, useCurrentPagePath, useRevisionCreatedAt, useRevisionId, useRevisionIdHackmdSynced,
   useShareLinkId, useShareLinksNumber, useTemplateTagData, useUpdatedAt, useCreator, useRevisionAuthor, useCurrentUser,
 } from '../../stores/context';
+import { useDrawerMode } from '~/stores/ui';
 
 const { isTrashPage: _isTrashPage } = pagePathUtils;
 
@@ -54,7 +55,13 @@ const ContextExtractor: FC = () => {
   /*
    * use static swr
    */
+  // App
   useCurrentUser(currentUser);
+
+  // Navigation
+  useDrawerMode();
+
+  // Page
   useCreatedAt(createdAt);
   useDeleteUsername(deleteUsername);
   useDeletedAt(deletedAt);

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
@@ -9,7 +9,7 @@ import { UserPicture } from '@growi/ui';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import NavigationContainer from '~/client/services/NavigationContainer';
-import { useDrawerMode } from '~/stores/ui';
+import { usePreferDrawerModeByUser, useDrawerMode } from '~/stores/ui';
 
 import {
   isUserPreferenceExists,
@@ -35,7 +35,8 @@ const PersonalDropdown = (props) => {
   const [useOsSettings, setOsSettings] = useState(!isUserPreferenceExists());
   const [isDarkMode, setIsDarkMode] = useState(isDarkModeByUtil());
 
-  const { mutate } = useDrawerMode();
+  const { data: isPreferDrawerMode, mutate: mutatePreferDrawerMode } = usePreferDrawerModeByUser();
+  const { mutate: mutateDrawerMode } = useDrawerMode();
 
   const logoutHandler = () => {
     const { interceptorManager } = appContainer;
@@ -49,10 +50,10 @@ const PersonalDropdown = (props) => {
     window.location.href = '/logout';
   };
 
-  const preferDrawerModeSwitchModifiedHandler = (bool) => {
-    // navigationContainer.setDrawerModePreference(bool);
-    mutate(bool);
-  };
+  const preferDrawerModeSwitchModifiedHandler = useCallback((bool) => {
+    mutatePreferDrawerMode(bool);
+    mutateDrawerMode();
+  }, [mutatePreferDrawerMode, mutateDrawerMode]);
 
   const preferDrawerModeOnEditSwitchModifiedHandler = (bool) => {
     navigationContainer.setDrawerModePreferenceOnEdit(bool);
@@ -148,7 +149,7 @@ const PersonalDropdown = (props) => {
                   id="swSidebarMode"
                   className="custom-control-input"
                   type="checkbox"
-                  checked={!preferDrawerModeByUser}
+                  checked={!isPreferDrawerMode}
                   onChange={e => preferDrawerModeSwitchModifiedHandler(!e.target.checked)}
                 />
                 <label className="custom-control-label" htmlFor="swSidebarMode"></label>

packages/app/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useCallback, useEffect, useRef, useState, memo,
+  FC, useCallback, useEffect, useRef, useState,
 } from 'react';
 
 import {
@@ -95,15 +95,13 @@ const SidebarSkeltonContents = () => {
 type Props = {
 }
 
-const Sidebar: FC<Props> = memo((props: Props) => {
+const Sidebar: FC<Props> = (props: Props) => {
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
   const { data: currentProductNavWidth, mutate: mutateProductNavWidth } = useCurrentProductNavWidth();
   const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
   const { data: isResizeDisabled, mutate: mutateSidebarResizeDisabled } = useSidebarResizeDisabled();
 
-  console.log('Sidebar Component has rendered: ', isDrawerMode, isDrawerOpened);
-
   /**
    * hack and override UIController.storeState
    *
@@ -327,6 +325,6 @@ const Sidebar: FC<Props> = memo((props: Props) => {
     </>
   );
 
-});
+};
 
 export default Sidebar;

packages/app/src/stores/ui.tsx

@@ -81,30 +81,27 @@ export const useIsDeviceSmallerThanMd = (): SWRResponse<boolean|null, Error> =>
 export const usePreferDrawerModeByUser = (isPrefered?: boolean): SWRResponse<boolean, Error> => {
   const key = isServer ? null : 'preferDrawerModeByUser';
 
-  const initialData = false;
+  const { localStorage } = window;
+  const initialData = localStorage?.preferDrawerModeByUser === 'true';
   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;
+  const { localStorage } = window;
+  const initialData = localStorage?.preferDrawerModeOnEditByUser == null || localStorage?.preferDrawerModeOnEditByUser === 'true';
   return useStaticSWR(key, isPrefered || null, { fallbackData: initialData, use: [sessionStorageMiddleware] });
 };
 
 export const useDrawerMode = (): SWRResponse<boolean, Error> => {
   const key = isServer ? null : 'isDrawerMode';
-  const { localStorage } = window;
 
   const { data: editorMode } = useEditorMode();
-  const { data: preferDrawerModeByUser } = usePreferDrawerModeByUser(localStorage?.preferDrawerModeByUser === 'true');
-  const { data: preferDrawerModeOnEditByUser } = usePreferDrawerModeOnEditByUser(
-    localStorage.preferDrawerModeOnEditByUser == null || localStorage?.preferDrawerModeOnEditByUser === 'true',
-  );
+  const { data: preferDrawerModeByUser } = usePreferDrawerModeByUser();
+  const { data: preferDrawerModeOnEditByUser } = usePreferDrawerModeOnEditByUser();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
 
-  console.log('useDrawerMode hook called:', editorMode, preferDrawerModeByUser, preferDrawerModeOnEditByUser);
-
   // get preference on view or edit
   const preferDrawerMode = editorMode !== EditorMode.View ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;