SimplQ · maaverik · Feb 28, 2021 · Feb 23, 2021 · Feb 23, 2021 · Feb 23, 2021
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
+import { useGetUserQueues } from 'store/asyncActions';
+import { useDispatch } from 'react-redux';
 import { useAuth0 } from '@auth0/auth0-react';
 import Footer from 'components/common/Footer';
 import Loading from 'components/common/Loading/Loading';
-import { useGetUserQueues } from 'store/asyncActions';
-import { useDispatch } from 'react-redux';
 import Routes from './Routes';
 import styles from './Layout.module.scss';
 
@@ -13,7 +13,6 @@ function Layout() {
   const getUserQueues = useGetUserQueues();
 
   useEffect(() => {
-    // TODO: Server still returns queues for anonymous users
     //  Dispatch action only if auth is loaded
     if (isLoading === false) {
       dispatch(getUserQueues());

@@ -8,8 +8,7 @@ import styles from './ClickableLogo.module.scss';
 export default (props) => {
   const history = useHistory();
   const defaultOnClick = () => {
-    history.push('/');
-    smoothScrollToHomePageTop();
+    smoothScrollToHomePageTop(history);
   };
   return (
     <div className={styles['logo']} onClick={props.onClick ? props.onClick : defaultOnClick}>

@@ -1,28 +1,41 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 import React from 'react';
-import { smoothScrollTo } from 'utils/scrollingOperations';
+import { smoothScrollTo, smoothScrollToHomePageTop } from 'utils/scrollingOperations';
+import { useHistory } from 'react-router';
 import styles from './Nav.module.scss';
 import LoginButton from '../LoginButton';
 
 const LeftNav = ({ open, toggleClose }) => {
+  const history = useHistory();
+
   const scrollToHowItWorks = () => {
     // Close the navbar on click
     toggleClose();
     // get the target div by ID
-    const element = document.getElementById('target_how_it_works');
+    let element = document.getElementById('target_how_it_works');
     if (element) {
       // element is on the current page, just have to scroll to it
       smoothScrollTo(element);
     } else {
-      window.location.href = '/#target_how_it_works';
+      history.push('/');
+      // wait till page loads before getting element
+      setTimeout(() => {
+        element = document.getElementById('target_how_it_works');
+        smoothScrollTo(element);
+      }, 0);
     }
   };
   return (
     <div>
       <ul className={styles['left-nav']} open={open}>
         <li>
-          <a tabIndex={0} href="/">
+          <a
+            role="link"
+            tabIndex={0}
+            onKeyDown={() => smoothScrollToHomePageTop(history)}
+            onClick={() => smoothScrollToHomePageTop(history)}
+          >
             Home
           </a>
         </li>

@@ -1,13 +1,12 @@
 import React from 'react';
-import { smoothScrollToHomePageTop } from 'utils/scrollingOperations';
 import styles from './Nav.module.scss';
 import Burger from './Burger';
 import Logo from '../ClickableLogo';
 
 export const Navbar = () => {
   return (
     <nav className={styles['navbar']}>
-      <Logo onClick={smoothScrollToHomePageTop} />
+      <Logo />
       <Burger />
     </nav>
   );

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectTokens, selectQueueName } from 'store/selectedQueue';
+import { selectQueueName } from 'store/selectedQueue';
 import Ribbon from 'components/common/Ribbon';
 import Tour from 'components/common/Tour';
 import { useGetSelectedQueue } from 'store/asyncActions';
@@ -19,14 +19,12 @@ let timeoutId;
 export default (props) => {
   const queueId = props.match.params.queueId;
   const queueName = useSelector(selectQueueName);
-  const tokens = useSelector(selectTokens);
   const description = queueName && 'Ready to share';
   const dispatch = useDispatch();
   const getSelectedQueue = useGetSelectedQueue();
 
   const [toursteps, setToursteps] = useState(getToursteps(window.innerHeight));
   const { isAuthenticated } = useAuth0();
-
   const update = useCallback(() => {
     clearTimeout(timeoutId);
     dispatch(getSelectedQueue({ queueId }));
@@ -58,7 +56,7 @@ export default (props) => {
         />
       )}
       <div className={styles['main-body']}>
-        <TokenList tokens={tokens} queueId={queueId} />
+        <TokenList queueId={queueId} />
         <SidePanel queueId={queueId} />
       </div>
     </div>

@@ -1,10 +1,13 @@
 import React from 'react';
 import Loading from 'components/common/Loading/Loading';
+import { useSelector } from 'react-redux';
+import { selectTokens } from 'store/selectedQueue';
 import Token from './Token';
 import styles from './admin.module.scss';
 
-function TokenList({ tokens }) {
-  const Dispaly = () =>
+function TokenList() {
+  const tokens = useSelector(selectTokens);
+  const ListContent = () =>
     tokens.length === 0 ? (
       <p>Your queue has been created and is currently empty. Waiting for people to join...</p>
     ) : (
@@ -14,7 +17,7 @@ function TokenList({ tokens }) {
   return (
     <Loading isLoading={tokens === undefined}>
       <div className={styles['token-list']}>
-        <Dispaly />
+        <ListContent />
       </div>
     </Loading>
   );

@@ -11,6 +11,7 @@ export default () => {
   if (isAuthenticated) {
     subtitle = `Hi ${user.name}, welcome back!`;
   }
+
   return (
     <div id="target_top" className={styles['landing-page']}>
       <div data-aos="zoom-in">

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import DeleteIcon from '@material-ui/icons/Delete';
 import IconButton from '@material-ui/core/IconButton';
 import { useHistory } from 'react-router';
 import { useDeleteQueue } from 'store/asyncActions';
 import { selectQueues } from 'store/queues';
 import { useDispatch, useSelector } from 'react-redux';
+import { setInfoPopupMessage } from 'store/appSlice';
 import styles from './Home.module.scss';
 
 export default () => {
@@ -13,6 +14,12 @@ export default () => {
   const queues = useSelector(selectQueues);
   const deleteQueue = useDeleteQueue();
 
+  useEffect(() => {
+    if (queues) {
+      dispatch(setInfoPopupMessage(`Number of queues fetched: ${queues.length}`));
+    }
+  }, [dispatch, queues]);
+
   const handleDelete = (e, queue) => {
     // Don't trigger parent's onClick
     e.stopPropagation();

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
-import { getUserQueues, deleteQueue, getQueueStatusByName, joinQueue } from 'store/asyncActions';
+import { deleteQueue, getQueueStatusByName, joinQueue } from 'store/asyncActions';
 
 const appSlice = createSlice({
   name: 'appSlice',
@@ -21,15 +21,6 @@ const appSlice = createSlice({
     },
   },
   extraReducers: {
-    [getUserQueues.pending]: (state) => {
-      state.infoText = `Loading queues...`;
-    },
-    [getUserQueues.rejected]: (state, action) => {
-      state.errorText = action.error.message;
-    },
-    [getUserQueues.fulfilled]: (state, action) => {
-      state.infoText = `Number of queues fetched: ${action.payload.queues.length}`;
-    },
     [deleteQueue.pending]: (state) => {
       state.infoText = `Deleting queue...`;
     },

@@ -13,11 +13,11 @@ export const smoothScrollTo = (targetElement) => {
   });
 };
 
-export const smoothScrollToHomePageTop = () => {
+export const smoothScrollToHomePageTop = (history) => {
   const element = document.getElementById('target_top');
   if (element) {
     smoothScrollTo(element);
   } else {
-    window.location.href = '/';
+    history.push('/');
   }
 };