Added progress spinner to signIn and signUp page

Author: ujjavaldesai07

client/src/components/routes/navbar/navBar.js

@@ -25,7 +25,6 @@ import log from "loglevel";
 import Hidden from "@material-ui/core/Hidden";
 import BagButton from "./bagButton";
 import {tabsDataReducer} from "../../../reducers/screens/commonScreenReducer";
-import Spinner from "../../ui/spinner";
 import {HTTPError} from "../../ui/error/httpError";
 import {BadRequest} from "../../ui/error/badRequest";
 import SearchBar from "./searchBar";
@@ -100,7 +99,7 @@ const NavBar = props => {
 
     if (tabsAPIData.isLoading) {
         log.info("[NavBar]: loading")
-        return <Spinner/>
+        return null
     } else {
         if (tabsAPIData.hasOwnProperty("data")) {
             if (Object.entries(tabsAPIData.data).length !== TABS_API_OBJECT_LEN) {
@@ -156,8 +155,8 @@ const NavBar = props => {
             open={isMenuOpen}
             onClose={handleMenuClose}
         >
-            <Link to={!tokenId ? "/login" : "/"}>
-                <MenuItem onClick={handleLoginStatus}>{!tokenId ? 'Login' : 'Logout'}</MenuItem>
+            <Link to={!tokenId ? "/signin" : "/"}>
+                <MenuItem onClick={handleLoginStatus}>{!tokenId ? 'SignIn' : 'SignOut'}</MenuItem>
             </Link>
             <MenuItem onClick={handleMenuClose}>My account</MenuItem>
         </Menu>

client/src/components/routes/signin/signIn.js

@@ -1,24 +1,38 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import SignInForm from "./signInForm"
 import {Grid, Typography} from "@material-ui/core";
 import log from "loglevel";
 import {StyledWebButton} from "../../../styles/semanticUI/customStyles";
 import {Divider, Icon} from "semantic-ui-react";
 import {Link} from "react-router-dom";
+import { Dimmer, Loader } from 'semantic-ui-react'
+import {useSelector} from "react-redux";
 
 const SignIn = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const {timestamp} = useSelector(state => state.signInReducer)
+
+    const setIsLoadingState = () => {
+        setIsLoading(true);
+    }
+
+    useEffect(() => {
+        log.info(`[SignIn]: Component did mount...`)
+        setIsLoading(false)
+
+    }, [timestamp])
 
     log.info(`[SignIn]: Rendering SignIn Component`)
 
     return (
         <Grid container justify="center" style={{paddingTop: "2rem"}}>
-            <Grid item container xs={3} direction="column">
+            <Grid item container xs={10} sm={5} lg={3} direction="column">
 
                 <Grid item style={{alignSelf: "center", paddingBottom: "1rem"}}>
                     <h1 style={{fontSize: "2.5rem"}}>Sign In</h1>
                 </Grid>
 
-                <SignInForm/>
+                <SignInForm loadingHandler={setIsLoadingState}/>
 
                 <Grid container justify="center">
                     <Grid item style={{width: "100%", padding: "1rem 0"}}>
@@ -27,7 +41,7 @@ const SignIn = () => {
                 </Grid>
 
                 <Grid container justify="center">
-                    <Grid item xs={5}>
+                    <Grid item xs={7} sm={5}>
                         <StyledWebButton color='google plus'>
                             <Icon name='google plus'/> Google
                         </StyledWebButton>
@@ -41,6 +55,10 @@ const SignIn = () => {
                     </Typography>
                 </Grid>
 
+                {isLoading ? <Dimmer active inverted>
+                    <Loader inverted>Loading</Loader>
+                </Dimmer> : null}
+
             </Grid>
         </Grid>
     )

client/src/components/routes/signin/signInForm.js

@@ -10,8 +10,16 @@ import {renderReduxTextField} from "../../ui/reduxTextField";
 
 class SignInForm extends Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            isLoading: false
+        }
+    }
+
     handleSubmit = event => {
         event.preventDefault();
+        this.props.loadingHandler(true)
         this.props.signIn(this.props.signInFormStore.values)
     }
 
@@ -43,7 +51,7 @@ class SignInForm extends Component {
             )
         }
 
-        log.info(`[SignUpForm] Rendering SignUpForm Component...`)
+        log.info(`[SignInForm] Rendering SignInForm Component...`)
 
         return (
             <Grid container>
@@ -56,7 +64,7 @@ class SignInForm extends Component {
                     {renderErrorMsg(this.props.signInReducer.errorMsg)}
 
                     <Grid container justify="center" style={{paddingTop: "2rem"}}>
-                        <Grid item sm={5}>
+                        <Grid item xs={7} sm={5}>
                             <Button variant="contained"
                                     size="large"
                                     style={{

client/src/components/routes/signup/signUp.js

@@ -1,20 +1,38 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import SignUpForm from "./signUpForm"
 import {Grid} from "@material-ui/core";
 import log from "loglevel";
+import {useSelector} from "react-redux";
+import {Dimmer, Loader} from "semantic-ui-react";
 
 const SignUp = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const {timestamp} = useSelector(state => state.signUpReducer)
+
+    const setIsLoadingState = () => {
+        setIsLoading(true);
+    }
+
+    useEffect(() => {
+        log.info(`[SignIn]: Component did mount...`)
+        setIsLoading(false)
+
+    }, [timestamp])
 
     log.info(`[SignUp]: Rendering SignUp Component`)
 
     return (
         <Grid container justify="center" style={{paddingTop: "2rem"}}>
-            <Grid item container xs={4} direction="column">
+            <Grid item container xs={10} sm={6} lg={4} direction="column">
                 <Grid item style={{alignSelf: "center"}}>
                     <h1 style={{fontSize: "2.5rem"}}>Sign Up</h1>
                 </Grid>
-                <SignUpForm/>
+                <SignUpForm loadingHandler={setIsLoadingState}/>
             </Grid>
+
+            {isLoading ? <Dimmer active inverted>
+                <Loader inverted>Loading</Loader>
+            </Dimmer> : null}
         </Grid>
     )
 }

client/src/components/routes/signup/signUpForm.js

@@ -28,6 +28,8 @@ class SignUpForm extends Component {
             this.setState({errorMsg: "Please read the terms and conditions. Checkbox is uncheck."})
             return
         }
+
+        this.props.loadingHandler(true)
         this.props.signUp(this.props.signUpFormStore.values)
     }
 
@@ -116,17 +118,19 @@ class SignUpForm extends Component {
                     {renderErrorMsg(this.state.errorMsg)}
                     {renderErrorMsg(this.props.signUpReducer.errorMsg)}
 
-                    <Grid item container justify="center" style={{padding: "1rem 0"}}>
-                        <Button variant="contained"
-                                size="large"
-                                style={{
-                                    width: "35%", backgroundColor: "teal",
-                                    color: "white", fontSize: "1rem", fontWeight: "bold"
-                                }}
-                                disabled={submitting || pristine}
-                                type="submit">
-                            Sign Up
-                        </Button>
+                    <Grid container justify="center" style={{padding: "1rem 0"}}>
+                        <Grid item xs={10} sm={6}>
+                            <Button variant="contained"
+                                    size="large"
+                                    style={{
+                                        width: "100%", backgroundColor: "teal",
+                                        color: "white", fontSize: "1rem", fontWeight: "bold"
+                                    }}
+                                    disabled={submitting || pristine}
+                                    type="submit">
+                                Sign Up
+                            </Button>
+                        </Grid>
                     </Grid>
 
                 </form>

client/src/reducers/screens/commonScreenReducer.js

@@ -30,12 +30,15 @@ import {
 import _ from "lodash";
 
 
-export const signInReducer = (state = {isSignedIn: null}, action) => {
+export const signInReducer = (state = {isSignedIn: null, timestamp: null}, action) => {
+
+    // timestamp is used to update the state so that
+    // we can stop loading progress component
     switch (action.type) {
         case HANDLE_SIGN_IN:
-            return {...state, isSignedIn: true, tokenId: action.payload};
+            return {...state, isSignedIn: true, tokenId: action.payload, timestamp: Date.now()};
         case HANDLE_SIGN_IN_ERROR:
-            return {...state, isSignedIn: false, errorMsg: action.payload};
+            return {...state, isSignedIn: false, errorMsg: action.payload, timestamp: Date.now()};
         case HANDLE_SIGN_OUT:
             return _.omit(state, 'tokenId', 'errorMsg');
         default:
@@ -44,10 +47,12 @@ export const signInReducer = (state = {isSignedIn: null}, action) => {
 };
 
 export const signUpReducer = (state
-                                  = {errorMsg: null}, action) => {
+                                  = {errorMsg: null, timestamp: null}, action) => {
+    // timestamp is used to update the state so that
+    // we can stop loading progress component
     switch (action.type) {
         case HANDLE_SIGN_UP_ERROR:
-            return {...state, errorMsg: action.payload};
+            return {...state, errorMsg: action.payload, timestamp: Date.now()};
         case HANDLE_SIGN_UP_RESET: 
             return {account_status: null, errorMsg: null}
         default:

client/src/styles/index.css

@@ -12,4 +12,8 @@ body ::-webkit-scrollbar {
 
 #customDropdown {
     font-weight: bold;
+}
+
+input {
+    font-size: 1.2rem !important;
 }