Merge pull request #6193 from weseek/feat/next-sidebar-skeleton

feat: SSR SidebarNav

packages/app/src/components/Sidebar.tsx

@@ -15,7 +15,7 @@ import {
 import DrawerToggler from './Navbar/DrawerToggler';
 import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 import SidebarContents from './Sidebar/SidebarContents';
-import SidebarNav from './Sidebar/SidebarNav';
+import { SidebarNav } from './Sidebar/SidebarNav';
 import { StickyStretchableScroller } from './StickyStretchableScroller';
 
 import styles from './Sidebar.module.scss';
@@ -25,34 +25,34 @@ const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;
 const sidebarFixedWidthInDrawerMode = 320;
 
+const GlobalNavigation = () => {
+  const { data: isDrawerMode } = useDrawerMode();
+  const { data: currentContents } = useCurrentSidebarContents();
+  const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
 
-// const GlobalNavigation = () => {
-//   const { data: isDrawerMode } = useDrawerMode();
-//   const { data: currentContents } = useCurrentSidebarContents();
-//   const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
+  const { scheduleToPut } = useUserUISettings();
 
-//   const { scheduleToPut } = useUserUISettings();
+  const itemSelectedHandler = useCallback((selectedContents) => {
+    if (isDrawerMode) {
+      return;
+    }
 
-//   const itemSelectedHandler = useCallback((selectedContents) => {
-//     if (isDrawerMode) {
-//       return;
-//     }
+    let newValue = false;
 
-//     let newValue = false;
+    // already selected
+    if (currentContents === selectedContents) {
+      // toggle collapsed
+      newValue = !isCollapsed;
+    }
 
-//     // already selected
-//     if (currentContents === selectedContents) {
-//       // toggle collapsed
-//       newValue = !isCollapsed;
-//     }
+    mutateSidebarCollapsed(newValue, false);
+    scheduleToPut({ isSidebarCollapsed: newValue });
 
-//     mutateSidebarCollapsed(newValue, false);
-//     scheduleToPut({ isSidebarCollapsed: newValue });
+  }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed, scheduleToPut]);
 
-//   }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed, scheduleToPut]);
+  return <SidebarNav onItemSelected={itemSelectedHandler} />;
 
-//   return <SidebarNav onItemSelected={itemSelectedHandler} />;
-// };
+};
 
 // const SidebarContentsWrapper = () => {
 //   const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
@@ -302,7 +302,7 @@ const Sidebar = (): JSX.Element => {
             >
               <div className="grw-navigation-wrap">
                 <div className="grw-global-navigation">
-                  {/* <GlobalNavigation></GlobalNavigation> */}
+                  <GlobalNavigation></GlobalNavigation>
                 </div>
                 <div
                   ref={resizableContainer}

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

@@ -72,7 +72,7 @@ type Props = {
   onItemSelected: (contents: SidebarContentsType) => void,
 }
 
-const SidebarNav: FC<Props> = (props: Props) => {
+export const SidebarNav: FC<Props> = (props: Props) => {
 
   const { data: currentUser } = useCurrentUser();
 
@@ -103,5 +103,3 @@ const SidebarNav: FC<Props> = (props: Props) => {
   );
 
 };
-
-export default SidebarNav;

packages/app/src/pages/[[...path]].page.tsx

@@ -17,9 +17,14 @@ import { CrowiRequest } from '~/interfaces/crowi-request';
 // import { useRendererSettings } from '~/stores/renderer';
 // import { EditorMode, useEditorMode, useIsMobile } from '~/stores/ui';
 import { IPageWithMeta } from '~/interfaces/page';
+import { ISidebarConfig } from '~/interfaces/sidebar-config';
 import { PageModel } from '~/server/models/page';
 import { serializeUserSecurely } from '~/server/models/serializers/user-serializer';
+import UserUISettings, { UserUISettingsDocument } from '~/server/models/user-ui-settings';
 import { useSWRxCurrentPage, useSWRxPageInfo } from '~/stores/page';
+import {
+  usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed, useCurrentSidebarContents, useCurrentProductNavWidth,
+} from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
 // import { isUserPage, isTrashPage, isSharedPage } from '~/utils/path-utils';
@@ -81,6 +86,11 @@ type Props = CommonProps & {
   // isEnabledLinebreaksInComments: boolean,
   // adminPreferredIndentSize: number,
   // isIndentSizeForced: boolean,
+
+  // UI
+  userUISettings: UserUISettingsDocument | null
+  // Sidebar
+  sidebarConfig: ISidebarConfig,
 };
 
 const GrowiPage: NextPage<Props> = (props: Props) => {
@@ -96,6 +106,13 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   useConfidential(props.confidential);
   useCsrfToken(props.csrfToken);
 
+  // UserUISettings
+  usePreferDrawerModeByUser(props.userUISettings?.preferDrawerModeByUser ?? props.sidebarConfig.isSidebarDrawerMode);
+  usePreferDrawerModeOnEditByUser(props.userUISettings?.preferDrawerModeOnEditByUser);
+  useSidebarCollapsed(props.userUISettings?.isSidebarCollapsed ?? props.sidebarConfig.isSidebarClosedAtDockMode);
+  useCurrentSidebarContents(props.userUISettings?.currentSidebarContents);
+  useCurrentProductNavWidth(props.userUISettings?.currentProductNavWidth);
+
   // page
   useCurrentPagePath(props.currentPathname);
   // useOwnerOfCurrentPage(props.pageUser != null ? JSON.parse(props.pageUser) : null);
@@ -274,6 +291,7 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
   const { user } = req;
 
   const result = await getServerSideCommonProps(context);
+  const userUISettings = user == null ? null : await UserUISettings.findOne({ user: user._id }).exec();
 
   // check for presence
   // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
@@ -313,6 +331,12 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
   // props.adminPreferredIndentSize = configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize');
   // props.isIndentSizeForced = configManager.getConfig('markdown', 'markdown:isIndentSizeForced');
 
+  // UI
+  props.userUISettings = JSON.parse(JSON.stringify(userUISettings));
+  props.sidebarConfig = {
+    isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
+    isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
+  };
   return {
     props,
   };