From 38143778174bc88acadc7d57248b2dfda76c9c0d Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Mon, 25 Nov 2019 13:55:03 -0500
Subject: [PATCH 1/2] Display loading icon when the user logs in or signs up

---
 twistter-frontend/src/pages/Home.js           | 54 ++++++++++---------
 .../src/redux/actions/userActions.js          |  5 +-
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index cee0a93..5454973 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -8,6 +8,7 @@ import axios from 'axios';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import Typography from "@material-ui/core/Typography";
 
 // component
@@ -32,6 +33,7 @@ class Home extends Component {
   }
 
   render() {
+    const { UI:{ loading } } = this.props;
     let authenticated = this.props.user.authenticated;
 
     let postMarkup = this.state.posts ? (
@@ -68,40 +70,44 @@ class Home extends Component {
           {postMarkup}
         </Grid>
       </Grid> 
-      :
-      <div>
-        <div>
-          <img src={logo} className="app-logo" alt="logo" />
-          <br/><br/>
-          <b>Welcome to Twistter!</b> 
-          <br/><br/>
-          <b>See the most interesting topics people are following right now.</b> 
-        </div>
+      : loading ? 
+          <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+        :
+          <div>
+            <div>
+              <img src={logo} className="app-logo" alt="logo" />
+              <br/><br/>
+              <b>Welcome to Twistter!</b> 
+              <br/><br/>
+              <b>See the most interesting topics people are following right now.</b> 
+            </div>
 
-        <br/><br/><br/><br/>
+            <br/><br/><br/><br/>
 
-        <div>                    
-          <b>Join today or sign in if you already have an account.</b> 
-          <br/><br/>
-          <form action="./signup">
-            <button className="authButtons signup">Sign up</button> 
-          </form>
-          <br/>
-          <form action="./login">
-            <button className="authButtons login">Sign in</button>
-          </form>
-        </div>
-      </div>
+            <div>                    
+              <b>Join today or sign in if you already have an account.</b> 
+              <br/><br/>
+              <form action="./signup">
+                <button className="authButtons signup">Sign up</button> 
+              </form>
+              <br/>
+              <form action="./login">
+                <button className="authButtons login">Sign in</button>
+              </form>
+            </div>
+          </div>
     );
   }
 }
 
 const mapStateToProps = (state) => ({
-  user: state.user
+  user: state.user,
+  UI: state.UI
 })
 
 Home.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  UI: PropTypes.object.isRequired
 }
 
 export default connect(mapStateToProps)(Home);
\ No newline at end of file
diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js
index 5993804..7fc6cbf 100644
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/twistter-frontend/src/redux/actions/userActions.js
@@ -9,6 +9,7 @@ export const getUserData = () => (dispatch) => {
                 type: SET_USER,
                 payload: res.data,
             })
+            dispatch({ type: CLEAR_ERRORS })
         })
         .catch((err) => console.error(err));
 }
@@ -21,7 +22,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
         // Save the login token
         setAuthorizationHeader(res.data.token);
         dispatch(getUserData());
-        dispatch({ type: CLEAR_ERRORS })
+        // dispatch({ type: CLEAR_ERRORS })
         // Redirects to home page
         history.push('/home');
       })
@@ -43,7 +44,7 @@ export const signupUser = (newUserData, history) => (dispatch) => {
         // Save the signup token
         setAuthorizationHeader(res.data.token);
         dispatch(getUserData());
-        dispatch({ type: CLEAR_ERRORS })
+        // dispatch({ type: CLEAR_ERRORS })
         // Redirects to home page
         history.push('/home');
       })

From f0c4a2974f610db2c257091f9f4c4877ffda7647 Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Tue, 3 Dec 2019 13:49:37 -0500
Subject: [PATCH 2/2] Fix mismatched parenthesis

---
 twistter-frontend/src/pages/Home.js | 43 +++++++++++++++--------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index fb1bb5e..9fd7767 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -94,32 +94,33 @@ class Home extends Component {
           {postMarkup}
         </Grid>
       </Grid> 
-      : loading ? 
-          <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
+     ) : loading ? 
+          (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>)
         :
-          <div>
+          (
             <div>
-              <img src={logo} className="app-logo" alt="logo" />
-              <br/><br/>
-              <b>Welcome to Twistter!</b> 
-              <br/><br/>
-              <b>See the most interesting topics people are following right now.</b> 
-            </div>
+              <div>
+                <img src={logo} className="app-logo" alt="logo" />
+                <br/><br/>
+                <b>Welcome to Twistter!</b> 
+                <br/><br/>
+                <b>See the most interesting topics people are following right now.</b> 
+              </div>
 
-            <br/><br/><br/><br/>
+              <br/><br/><br/><br/>
 
-            <div>                    
-              <b>Join today or sign in if you already have an account.</b> 
-              <br/><br/>
-              <form action="./signup">
-                <button className="authButtons signup">Sign up</button> 
-              </form>
-              <br/>
-              <form action="./login">
-                <button className="authButtons login">Sign in</button>
-              </form>
+              <div>                    
+                <b>Join today or sign in if you already have an account.</b> 
+                <br/><br/>
+                <form action="./signup">
+                  <button className="authButtons signup">Sign up</button> 
+                </form>
+                <br/>
+                <form action="./login">
+                  <button className="authButtons login">Sign in</button>
+                </form>
+              </div>
             </div>
-          </div>
     );
   }
 }