create UsersHomePageFooter

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -0,0 +1,14 @@
+.user-page-footer :global {
+  .grw-user-page-list-m {
+    svg {
+      width: 35px;
+      height: 35px;
+      margin-bottom: 6px;
+    }
+  }
+
+  .page-list-container {
+    font-size: 15px;
+    line-height: 1.6em;
+  }
+}

packages/app/src/components/UsersHomePageFooter.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+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';
+
+type UsersHomePageFooterProps = {
+  creatorId: string,
+}
+
+export const UsersHomePageFooter = (props: UsersHomePageFooterProps) => {
+
+  const { creatorId } = props;
+
+  // TODO: Check CSS module
+  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>
+          Bookmarks
+        </h2>
+        <div id="user-bookmark-list" className="page-list">
+          <div className="page-list-container">
+            {/* <BookmarkList userId={creatorId} /> */}
+          </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={creatorId} /> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+};

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

@@ -21,6 +21,7 @@ import { Comments } from '~/components/Comments';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
 import { PageContentFooter } from '~/components/PageContentFooter';
+import { UsersHomePageFooter } from '~/components/UsersHomePageFooter';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 // import { renderScriptTagByName, renderHighlightJsStyleTag } from '~/service/cdn-resources-loader';
 // import { useIndentSize } from '~/stores/editor';
@@ -335,37 +336,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
           {/* { !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">
-                  {/* TODO: No need page-list-container class ? */}
-                  <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">
-                  {/* TODO: No need page-list-container class ? */}
-                  <div className="page-list-container">
-                    {/* <RecentCreated userId={pageContainer.state.creator._id} /> */}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
+          { isUsersHomePage(props.currentPathname) && (<UsersHomePageFooter creatorId={}/>) }
           <PageContentFooter />
         </footer>
 

packages/app/src/styles/_user.scss

@@ -49,13 +49,3 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
     }
   }
 }
-
-.user-page-footer {
-  .grw-user-page-list-m {
-    svg {
-      width: 35px;
-      height: 35px;
-      margin-bottom: 6px;
-    }
-  }
-}