Add LoadingStatus Component (#531)

* Add LoadingStatus Component

Upgrade storybook to 6.1.17

Fix LoadingIndicator stories

Add new Loading component

Use Loading wrapper in Join page

Separate Loading container from presentation

Add Loading stories

* Pass async action to LoadingStatus

* Add PropTypes to LoadingStatus

simplq/package.json

@@ -20,6 +20,7 @@
     "material-ui-icons": "^1.0.0-beta.36",
     "moment": "^2.29.1",
     "node-sass": "^4.14.1",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
@@ -62,11 +63,11 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/preset-create-react-app": "^3.1.2",
-    "@storybook/react": "^5.3.19",
+    "@storybook/addon-actions": "^6.1.17",
+    "@storybook/addon-links": "^6.1.17",
+    "@storybook/addons": "^6.1.17",
+    "@storybook/preset-create-react-app": "^3.1.5",
+    "@storybook/react": "^6.1.17",
     "dotenv": "^8.2.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-airbnb-base": "^14.1.0",

simplq/src/components/common/Loading/Loading.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropagateLoader from 'react-spinners/PropagateLoader';
+import styles from './Loading.module.scss';
+
+export default ({ children, actionStatus }) => {
+  if (!actionStatus || actionStatus === 'pending') {
+    return (
+      <div className={styles.main}>
+        <PropagateLoader color="#3a3768" />
+      </div>
+    );
+  }
+
+  if (!actionStatus || actionStatus === 'rejected') {
+    return (
+      <div className={styles.main}>
+        An unknown error occured. Please look at the console log for more nfo.
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};

simplq/src/components/common/Loading/Loading.module.scss

@@ -0,0 +1,6 @@
+@import '../../common.scss';
+
+.main {
+  @include center-vertically();
+  @include center-horizontally();
+}

simplq/src/components/common/Loading/Loading.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Loading from './Loading';
+
+export default {
+  component: Loading,
+  title: 'Loading',
+};
+
+const Template = (args) => (
+  <Loading actionStatus={args.actionStatus}>
+    <p>Some child component to display</p>
+  </Loading>
+);
+
+export const StateUnknown = Template.bind({});
+
+export const StatePending = Template.bind({});
+StatePending.args = { actionStatus: 'pending' };
+
+export const StateFulfilled = Template.bind({});
+StateFulfilled.args = { actionStatus: 'fullfiled' };
+
+export const StateRejected = Template.bind({});
+StateRejected.args = { actionStatus: 'rejected' };

simplq/src/components/common/Loading/LoadingStatus.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import Loading from './Loading';
+
+const LoadingStatus = ({ children, dependsOn }) => {
+  const actionName = Object.keys(dependsOn)[0];
+  const actionStatus = useSelector((state) => state.actionStatus[actionName]);
+
+  return <Loading actionStatus={actionStatus}>{children}</Loading>;
+};
+
+LoadingStatus.propTypes = {
+  dependsOn: PropTypes.objectOf(PropTypes.function).isRequired,
+};
+
+export default LoadingStatus;

simplq/src/components/common/Loading/index.jsx

@@ -0,0 +1,3 @@
+import LoadingStatus from './LoadingStatus';
+
+export default LoadingStatus;

simplq/src/components/common/LoadingIndicator/LoadingIndicator.stories.jsx

@@ -1,8 +1,8 @@
-import Indicator from '.';
+import LoadingIndicator from '.';
 
 export default {
-  component: Indicator,
-  title: 'Indicator',
+  component: LoadingIndicator,
+  title: 'LoadingIndicator',
 };
 
-export const MainIndicator = Indicator;
+export const MainLoadingIndicator = LoadingIndicator;

simplq/src/components/pages/Join/index.jsx

@@ -2,9 +2,9 @@ import React, { useEffect, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useGetQueueStatusByName, useJoinQueue } from 'store/asyncActions';
 import { selectQueueStatus } from 'store/queueStatus';
+import LoadingStatus from 'components/common/Loading';
 import JoinQueueForm from './Form';
 import styles from './join.module.scss';
-import LoadingIndicator from '../../common/LoadingIndicator';
 import HeaderSection from '../../common/HeaderSection';
 import QueueStats from '../../common/QueueStats';
 
@@ -19,10 +19,6 @@ export default ({ history, match }) => {
     dispatch(getQueueStatusByName({ queueName }));
   }, [queueName, dispatch, getQueueStatusByName, history]);
 
-  if (!queueStatus.status) {
-    return <LoadingIndicator />;
-  }
-
   const queueId = queueStatus.queueId;
 
   const joinQueueHandler = (name, contactNumber) => {
@@ -35,15 +31,17 @@ export default ({ history, match }) => {
     <div>
       <HeaderSection queueName={queueStatus.queueName} history={history} />
       <div className={styles['main-content']}>
-        <div className={styles['queue-stats']}>
-          <QueueStats queueStatus={queueStatus} />
-        </div>
-        <p className={styles['message']}>Please enter your contact details to join this queue</p>
-        <JoinQueueForm
-          queueId={queueId}
-          joinQueueHandler={joinQueueHandler}
-          buttonText="Join Queue"
-        />
+        <LoadingStatus dependsOn={{ getQueueStatusByName }}>
+          <div className={styles['queue-stats']}>
+            <QueueStats queueStatus={queueStatus} />
+          </div>
+          <p className={styles['message']}>Please enter your contact details to join this queue</p>
+          <JoinQueueForm
+            queueId={queueId}
+            joinQueueHandler={joinQueueHandler}
+            buttonText="Join Queue"
+          />
+        </LoadingStatus>
       </div>
     </div>
   );