|
|
@@ -0,0 +1,74 @@
|
|
|
+import React, { useState, useCallback, useEffect } from 'react';
|
|
|
+
|
|
|
+import { toastError } from '~/client/util/apiNotification';
|
|
|
+import { apiv3Get } from '~/client/util/apiv3-client';
|
|
|
+import { IPageHasId } from '~/interfaces/page';
|
|
|
+import loggerFactory from '~/utils/logger';
|
|
|
+
|
|
|
+import PageListItemS from '../PageList/PageListItemS';
|
|
|
+import PaginationWrapper from '../PaginationWrapper';
|
|
|
+
|
|
|
+const logger = loggerFactory('growi:RecentCreated');
|
|
|
+
|
|
|
+type RecentCreatedProps = {
|
|
|
+ userId: string,
|
|
|
+}
|
|
|
+
|
|
|
+export const RecentCreated = (props: RecentCreatedProps): JSX.Element => {
|
|
|
+
|
|
|
+ const { userId } = props;
|
|
|
+
|
|
|
+ const [pages, setPages] = useState<IPageHasId[]>([]);
|
|
|
+ const [activePage, setActivePage] = useState(1);
|
|
|
+ const [totalPages, setTotalPages] = useState(0);
|
|
|
+ const [pagingLimit, setPagingLimit] = useState(10);
|
|
|
+
|
|
|
+ const getMyRecentCreatedList = useCallback(async(selectedPage) => {
|
|
|
+ const page = selectedPage;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await apiv3Get(`/users/${userId}/recent`, { page });
|
|
|
+ const { totalCount, pages, limit } = res.data;
|
|
|
+
|
|
|
+ setPages(pages);
|
|
|
+ setActivePage(selectedPage);
|
|
|
+ setTotalPages(totalCount);
|
|
|
+ setPagingLimit(limit);
|
|
|
+ }
|
|
|
+ catch (error) {
|
|
|
+ logger.error('failed to fetch data', error);
|
|
|
+ toastError(error, 'Error occurred in recent created page list');
|
|
|
+ }
|
|
|
+ }, [userId]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getMyRecentCreatedList(1);
|
|
|
+ }, [getMyRecentCreatedList]);
|
|
|
+
|
|
|
+ const handlePage = useCallback(async(selectedPage) => {
|
|
|
+ await getMyRecentCreatedList(selectedPage);
|
|
|
+ }, [getMyRecentCreatedList]);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="page-list-container-create">
|
|
|
+ <ul className="page-list-ul page-list-ul-flat mb-3">
|
|
|
+
|
|
|
+ {pages.map(page => (
|
|
|
+ <li key={`recent-created:list-view:${page._id}`} className="mt-4">
|
|
|
+ <PageListItemS page={page} />
|
|
|
+ </li>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ <PaginationWrapper
|
|
|
+ activePage={activePage}
|
|
|
+ changePage={handlePage}
|
|
|
+ totalItemsCount={totalPages}
|
|
|
+ pagingLimit={pagingLimit}
|
|
|
+ align="center"
|
|
|
+ size="sm"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+
|
|
|
+};
|