Merge pull request #6501 from weseek/improv/create-UsersHomePageFooter

imprv: Create UsersHomePageFooter.tsx

packages/app/public/static/locales/en_US/translation.json

@@ -154,7 +154,6 @@
   "add_bookmark": "Add to Bookmarks",
   "remove_bookmark": "Remove from Bookmarks",
   "wide_view": "Wide View",
-  "Recent Created": "Recent Created",
   "Recent Changes": "Recent Changes",
   "Page Tree": "Page Tree",
   "original_path":"Original path",
@@ -864,5 +863,9 @@
   "page_operation":{
     "paths_recovered": "Paths recovered successfully",
     "path_recovery_failed":"Path recovery failed"
+  },
+  "footer": {
+    "bookmarks": "Bookmarks",
+    "recently_created": "Recently Created"
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -172,7 +172,6 @@
   "add_bookmark": "ブックマークに追加",
   "remove_bookmark": "ブックマークから削除",
   "wide_view": "ワイドビュー",
-  "Recent Created": "最新の作成",
   "Recent Changes": "最新の変更",
   "Page Tree": "ページツリー",
   "original_path":"元のパス",
@@ -1136,5 +1135,9 @@
   "page_operation":{
     "paths_recovered": "パスを修復しました",
     "path_recovery_failed":"パスを修復できませんでした"
+  },
+  "footer": {
+    "bookmarks": "ブックマーク",
+    "recently_created": "最近作成したページ"
   }
 }

packages/app/public/static/locales/zh_CN/translation.json

@@ -178,7 +178,6 @@
   "add_bookmark": "添加到书签",
   "remove_bookmark": "从书签中删除",
   "wide_view": "视野开阔",
-	"Recent Created": "最新创建",
   "Recent Changes": "最新修改",
   "Page Tree": "页面树",
   "original_path":"Original path",
@@ -1146,5 +1145,9 @@
   "page_operation":{
     "paths_recovered": "成功恢复了页面路径",
     "path_recovery_failed":"路径恢复失败"
+  },
+  "footer": {
+    "bookmarks": "书签",
+    "recently_created": "最近创建页面"
   }
 }

packages/app/src/components/UsersHomePageFooter.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
+import BookmarkList from '~/components/PageList/BookmarkList';
+import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
+import styles from '~/components/UsersHomePageFooter.module.scss';
+
+export type UsersHomePageFooterProps = {
+  creatorId: string,
+}
+
+export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Element => {
+  const { t } = useTranslation();
+  const { creatorId } = props;
+
+  return (
+    <div className={`container-lg user-page-footer py-5 ${styles['user-page-footer']}`}>
+      <div className="grw-user-page-list-m d-edit-none">
+        <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3">
+          <i style={{ fontSize: '1.3em' }} className="fa fa-fw fa-bookmark-o"></i>
+          {t('footer.bookmarks')}
+        </h2>
+        <div id="user-bookmark-list" className="page-list">
+          <BookmarkList userId={creatorId} />
+        </div>
+      </div>
+      <div className="grw-user-page-list-m mt-5 d-edit-none">
+        <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">
+          <i id="recent-created-icon" className="mr-1"><RecentlyCreatedIcon /></i>
+          {t('footer.recently_created')}
+        </h2>
+        <div id="user-created-list" className="page-list">
+          <RecentCreated userId={creatorId} />
+        </div>
+      </div>
+    </div>
+  );
+
+};

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

@@ -17,11 +17,10 @@ import { useRouter } from 'next/router';
 import superjson from 'superjson';
 
 import { Comments } from '~/components/Comments';
-import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
 import { PageContentFooter } from '~/components/PageContentFooter';
-import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
+import { UsersHomePageFooterProps } from '~/components/UsersHomePageFooter';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 // import { renderScriptTagByName, renderHighlightJsStyleTag } from '~/service/cdn-resources-loader';
 // import { useIndentSize } from '~/stores/editor';
@@ -75,6 +74,8 @@ const NotCreatablePage = dynamic(() => import('../components/NotCreatablePage').
 const ForbiddenPage = dynamic(() => import('../components/ForbiddenPage'), { ssr: false });
 const UnsavedAlertDialog = dynamic(() => import('./UnsavedAlertDialog'), { ssr: false });
 const GrowiSubNavigationSwitcher = dynamic(() => import('../components/Navbar/GrowiSubNavigationSwitcher'), { ssr: false });
+const UsersHomePageFooter = dynamic<UsersHomePageFooterProps>(() => import('../components/UsersHomePageFooter')
+  .then(mod => mod.UsersHomePageFooter), { ssr: false });
 
 const logger = loggerFactory('growi:pages:all');
 
@@ -328,41 +329,11 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
             </div> */}
           </div>
         </div>
-        {/* TODO: Check CSS import */}
         <footer className="footer d-edit-none">
           {/* TODO: Enable page_list.html */}
-          {/* TODO: Enable isIdenticalPathPage or useIdenticalPath */}
-          {/* { !props.isIdenticalPathPage && ( */}
-          <Comments pageId={pageId} />
-          {/* )} */}
-          {/* TODO: Create UsersHomePageFooter conponent */}
-          { !isUsersHomePage(props.currentPathname) && (
-            <div className="container-lg user-page-footer py-5">
-              <div className="grw-user-page-list-m d-edit-none">
-                <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3">
-                  <i style={{ fontSize: '1.3em' }} className="fa fa-fw fa-bookmark-o"></i>
-                  Bookmarks
-                </h2>
-                <div id="user-bookmark-list" className="page-list">
-                  <div className="page-list-container">
-                    {/* <BookmarkList userId={pageContainer.state.creator._id} /> */}
-                  </div>
-                </div>
-              </div>
-              <div className="grw-user-page-list-m mt-5 d-edit-none">
-                <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">
-                  <i id="recent-created-icon" className="mr-1">
-                    <RecentlyCreatedIcon />
-                  </i>
-                  Recently Created
-                </h2>
-                <div id="user-created-list" className="page-list">
-                  <div className="page-list-container">
-                    <RecentCreated userId={pageWithMeta.data.creator._id} />
-                  </div>
-                </div>
-              </div>
-            </div>
+          { !props.isIdenticalPathPage && (<Comments pageId={pageId} />) }
+          { (pageWithMeta != null && isUsersHomePage(pageWithMeta.data.path)) && (
+            <UsersHomePageFooter creatorId={pageWithMeta.data.creator._id}/>
           )}
           <PageContentFooter />
         </footer>