update UserInfo

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

@@ -68,7 +68,7 @@ const DisplaySwitcher = React.memo((): JSX.Element => {
           <div className="d-flex flex-column flex-lg-row">
 
             <div className="flex-grow-1 flex-basis-0 mw-0">
-              { isUserPage && <UserInfo pageUser={pageUser} />}
+              { isUserPage && pageUser != null && <UserInfo pageUser={pageUser} />}
               { !isNotFound && <Page /> }
               { isNotFound && <NotFoundPage /> }
             </div>

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

@@ -14,26 +14,33 @@ export const UserInfo = (props: UserInfoProps): JSX.Element => {
   const { pageUser } = props;
 
   return (
-    <div className={`${styles['grw-users-info']} d-flex align-items-center d-edit-none mb-5 pb-3 border-bottom`}>
-      <UserPicture user={pageUser} />
-      <div className="users-meta">
-        <h1 className="user-page-name">
-          {pageUser.name}
-        </h1>
-        <div className="user-page-meta mt-3 mb-0">
-          <span className="user-page-username mr-4"><i className="icon-user mr-1"></i>{pageUser.username}</span>
-          <span className="user-page-email mr-2">
-            <i className="icon-envelope mr-1"></i>
-            { pageUser.isEmailPublished
-              ? pageUser.email
-              : '*****'
-            }
-          </span>
-          { pageUser.introduction && (
-            <span className="user-page-introduction">{pageUser.introduction}</span>
-          ) }
+    <>
+      { (pageUser.name === '') ? (
+        <i>This User ID was deleted.</i>
+      ) : (
+        <div className={`${styles['grw-users-info']} d-flex align-items-center d-edit-none mb-5 pb-3 border-bottom`}>
+          <UserPicture user={pageUser} />
+          <div className="users-meta">
+            <h1 className="user-page-name">
+              {pageUser.name}
+            </h1>
+            <div className="user-page-meta mt-3 mb-0">
+              <span className="user-page-username mr-4"><i className="icon-user mr-1"></i>{pageUser.username}</span>
+              <span className="user-page-email mr-2">
+                <i className="icon-envelope mr-1"></i>
+                { pageUser.isEmailPublished
+                  ? pageUser.email
+                  : '*****'
+                }
+              </span>
+              { pageUser.introduction && (
+                <span className="user-page-introduction">{pageUser.introduction}</span>
+              ) }
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
+
 };

packages/app/src/stores/context.tsx

@@ -11,7 +11,7 @@ import { GrowiThemes } from '~/interfaces/theme';
 import InterceptorManager from '~/services/interceptor-manager';
 
 import { TargetAndAncestors } from '../interfaces/page-listing-results';
-import { IUser } from '../interfaces/user';
+import { IUser, IUserHasId } from '../interfaces/user';
 
 import { useStaticSWR } from './use-static-swr';
 
@@ -99,8 +99,8 @@ export const useIsNotFound = (initialData?: boolean): SWRResponse<boolean, Error
   return useStaticSWR<boolean, Error>('isNotFound', initialData, { fallbackData: false });
 };
 
-export const usePageUser = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
-  return useStaticSWR<Nullable<any>, Error>('pageUser', initialData);
+export const usePageUser = (initialData?: IUserHasId): SWRResponse<IUserHasId, Error> => {
+  return useStaticSWR<IUserHasId, Error>('pageUser', initialData);
 };
 
 export const useHasChildren = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {

packages/core/src/utils/page-path-utils.ts

@@ -64,7 +64,7 @@ export const isMovablePage = (path: string): boolean => {
  */
 export const isUserPage = (path: string): boolean => {
   // https://regex101.com/r/BSDdRr/1
-  if (path.match(/^\/user(\/.*)?$/)) {
+  if (path.match(/^\/user\/.*?$/)) {
     return true;
   }