redirect comment page to app

Author: mutoo

app/containers/App/index.js

@@ -13,6 +13,7 @@ import { hot } from 'react-hot-loader/root';
 import { Switch, Route, Redirect, useLocation } from 'react-router-dom';
 import CritterpediaPage from 'pages/Critterpedia/loadable';
 import NotFoundPage from 'pages/404';
+import DisqusRedirect from 'pages/DisqusRedirect';
 import { useInjectReducer } from 'redux-injectors';
 import { CacheProvider } from '@emotion/core';
 import createCache from '@emotion/cache';
@@ -57,6 +58,7 @@ const App = () => {
           path={`/:mode(${MODE_COLLECTION}|${MODE_DISCOVERY}|${MODE_ALL})/:category(${CATEGORY_FISH}|${CATEGORY_INSECTS}|${CATEGORY_SEA})`}
           component={CritterpediaPage}
         />
+        <Route path={`/comment-:commentId(\\d+)`} component={DisqusRedirect} />
         <Route component={NotFoundPage} />
       </Switch>
       {/* the global modals */}

app/pages/DisqusRedirect/index.js

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { waitAndScrollByElement } from './utils';
+
+/**
+ * Redirect to disqus comment when it's ready /comment-5621046783
+ */
+const DisqusRedirect = () => {
+  // TODO: redirect to comment id
+  // const { commentId } = useParams();
+  const history = useHistory();
+  useEffect(() => {
+    history.push('/');
+    return () => {
+      waitAndScrollByElement('#disqus_thread').catch(() => {});
+    };
+  }, []);
+
+  return <></>;
+};
+
+DisqusRedirect.propTypes = {};
+
+export default DisqusRedirect;

app/pages/DisqusRedirect/utils.js

@@ -0,0 +1,17 @@
+export const waitAndScrollByElement = (selector, interval = 1000, retry = 10) =>
+  new Promise((resolve, reject) => {
+    let remainingRetry = retry;
+    const waitingForElement = () => {
+      remainingRetry -= 1;
+      const element = document.querySelector(selector);
+      if (element) {
+        element.scrollIntoView();
+        resolve(element);
+      } else if (remainingRetry > 0) {
+        setTimeout(waitingForElement, interval);
+      } else {
+        reject(new Error('element not found'));
+      }
+    };
+    waitingForElement();
+  });