From 5ca84ded5a1500ad3ea8d029b71488e8b3b74181 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 15 Aug 2020 03:55:27 +0300
Subject: feat: ping server before showing content

---
 src/containers/Page/DynoWaiter.tsx | 64 ++++++++++++++++++++++++++++++++++++++
 src/containers/Page/Page.tsx       | 30 ++++++------------
 src/containers/Page/Router.tsx     | 27 ++++++++++++++++
 3 files changed, 100 insertions(+), 21 deletions(-)
 create mode 100644 src/containers/Page/DynoWaiter.tsx
 create mode 100644 src/containers/Page/Router.tsx

(limited to 'src/containers/Page')

diff --git a/src/containers/Page/DynoWaiter.tsx b/src/containers/Page/DynoWaiter.tsx
new file mode 100644
index 0000000..d8460bf
--- /dev/null
+++ b/src/containers/Page/DynoWaiter.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { get } from '../../requests';
+import Loading from '../../components/Loading/Loading';
+
+const DYNO_WAKEUP_TIME = 30;
+
+const messages = [
+  '',
+  'It looks like our server is sleeping.',
+  `We need about ${DYNO_WAKEUP_TIME} seconds to wake it up.`,
+  'Please, stay with us.',
+  'You are doing good.',
+  'Almost done.'
+];
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    textAlign: 'center'
+  },
+  hidden: {
+    visibility: 'hidden',
+    position: 'absolute'
+  }
+}));
+
+const DynoWaiter: React.FC = ({ children }) => {
+  const classes = useStyles();
+  const [isReady, setIsReady] = useState<boolean>(false);
+  const [time, setTime] = useState<number>(0);
+
+  const tick = useCallback((): void => setTime(value => value + 1), [setTime]);
+
+  useEffect(() => {
+    const interval = setInterval(tick, 1000);
+    get('/ping').then(() => {
+      setIsReady(true);
+      clearInterval(interval);
+    });
+    return () => clearInterval(interval);
+  }, [setIsReady, tick]);
+
+  const message = useMemo(() => {
+    const interval = DYNO_WAKEUP_TIME / messages.length;
+    const index = Math.floor(time / interval);
+    const lastIndex = messages.length - 1;
+    return messages[index > lastIndex ? lastIndex : index];
+  }, [time]);
+
+  const tagline = useMemo(() => time > 3 ? 'Waiting for the server' : '', [time]);
+
+  return (
+    <>
+      {!isReady && <Loading tagline={tagline} message={message} />}
+      <div className={isReady ? '' : classes.hidden}>
+        {children}
+      </div>
+    </>
+  );
+};
+
+
+export default DynoWaiter;
+
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 023d86e..475f76d 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -2,30 +2,24 @@ import React, { Suspense, useEffect } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
-import { Switch, Route, useHistory } from 'react-router-dom';
-import Loading from '../../components/Loading/Loading';
+import { useHistory } from 'react-router-dom';
 
-const Profile = React.lazy(() => import('../Profile/Profile'));
-const Feed = React.lazy(() => import('../Feed/Feed'));
-const Login = React.lazy(() => import('../Login/Login'));
-const Registration = React.lazy(() => import('../Registration/Registration'));
-const Home = React.lazy(() => import('../Home/Home'));
-const Notifications = React.lazy(() => import('../Notifications/Notifications'));
-const PollCreation = React.lazy(() => import('../PollCreation/PollCreation'));
+import Router from './Router';
+import DynoWaiter from './DynoWaiter';
+import Loading from '../../components/Loading/Loading';
 
 
 const useStyles = makeStyles(theme => ({
   root: {
     [theme.breakpoints.down('sm')]: {
-      margin: theme.spacing(10, 0, 12, 0)
+      padding: theme.spacing(10, 0, 12, 0)
     },
     [theme.breakpoints.up('md')]: {
-      margin: theme.spacing(15, 5, 8, 5)
+      padding: theme.spacing(15, 5, 8, 5)
     }
   }
 }));
 
-
 const Page: React.FC = () => {
   const classes = useStyles();
   const theme = useTheme();
@@ -49,15 +43,9 @@ const Page: React.FC = () => {
     >
       <div className={classes.root}>
         <Suspense fallback={<Loading />}>
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route exact path="/login" component={Login} />
-            <Route exact path="/registration" component={Registration} />
-            <Route exact path="/feed" component={Feed} />
-            <Route exact path="/notifications" component={Notifications} />
-            <Route exact path="/new" component={PollCreation} />
-            <Route path="/profile/:username" component={Profile} />
-          </Switch>
+          <DynoWaiter>
+            <Router />
+          </DynoWaiter>
         </Suspense>
       </div>
     </SnackbarProvider>
diff --git a/src/containers/Page/Router.tsx b/src/containers/Page/Router.tsx
new file mode 100644
index 0000000..7067eea
--- /dev/null
+++ b/src/containers/Page/Router.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+const Profile = React.lazy(() => import('../Profile/Profile'));
+const Feed = React.lazy(() => import('../Feed/Feed'));
+const Login = React.lazy(() => import('../Login/Login'));
+const Registration = React.lazy(() => import('../Registration/Registration'));
+const Home = React.lazy(() => import('../Home/Home'));
+const Notifications = React.lazy(() => import('../Notifications/Notifications'));
+const PollCreation = React.lazy(() => import('../PollCreation/PollCreation'));
+
+
+const Router: React.FC = React.memo(() => (
+  <Switch>
+    <Route exact path="/" component={Home} />
+    <Route exact path="/login" component={Login} />
+    <Route exact path="/registration" component={Registration} />
+    <Route exact path="/feed" component={Feed} />
+    <Route exact path="/notifications" component={Notifications} />
+    <Route exact path="/new" component={PollCreation} />
+    <Route path="/profile/:username" component={Profile} />
+  </Switch>
+));
+
+
+export default Router;
+
-- 
cgit v1.2.3


From 3605a00b1399c4305ed54b65e500d8cfad35f5a7 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 15 Aug 2020 05:03:51 +0300
Subject: feat: add illustration to DynoWaiter

---
 src/containers/Page/DynoWaiter.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

(limited to 'src/containers/Page')

diff --git a/src/containers/Page/DynoWaiter.tsx b/src/containers/Page/DynoWaiter.tsx
index d8460bf..05d269f 100644
--- a/src/containers/Page/DynoWaiter.tsx
+++ b/src/containers/Page/DynoWaiter.tsx
@@ -1,7 +1,15 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useMemo
+} from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { get } from '../../requests';
 import Loading from '../../components/Loading/Loading';
+import Image from '../../components/Image/Image';
+import Message from '../../components/Message/Message';
+import coffeIcon from '../../assets/coffeeBreak.svg';
 
 const DYNO_WAKEUP_TIME = 30;
 
@@ -10,7 +18,7 @@ const messages = [
   'It looks like our server is sleeping.',
   `We need about ${DYNO_WAKEUP_TIME} seconds to wake it up.`,
   'Please, stay with us.',
-  'You are doing good.',
+  'We love you <3',
   'Almost done.'
 ];
 
@@ -20,10 +28,18 @@ const useStyles = makeStyles(theme => ({
   },
   hidden: {
     visibility: 'hidden',
-    position: 'absolute'
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    overflow: 'hidden'
+  },
+  img: {
+    width: theme.spacing(24)
   }
 }));
 
+// TODO: if Dyno is sleeping, use this time to pre-load pages
+
 const DynoWaiter: React.FC = ({ children }) => {
   const classes = useStyles();
   const [isReady, setIsReady] = useState<boolean>(false);
@@ -47,11 +63,14 @@ const DynoWaiter: React.FC = ({ children }) => {
     return messages[index > lastIndex ? lastIndex : index];
   }, [time]);
 
-  const tagline = useMemo(() => time > 3 ? 'Waiting for the server' : '', [time]);
-
   return (
     <>
-      {!isReady && <Loading tagline={tagline} message={message} />}
+      {!isReady && (
+        <>
+          <Loading message={message} tagline={message && 'Waiting for the server'} />
+          {message && <Message><Image src={coffeIcon} className={classes.img} /></Message>}
+        </>
+      )}
       <div className={isReady ? '' : classes.hidden}>
         {children}
       </div>
-- 
cgit v1.2.3