add suspence

src/client/js/components/PageHistory.jsx

@@ -1,52 +1,75 @@
-import React from 'react';
+import React, { Suspense, useState } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
 import { withTranslation } from 'react-i18next';
 import { withUnstatedContainers } from './UnstatedUtils';
+import { toastError } from '../util/apiNotification';
 
 import PageRevisionList from './PageHistory/PageRevisionList';
 import AppContainer from '../services/AppContainer';
 
+
 const logger = loggerFactory('growi:PageHistory');
-class PageHistory extends React.Component {
 
-  constructor(props) {
-    super(props);
 
-    this.state = {
-      isLoaded: false,
-      isLoading: false,
-      errorMessage: null,
-      revisions: [],
-      diffOpened: {},
-    };
+function AppSettingsPage() {
+  return (
+    <Suspense
+      fallback={(
+        <div className="my-5 text-center">
+          <i className="fa fa-lg fa-spinner fa-pulse mx-auto text-muted"></i>
+        </div>
+      )}
+    >
+      <PageHistoryWrapper2 />
+    </Suspense>
+  );
+}
+function PageHistory(props) {
 
-    this.getPreviousRevision = this.getPreviousRevision.bind(this);
-    this.onDiffOpenClicked = this.onDiffOpenClicked.bind(this);
-  }
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [revisions, setRevisions] = useState(null);
+  const [diffOpened, setDiffOpened] = useState(null);
 
-  async componentWillMount() {
-    const { appContainer, pageId } = this.props;
-    const shareLinkId = this.props.shareLinkId || null;
+  function fetchPageRevisionBody(revision) {
+    const { appContainer } = props;
+    const shareLinkId = props.shareLinkId || null;
 
-    if (!pageId) {
+    if (revision.body) {
       return;
     }
 
-    let res;
-    try {
-      this.setState({ isLoading: true });
-      res = await appContainer.apiv3Get('/revisions/list', { pageId, share_link_id: shareLinkId });
-    }
-    catch (err) {
-      logger.error(err);
-      this.setState({ errorMessage: err });
+    appContainer.apiGet('/revisions.get', { page_id: props.pageId, revision_id: revision._id, share_link_id: shareLinkId })
+      .then((res) => {
+        if (res.ok) {
+          this.setState({
+            revisions: this.state.revisions.map((rev) => {
+              // comparing ObjectId
+              // eslint-disable-next-line eqeqeq
+              if (rev._id == res.revision._id) {
+                return res.revision;
+              }
+
+              return rev;
+            }),
+          });
+        }
+      })
+      .catch((err) => {
+
+      });
+  }
+
+  async function retrieveRevisions() {
+    const { appContainer, pageId } = props;
+    const shareLinkId = props.shareLinkId || null;
+
+    if (!pageId) {
       return;
     }
-    finally {
-      this.setState({ isLoading: false });
-    }
+
+    const res = await appContainer.apiv3Get('/revisions/list', { pageId, share_link_id: shareLinkId });
     const rev = res.data.revisions;
     const diffOpened = {};
     const lastId = rev.length - 1;
@@ -65,27 +88,24 @@ class PageHistory extends React.Component {
       }
     });
 
-    this.setState({
-      isLoaded: true,
-      revisions: rev,
-      diffOpened,
-    });
+    setRevisions(rev);
+    setDiffOpened(diffOpened);
 
     // load 0, and last default
     if (rev[0]) {
-      this.fetchPageRevisionBody(rev[0]);
+      fetchPageRevisionBody(rev[0]);
     }
     if (rev[1]) {
-      this.fetchPageRevisionBody(rev[1]);
+      fetchPageRevisionBody(rev[1]);
     }
     if (lastId !== 0 && lastId !== 1 && rev[lastId]) {
-      this.fetchPageRevisionBody(rev[lastId]);
+      fetchPageRevisionBody(rev[lastId]);
     }
   }
 
-  getPreviousRevision(currentRevision) {
+  function getPreviousRevision(currentRevision) {
     let cursor = null;
-    for (const revision of this.state.revisions) {
+    for (const revision of revisions) {
       // comparing ObjectId
       // eslint-disable-next-line eqeqeq
       if (cursor && cursor._id == currentRevision._id) {
@@ -99,74 +119,46 @@ class PageHistory extends React.Component {
     return cursor;
   }
 
-  onDiffOpenClicked(revision) {
-    const diffOpened = this.state.diffOpened;
+  function onDiffOpenClicked(revision) {
     const revisionId = revision._id;
 
     diffOpened[revisionId] = !(diffOpened[revisionId]);
-    this.setState({
-      diffOpened,
-    });
+    setDiffOpened(diffOpened);
 
-    this.fetchPageRevisionBody(revision);
-    this.fetchPageRevisionBody(this.getPreviousRevision(revision));
+    fetchPageRevisionBody(revision);
+    fetchPageRevisionBody(getPreviousRevision(revision));
   }
 
-  fetchPageRevisionBody(revision) {
-    const { appContainer } = this.props;
-    const shareLinkId = this.props.shareLinkId || null;
 
-    if (revision.body) {
-      return;
-    }
-
-    appContainer.apiGet('/revisions.get',
-      { page_id: this.props.pageId, revision_id: revision._id, share_link_id: shareLinkId })
-      .then((res) => {
-        if (res.ok) {
-          this.setState({
-            revisions: this.state.revisions.map((rev) => {
-              // comparing ObjectId
-              // eslint-disable-next-line eqeqeq
-              if (rev._id == res.revision._id) {
-                return res.revision;
-              }
-
-              return rev;
-            }),
-          });
-        }
-      })
-      .catch((err) => {
-
-      });
+  if (revisions == null) {
+    throw new Promise(async() => {
+      try {
+        await retrieveRevisions();
+      }
+      catch (err) {
+        toastError(err);
+        logger.error(err);
+        setErrorMessage(err);
+      }
+    });
   }
 
-  render() {
-    return (
-      <div className="mt-4">
-        { this.state.isLoading && (
-          <div className="my-5 text-center">
-            <i className="fa fa-lg fa-spinner fa-pulse mx-auto text-muted"></i>
-          </div>
-        ) }
-        { this.state.errorMessage && (
-          <div className="my-5">
-            <div className="text-danger">{this.state.errorMessage}</div>
-          </div>
-        ) }
-        { this.state.isLoaded && (
-          <PageRevisionList
-            t={this.props.t}
-            revisions={this.state.revisions}
-            diffOpened={this.state.diffOpened}
-            getPreviousRevision={this.getPreviousRevision}
-            onDiffOpenClicked={this.onDiffOpenClicked}
-          />
-        ) }
+  return (
+    <div className="mt-4">
+      {errorMessage && (
+      <div className="my-5">
+        <div className="text-danger">{errorMessage}</div>
       </div>
-    );
-  }
+        ) }
+      <PageRevisionList
+        t={props.t}
+        revisions={revisions}
+        diffOpened={diffOpened}
+        getPreviousRevision={getPreviousRevision}
+        onDiffOpenClicked={onDiffOpenClicked}
+      />
+    </div>
+  );
 
 }
 
@@ -182,4 +174,6 @@ PageHistory.propTypes = {
   pageId: PropTypes.string,
 };
 
-export default withTranslation()(PageHistoryWrapper);
+const PageHistoryWrapper2 = withTranslation()(PageHistoryWrapper);
+
+export default AppSettingsPage;