create UserInfo.tsx

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

@@ -18,7 +18,6 @@ import PageListIcon from '../Icons/PageListIcon';
 import { Page } from '../Page';
 // import PageEditorByHackmd from '../PageEditorByHackmd';
 import TableOfContents from '../TableOfContents';
-import UserInfo from '../User/UserInfo';
 
 
 import styles from './DisplaySwitcher.module.scss';
@@ -34,6 +33,7 @@ const EditorNavbarBottom = dynamic(() => import('../PageEditor/EditorNavbarBotto
 const HashChanged = dynamic(() => import('../EventListeneres/HashChanged'), { ssr: false });
 const ContentLinkButtons = dynamic(() => import('../ContentLinkButtons'), { ssr: false });
 const NotFoundPage = dynamic(() => import('../NotFoundPage'), { ssr: false });
+const UserInfo = dynamic(() => import('../User/UserInfo').then(mod => mod.UserInfo), { ssr: false });
 
 const DisplaySwitcher = React.memo((): JSX.Element => {
   const { t } = useTranslation();

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

@@ -1,20 +1,24 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { UserPicture } from '@growi/ui';
 
-const UserInfo = (props) => {
+import { IUserHasId } from '~/interfaces/user';
+
+type UserInfoProps = {
+  pageUser: IUserHasId,
+}
+
+export const UserInfo = (props: UserInfoProps): JSX.Element => {
   const { pageUser } = props;
 
-  // do not display when the user does not exist
-  if (pageUser == null) {
-    return null;
-  }
+  // // do not display when the user does not exist
+  // if (pageUser == null) {
+  //   return <></>;
+  // }
 
   return (
     <div className="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}
@@ -23,19 +27,16 @@ const UserInfo = (props) => {
           <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 : '*****'}
+            { pageUser.isEmailPublished
+              ? pageUser.email
+              : '*****'
+            }
           </span>
-          {pageUser.introduction && <span className="user-page-introduction">{pageUser.introduction}</span>}
+          { pageUser.introduction && (
+            <span className="user-page-introduction">{pageUser.introduction}</span>
+          ) }
         </div>
       </div>
-
     </div>
   );
 };
-
-
-UserInfo.propTypes = {
-  pageUser: PropTypes.object,
-};
-
-export default UserInfo;

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

@@ -62,7 +62,7 @@ import {
   useIsAclEnabled, useIsUserPage, useIsNotCreatable,
   useCsrfToken, useIsSearchScopeChildrenAsDefault, useCurrentPageId, useCurrentPathname,
   useIsSlackConfigured, useRendererConfig, useEditingMarkdown,
-  useEditorConfig, useIsAllReplyShown, useIsUploadableFile, useIsUploadableImage,
+  useEditorConfig, useIsAllReplyShown, useIsUploadableFile, useIsUploadableImage, usePageUser
 } from '../stores/context';
 
 import {
@@ -252,6 +252,8 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   const { data: grantData } = useSWRxIsGrantNormalized(pageId);
   const { mutate: mutateSelectedGrant } = useSelectedGrant();
 
+  usePageUser(pageWithMeta?.data.creator);
+
   // sync grant data
   useEffect(() => {
     mutateSelectedGrant(grantData?.grantData.currentPageGrant);