Merge pull request #6625 from weseek/fix/UserPage-delete-deleted-user-info

fix: UserPage delete deleted user info

packages/app/src/styles/_toc.scss → packages/app/src/components/ContentLinkButtons.module.scss

@@ -1,4 +1,4 @@
-.grw-icon-container-recently-created {
+.grw-icon-container-recently-created :global {
   svg {
     width: 14px;
     height: 14px;

packages/app/src/components/ContentLinkButtons.tsx

@@ -1,57 +1,62 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 
 import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 import { usePageUser } from '~/stores/context';
 
+import styles from './ContentLinkButtons.module.scss';
 
 const WIKI_HEADER_LINK = 120;
 
+const BookMarkLinkButton = React.memo(() => {
 
-const ContentLinkButtons = (): JSX.Element => {
+  const BookMarkLinkButtonClickHandler = useCallback(() => {
+    const getBookMarkListHeaderDom = document.getElementById('bookmarks-list');
+    if (getBookMarkListHeaderDom == null) { return }
+    smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK);
+  }, []);
+
+  return (
+    <button
+      type="button"
+      className="btn btn-outline-secondary btn-sm px-2"
+      onClick={BookMarkLinkButtonClickHandler}
+    >
+      <i className="fa fa-fw fa-bookmark-o"></i>
+      <span>Bookmarks</span>
+    </button>
+  );
+});
+
+BookMarkLinkButton.displayName = 'BookMarkLinkButton';
+
+const RecentlyCreatedLinkButton = React.memo(() => {
+
+  const RecentlyCreatedListButtonClickHandler = useCallback(() => {
+    const getRecentlyCreatedListHeaderDom = document.getElementById('recently-created-list');
+    if (getRecentlyCreatedListHeaderDom == null) { return }
+    smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK);
+  }, []);
+
+  return (
+    <button
+      type="button"
+      className="btn btn-outline-secondary btn-sm px-3"
+      onClick={RecentlyCreatedListButtonClickHandler}
+    >
+      <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created mr-2`}><RecentlyCreatedIcon /></i>
+      <span>Recently Created</span>
+    </button>
+  );
+});
+
+RecentlyCreatedLinkButton.displayName = 'RecentlyCreatedLinkButton';
+
+export const ContentLinkButtons = (): JSX.Element => {
 
   const { data: pageUser } = usePageUser();
 
-  // get element for smoothScroll
-  const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
-  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
-
-
-  const BookMarkLinkButton = useCallback((): JSX.Element => {
-    if (getBookMarkListHeaderDom == null) {
-      return <></>;
-    }
-
-    return (
-      <button
-        type="button"
-        className="btn btn-outline-secondary btn-sm px-2"
-        onClick={() => smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
-      >
-        <i className="fa fa-fw fa-bookmark-o"></i>
-        <span>Bookmarks</span>
-      </button>
-    );
-  }, [getBookMarkListHeaderDom]);
-
-  const RecentlyCreatedLinkButton = useCallback(() => {
-    if (getRecentlyCreatedListHeaderDom == null) {
-      return <></>;
-    }
-
-    return (
-      <button
-        type="button"
-        className="btn btn-outline-secondary btn-sm px-3"
-        onClick={() => smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
-      >
-        <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
-        <span>Recently Created</span>
-      </button>
-    );
-  }, [getRecentlyCreatedListHeaderDom]);
-
-  if (pageUser == null) {
+  if (pageUser == null || pageUser.status === 4) {
     return <></>;
   }
 
@@ -63,5 +68,3 @@ const ContentLinkButtons = (): JSX.Element => {
   );
 
 };
-
-export default ContentLinkButtons;

packages/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -86,7 +86,7 @@ export const GrowiSubNavigation = (props: GrowiSubNavigationProps): JSX.Element
           <PagePathNav pageId={pageId} pagePath={path} isSingleLineMode={isEditorMode} isCompactMode={isCompactMode} />
         </div>
       </div>
-      {/* Right side. isNotFound for avoid flicker when called ForbiddenPage.tsx */}
+      {/* Right side. */}
       <div className="d-flex">
         <Controls />
         {/* Page Authors */}

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -6,7 +6,7 @@ import dynamic from 'next/dynamic';
 
 // import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 import {
-  useCurrentPagePath, useIsSharedUser, useIsEditable, usePageUser, useShareLinkId, useIsNotFound,
+  useCurrentPagePath, useIsSharedUser, useIsEditable, useShareLinkId, useIsNotFound,
 } from '~/stores/context';
 import { useDescendantsPageListModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
@@ -17,22 +17,19 @@ import CustomTabContent from '../CustomNavigation/CustomTabContent';
 import PageListIcon from '../Icons/PageListIcon';
 import { Page } from '../Page';
 import TableOfContents from '../TableOfContents';
-import { UserInfoProps } from '../User/UserInfo';
-
 
 import styles from './DisplaySwitcher.module.scss';
 
-
-const { isTopPage, isUsersTopPage } = pagePathUtils;
+const { isTopPage, isUsersHomePage } = pagePathUtils;
 
 
 const PageEditor = dynamic(() => import('../PageEditor'), { ssr: false });
 const PageEditorByHackmd = dynamic(() => import('../PageEditorByHackmd').then(mod => mod.PageEditorByHackmd), { ssr: false });
 const EditorNavbarBottom = dynamic(() => import('../PageEditor/EditorNavbarBottom'), { ssr: false });
 const HashChanged = dynamic(() => import('../EventListeneres/HashChanged'), { ssr: false });
-const ContentLinkButtons = dynamic(() => import('../ContentLinkButtons'), { ssr: false });
+const ContentLinkButtons = dynamic(() => import('../ContentLinkButtons').then(mod => mod.ContentLinkButtons), { ssr: false });
 const NotFoundPage = dynamic(() => import('../NotFoundPage'), { ssr: false });
-const UserInfo = dynamic<UserInfoProps>(() => import('../User/UserInfo').then(mod => mod.UserInfo), { ssr: false });
+const UserInfo = dynamic(() => import('../User/UserInfo').then(mod => mod.UserInfo), { ssr: false });
 
 
 const PageView = React.memo((): JSX.Element => {
@@ -41,19 +38,18 @@ const PageView = React.memo((): JSX.Element => {
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: isSharedUser } = useIsSharedUser();
   const { data: shareLinkId } = useShareLinkId();
-  const { data: pageUser } = usePageUser();
   const { data: isNotFound } = useIsNotFound();
   const { data: currentPage } = useSWRxCurrentPage(shareLinkId ?? undefined);
   const { open: openDescendantPageListModal } = useDescendantsPageListModal();
 
   const isTopPagePath = isTopPage(currentPagePath ?? '');
-  const isUsersTopPagePath = isUsersTopPage(currentPagePath ?? '');
+  const isUsersHomePagePath = isUsersHomePage(currentPagePath ?? '');
 
   return (
     <div className="d-flex flex-column flex-lg-row">
 
       <div className="flex-grow-1 flex-basis-0 mw-0">
-        { pageUser != null && isUsersTopPagePath && <UserInfo pageUser={pageUser} />}
+        { isUsersHomePagePath && <UserInfo /> }
         { !isNotFound && <Page /> }
         { isNotFound && <NotFoundPage /> }
       </div>
@@ -98,7 +94,7 @@ const PageView = React.memo((): JSX.Element => {
 
             <div className="d-none d-lg-block">
               <TableOfContents />
-              <ContentLinkButtons />
+              { isUsersHomePagePath && <ContentLinkButtons /> }
             </div>
 
           </div>

packages/app/src/components/User/UserInfo.tsx

@@ -2,20 +2,15 @@ import React from 'react';
 
 import { UserPicture } from '@growi/ui';
 
-import { IUserHasId } from '~/interfaces/user';
+import { usePageUser } from '~/stores/context';
 
 import styles from './UserInfo.module.scss';
 
-export type UserInfoProps = {
-  pageUser: IUserHasId,
-}
+export const UserInfo = (): JSX.Element => {
 
-export const UserInfo = (props: UserInfoProps): JSX.Element => {
+  const { data: pageUser } = usePageUser();
 
-  const { pageUser } = props;
-
-  // Do not display when the user does not exist
-  if (pageUser == null) {
+  if (pageUser == null || pageUser.status === 4) {
     return <></>;
   }
 

packages/core/src/interfaces/user.ts

@@ -20,6 +20,7 @@ export type IUser = {
   createdAt: Date,
   lastLoginAt?: Date,
   introduction: string,
+  status: number,
 }
 
 export type IUserGroupRelation = {