Merge branch 'support/create-UsersHomePageFooter-integrate' of https://github.com/weseek/growi into support/create-UsersHomePageFooter-integrate

packages/app/src/components/Admin/UserGroupDetail/UserGroupPageList.tsx

@@ -6,7 +6,7 @@ import { toastError } from '~/client/util/apiNotification';
 import { apiv3Get } from '~/client/util/apiv3-client';
 import { IPageHasId } from '~/interfaces/page';
 
-import PageListItemS from '../../PageList/PageListItemS';
+import { PageListItemS } from '../../PageList/PageListItemS';
 import PaginationWrapper from '../../PaginationWrapper';
 
 const pagingLimit = 10;

packages/app/src/components/ContentLinkButtons.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
+import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 import { usePageUser } from '~/stores/context';
 
-import { RecentlyCreatedIcon } from './Icons/RecentlyCreatedIcon';
 
 const WIKI_HEADER_LINK = 120;
 

packages/app/src/components/PageList/BookmarkList.jsx → packages/app/src/components/PageList/BookmarkList.tsx

@@ -1,27 +1,27 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
 
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3Get } from '~/client/util/apiv3-client';
+import { MyBookmarkList } from '~/interfaces/bookmark-info';
 import loggerFactory from '~/utils/logger';
 
 import PaginationWrapper from '../PaginationWrapper';
 
-
-import PageListItemS from './PageListItemS';
-
+import { PageListItemS } from './PageListItemS';
 
 const logger = loggerFactory('growi:BookmarkList');
 
-const BookmarkList = (props) => {
-  const { t } = useTranslation();
+type BookmarkListProps = {
+  userId: string
+}
 
+export const BookmarkList = (props: BookmarkListProps): JSX.Element => {
   const { userId } = props;
 
-  const [pages, setPages] = useState([]);
-
+  const { t } = useTranslation();
+  const [pages, setPages] = useState<MyBookmarkList>([]);
   const [activePage, setActivePage] = useState(1);
   const [totalItemsCount, setTotalItemsCount] = useState(0);
   const [pagingLimit, setPagingLimit] = useState(10);
@@ -51,24 +51,18 @@ const BookmarkList = (props) => {
     getMyBookmarkList();
   }, [getMyBookmarkList]);
 
-  /**
-   * generate Elements of Page
-   *
-   * @param {any} pages Array of pages Model Obj
-   *
-   */
-  const generatePageList = pages.map(page => (
-    <li key={`my-bookmarks:${page._id}`} className="mt-4">
-      <PageListItemS page={page.page} />
-    </li>
-  ));
-
   return (
     <div className="bookmarks-list-container">
       {pages.length === 0 ? t('No bookmarks yet') : (
         <>
           <ul className="page-list-ul page-list-ul-flat mb-3">
-            {generatePageList}
+
+            {pages.map(page => (
+              <li key={`my-bookmarks:${page._id}`} className="mt-4">
+                <PageListItemS page={page.page} />
+              </li>
+            ))}
+
           </ul>
           <PaginationWrapper
             activePage={activePage}
@@ -82,11 +76,4 @@ const BookmarkList = (props) => {
       )}
     </div>
   );
-
 };
-
-BookmarkList.propTypes = {
-  userId: PropTypes.string.isRequired,
-};
-
-export default BookmarkList;

packages/app/src/components/PageList/PageListItemS.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { UserPicture, PageListMeta, PagePathLabel } from '@growi/ui';
-
-
-export default class PageListItemS extends React.Component {
-
-  render() {
-    const {
-      page, noLink,
-    } = this.props;
-
-    let pagePathElem = <PagePathLabel path={page.path} additionalClassNames={['mx-1']} />;
-    if (!noLink) {
-      pagePathElem = <a className="text-break" href={page.path}>{pagePathElem}</a>;
-    }
-
-    return (
-      <>
-        <UserPicture user={page.lastUpdateUser} noLink={noLink} />
-        {pagePathElem}
-        <span className="ml-2">
-          <PageListMeta page={page} />
-        </span>
-      </>
-    );
-  }
-
-}
-
-PageListItemS.propTypes = {
-  page: PropTypes.object.isRequired,
-  noLink: PropTypes.bool,
-};
-
-PageListItemS.defaultProps = {
-  noLink: false,
-};

packages/app/src/components/PageList/PageListItemS.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { UserPicture, PageListMeta, PagePathLabel } from '@growi/ui';
+
+import { IPageHasId } from '~/interfaces/page';
+
+
+type PageListItemSProps = {
+  page: IPageHasId,
+  noLink?: boolean,
+}
+
+export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
+
+  const { page, noLink = false } = props;
+
+  let pagePathElement = <PagePathLabel path={page.path} additionalClassNames={['mx-1']} />;
+  if (!noLink) {
+    pagePathElement = <a className="text-break" href={page.path}>{pagePathElement}</a>;
+  }
+
+  return (
+    <>
+      <UserPicture user={page.lastUpdateUser} noLink={noLink} />
+      {pagePathElement}
+      <span className="ml-2">
+        <PageListMeta page={page} />
+      </span>
+    </>
+  );
+
+};

packages/app/src/components/RecentCreated/RecentCreated.tsx

@@ -5,7 +5,7 @@ import { apiv3Get } from '~/client/util/apiv3-client';
 import { IPageHasId } from '~/interfaces/page';
 import loggerFactory from '~/utils/logger';
 
-import PageListItemS from '../PageList/PageListItemS';
+import { PageListItemS } from '../PageList/PageListItemS';
 import PaginationWrapper from '../PaginationWrapper';
 
 const logger = loggerFactory('growi:RecentCreated');

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

@@ -1,3 +1,5 @@
+@use '~/styles/molecules/page_list';
+
 .user-page-footer :global {
   .grw-user-page-list-m {
     svg {

packages/app/src/components/UsersHomePageFooter.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
-import BookmarkList from '~/components/PageList/BookmarkList';
+import { BookmarkList } from '~/components/PageList/BookmarkList';
 import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
 import styles from '~/components/UsersHomePageFooter.module.scss';
 
@@ -22,7 +22,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           <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">
+        <div id="user-bookmark-list" className={`page-list ${styles['page-list']}`}>
           <BookmarkList userId={creatorId} />
         </div>
       </div>
@@ -31,11 +31,10 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           <i id="recent-created-icon" className="mr-1"><RecentlyCreatedIcon /></i>
           {t('footer.recently_created')}
         </h2>
-        <div id="user-created-list" className="page-list">
+        <div id="user-created-list" className={`page-list ${styles['page-list']}`}>
           <RecentCreated userId={creatorId} />
         </div>
       </div>
     </div>
   );
-
 };

packages/app/src/interfaces/bookmark-info.ts

@@ -1,3 +1,6 @@
+import { Ref } from '@growi/core';
+
+import { IPageHasId } from '~/interfaces/page';
 import { IUser } from '~/interfaces/user';
 
 export type IBookmarkInfo = {
@@ -5,3 +8,12 @@ export type IBookmarkInfo = {
   isBookmarked: boolean,
   bookmarkedUsers: IUser[]
 };
+
+type BookmarkedPage = {
+  _id: string,
+  page: IPageHasId,
+  user: Ref<IUser>,
+  createdAt: Date,
+}
+
+export type MyBookmarkList = BookmarkedPage[]

packages/app/src/pages/[[...path]].page.module.scss

@@ -1 +0,0 @@
-@use '~/styles/molecules/page_list';

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

@@ -329,11 +329,10 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
             </div>
           </div>
           <footer className="footer d-edit-none">
-            {/* TODO: Enable page_list.html */}
             { !props.isIdenticalPathPage && (<Comments pageId={pageId} />) }
             { (pageWithMeta != null && isUsersHomePage(pageWithMeta.data.path)) && (
               <UsersHomePageFooter creatorId={pageWithMeta.data.creator._id}/>
-            )}
+            ) }
             <PageContentFooter />
           </footer>