Change PageTimeline to FC

packages/app/src/components/PageTimeline.jsx

@@ -1,136 +1,86 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
 
-import AppContainer from '~/client/services/AppContainer';
-import PageContainer from '~/client/services/PageContainer';
 import { apiv3Get } from '~/client/util/apiv3-client';
-import { RendererOptions } from '~/services/renderer/renderer';
+import { useCurrentPagePath } from '~/stores/context';
 import { useTimelineOptions } from '~/stores/renderer';
 
 import RevisionLoader from './Page/RevisionLoader';
 import PaginationWrapper from './PaginationWrapper';
-import { withUnstatedContainers } from './UnstatedUtils';
 
 
-class PageTimeline extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activePage: 1,
-      totalPageItems: 0,
-      limit: null,
-
-      // TODO: remove after when timeline is implemented with React and inject data with props
-      pages: this.props.pages,
-    };
-
-    this.handlePage = this.handlePage.bind(this);
-  }
+const PageTimeline = (props) => {
+  const { t } = useTranslation();
+  const [activePage, setActivePage] = useState(1);
+  const [totalPageItems, setTotalPageItems] = useState(0);
+  const [limit, setLimit] = useState(null);
+  const [pages, setPages] = useState(props.pages);
 
+  const { data: path } = useCurrentPagePath();
+  const { data: rendererOptions } = useTimelineOptions();
 
-  async handlePage(selectedPage) {
-    const { appContainer, pageContainer } = this.props;
-    const { path } = pageContainer.state;
+  const handlePage = async(selectedPage) => {
     const page = selectedPage;
-
     const res = await apiv3Get('/pages/list', { path, page });
     const totalPageItems = res.data.totalCount;
     const pages = res.data.pages;
     const pagingLimit = res.data.limit;
-    this.setState({
-      activePage: selectedPage,
-      totalPageItems,
-      pages,
-      limit: pagingLimit,
-    });
-  }
-
-  UNSAFE_componentWillMount() {
-    const { rendererOptions } = this.props;
-    // initialize GrowiRenderer
-    this.rendererOptions = rendererOptions;
-  }
 
-  async componentDidMount() {
-    await this.handlePage(1);
-    this.setState({
-      activePage: 1,
-    });
-  }
+    setActivePage(selectedPage);
+    setTotalPageItems(totalPageItems);
+    setLimit(pagingLimit);
+    setPages(pages);
+  };
 
-  render() {
-    const { t } = this.props;
-    const { pages } = this.state;
+  useEffect(() => {
+    handlePage(1);
+    setActivePage(1);
+  }, []);
 
-    if (pages == null || pages.length === 0) {
-      return (
-        <div className="mt-2">
-          {/* eslint-disable-next-line react/no-danger */}
-          <p>{t('custom_navigation.no_page_list')}</p>
-        </div>
-      );
-    }
+  if (rendererOptions == null) {
+    return <></>;
+  }
 
+  if (pages == null || pages.length === 0) {
     return (
-      <div>
-        { pages.map((page) => {
-          return (
-            <div className="timeline-body" key={`key-${page._id}`}>
-              <div className="card card-timeline">
-                <div className="card-header"><a href={page.path}>{page.path}</a></div>
-                <div className="card-body">
-                  <RevisionLoader
-                    lazy
-                    rendererOptions={this.rendererOptions}
-                    pageId={page._id}
-                    pagePath={page.path}
-                    revisionId={page.revision}
-                  />
-                </div>
-              </div>
-            </div>
-          );
-        }) }
-        <PaginationWrapper
-          activePage={this.state.activePage}
-          changePage={this.handlePage}
-          totalItemsCount={this.state.totalPageItems}
-          pagingLimit={this.state.limit}
-          align="center"
-        />
+      <div className="mt-2">
+        {/* eslint-disable-next-line react/no-danger */}
+        <p>{t('custom_navigation.no_page_list')}</p>
       </div>
     );
-
   }
 
-}
-
-PageTimeline.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  rendererOptions: PropTypes.instanceOf(RendererOptions).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-  pages: PropTypes.arrayOf(PropTypes.object),
-};
-
-const PageTimelineWrapperFC = (props) => {
-  const { t } = useTranslation();
-  const { data: rendererOptions } = useTimelineOptions();
-
-  if (rendererOptions == null) {
-    return <></>;
-  }
+  return (
+    <div>
+      { pages.map((page) => {
+        return (
+          <div className="timeline-body" key={`key-${page._id}`}>
+            <div className="card card-timeline">
+              <div className="card-header"><a href={page.path}>{page.path}</a></div>
+              <div className="card-body">
+                <RevisionLoader
+                  lazy
+                  rendererOptions={rendererOptions}
+                  pageId={page._id}
+                  pagePath={page.path}
+                  revisionId={page.revision}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      }) }
+      <PaginationWrapper
+        activePage={activePage}
+        changePage={handlePage}
+        totalItemsCount={totalPageItems}
+        pagingLimit={limit}
+        align="center"
+      />
+    </div>
+  );
 
-  return <PageTimeline t={t} rendererOptions={rendererOptions} {...props} />;
 };
 
-/**
- * Wrapper component for using unstated
- */
-const PageTimelineWrapper = withUnstatedContainers(PageTimelineWrapperFC, [AppContainer, PageContainer]);
-
-export default PageTimelineWrapper;
+export default PageTimeline;