From c0e34c2f72bfefdc0368bad804cef9a5075395f3 Mon Sep 17 00:00:00 2001
From: Timo Heman <timoheman16@gmail.com>
Date: Tue, 19 Jul 2022 20:58:35 +0100
Subject: [PATCH 1/2] add loading state on submit for login and signup

---
 src/pages/Login/Login.js  | 41 ++++++++++++++++---------------
 src/pages/Login/SignUp.js | 51 +++++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
index 115fa7c..7cda364 100644
--- a/src/pages/Login/Login.js
+++ b/src/pages/Login/Login.js
@@ -7,15 +7,18 @@ const Login = ({ dispatch }) => {
   const [email, setEmail] = useState();
   const [password, setPassword] = useState();
   const [register, setRegister] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const handleLogin = async (e) => {
     e.preventDefault();
+    setLoading(true);
     dispatch({ type: FetchState.FETCH_INIT });
     try {
       await api.createSession(email, password);
       const data = await api.getAccount();
       dispatch({ type: FetchState.FETCH_SUCCESS, payload: data });
     } catch (e) {
+      setLoading(false);
       dispatch({ type: FetchState.FETCH_FAILURE });
     }
   };
@@ -23,44 +26,44 @@ const Login = ({ dispatch }) => {
   return register ? (
     <SignUp setRegister={setRegister} dispatch={dispatch} />
   ) : (
-    <section className="container h-screen mx-auto flex">
-      <div className="flex-grow flex flex-col max-w-xl justify-center p-6">
-        <h1 className="text-6xl font-bold">Login</h1>
-        <p className="mt-6">
+    <section className='container h-screen mx-auto flex'>
+      <div className='flex-grow flex flex-col max-w-xl justify-center p-6'>
+        <h1 className='text-6xl font-bold'>Login</h1>
+        <p className='mt-6'>
           {" "}
           Don't have an account ?{" "}
           <span
-            className="cursor-pointer underline"
+            className='cursor-pointer underline'
             onClick={() => setRegister(true)}
           >
             Sign Up
           </span>{" "}
         </p>
         <form onSubmit={handleLogin}>
-          <label className="block mt-6"> Email</label>
+          <label className='block mt-6'> Email</label>
           <input
-            className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
-            type="text"
+            className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
+            type='text'
             onChange={(e) => setEmail(e.target.value)}
-            name="email"
-            autoComplete="email"
+            name='email'
+            autoComplete='email'
           />
-          <label className="block mt-6"> Password</label>
+          <label className='block mt-6'> Password</label>
           <input
-            className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
-            type="password"
+            className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
+            type='password'
             onChange={(e) => setPassword(e.target.value)}
-            name="password"
-            autoComplete="password"
+            name='password'
+            autoComplete='password'
           />
 
-          <div className="mt-6">
+          <div className='mt-6'>
             <button
-              type="submit"
+              type='submit'
               disabled={!email || !password}
-              className="mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+              className='mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed'
             >
-              Login
+              {loading ? "Please Wait..." : "Login"}
             </button>
           </div>
         </form>
diff --git a/src/pages/Login/SignUp.js b/src/pages/Login/SignUp.js
index 44d7247..f9316d3 100644
--- a/src/pages/Login/SignUp.js
+++ b/src/pages/Login/SignUp.js
@@ -6,69 +6,72 @@ const SignUp = ({ setRegister, dispatch }) => {
   const [name, setName] = useState();
   const [email, setEmail] = useState();
   const [password, setPassword] = useState();
+  const [loading, setLoading] = useState(false);
 
   const handleSignup = async (e) => {
     e.preventDefault();
+    setLoading(true);
     dispatch({ type: FetchState.FETCH_INIT });
     try {
       const user = await api.createAccount(email, password, name);
       await api.createSession(email, password);
       dispatch({ type: FetchState.FETCH_SUCCESS, payload: user });
     } catch (e) {
+      setLoading(false);
       dispatch({ type: FetchState.FETCH_FAILURE });
     }
   };
 
   return (
     <>
-      <section className="container h-screen mx-auto flex">
-        <div className="flex-grow flex flex-col max-w-xl justify-center p-6">
-          <h1 className="text-6xl font-bold">Sign Up</h1>
-          <p className="mt-4">
+      <section className='container h-screen mx-auto flex'>
+        <div className='flex-grow flex flex-col max-w-xl justify-center p-6'>
+          <h1 className='text-6xl font-bold'>Sign Up</h1>
+          <p className='mt-4'>
             {" "}
             Already have an account ?{" "}
             <span
-              className="cursor-pointer underline"
+              className='cursor-pointer underline'
               onClick={() => setRegister(false)}
             >
               Login
             </span>{" "}
           </p>
           <form onSubmit={handleSignup}>
-            <label className="block mt-6"> Name</label>
+            <label className='block mt-6'> Name</label>
             <input
-              className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
-              type="text"
+              className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
+              type='text'
               onChange={(e) => setName(e.target.value)}
-              name="name"
-              autoComplete="name"
+              name='name'
+              autoComplete='name'
             />
 
-            <label className="block mt-6"> Email</label>
+            <label className='block mt-6'> Email</label>
             {/* “Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.”  */}
             <input
-              className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
-              type="text"
+              className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
+              type='text'
               onChange={(e) => setEmail(e.target.value)}
-              name="email"
-              autoComplete="email"
+              name='email'
+              autoComplete='email'
             />
-            <label className="block mt-6"> Password</label>
+            <label className='block mt-6'> Password</label>
             <input
-              className="w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900"
-              type="password"
+              className='w-full p-4 placeholder-gray-400 text-gray-700 bg-white text-lg border-0 border-b-2 border-gray-400 focus:ring-0 focus:border-gray-900'
+              type='password'
               onChange={(e) => setPassword(e.target.value)}
-              name="password"
-              autoComplete="password"
+              name='password'
+              autoComplete='password'
             />
 
-            <div className="mt-6">
+            <div className='mt-6'>
               <button
-                type="submit"
+                type='submit'
                 disabled={!name || !email || !password}
-                className="mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+                className='mx-auto mt-4 py-4 px-16 font-semibold rounded-lg shadow-md bg-gray-900 text-white border hover:border-gray-900 hover:text-gray-900 hover:bg-white focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed'
               >
-                Sign Up
+                {loading ? "Please wait..." : "Sign Up"}
               </button>
             </div>
           </form>

From 3147578a9cb41180d9829554d2f2d27dd05bba95 Mon Sep 17 00:00:00 2001
From: Timo Heman <timoheman16@gmail.com>
Date: Thu, 21 Jul 2022 11:39:18 +0100
Subject: [PATCH 2/2] display error message for login and sign up form

---
 src/App.js                | 22 +++++++++++++++-------
 src/hooks/index.js        |  8 +++++++-
 src/pages/Login/Login.js  | 12 +++++++++---
 src/pages/Login/SignUp.js |  9 +++++++--
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 010cba1..36be6ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,21 +6,29 @@ import { useGetUser } from "./hooks";
 
 function App() {
   // eslint-disable-next-line
-  const [{ user, isLoading, isError }, dispatch] = useGetUser();
+  const [{ user, isLoading, isError, errorMessage }, dispatch] = useGetUser();
 
   return (
     <BrowserRouter>
       <Switch>
-        <Route path="/todos">
-          {user ? <Todo user={user} dispatch={dispatch} /> : <Redirect to="/login" />}
+        <Route path='/todos'>
+          {user ? (
+            <Todo user={user} dispatch={dispatch} />
+          ) : (
+            <Redirect to='/login' />
+          )}
         </Route>
-        <Route path="/login">
-          {user ? <Redirect to="/todos" /> : <Login dispatch={dispatch}/>}
+        <Route path='/login'>
+          {user ? (
+            <Redirect to='/todos' />
+          ) : (
+            <Login dispatch={dispatch} error={errorMessage} />
+          )}
         </Route>
-        <Route exact path="/">
+        <Route exact path='/'>
           <Landing />
         </Route>
-        <Redirect to="/" />
+        <Redirect to='/' />
       </Switch>
     </BrowserRouter>
   );
diff --git a/src/hooks/index.js b/src/hooks/index.js
index 5f6c6d5..08eadba 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -68,7 +68,12 @@ export const useGetUser = () => {
           user: action.payload,
         };
       case FetchState.FETCH_FAILURE:
-        return { ...state, isLoading: false, isError: true };
+        return {
+          ...state,
+          isLoading: false,
+          isError: true,
+          errorMessage: action.payload?.message,
+        };
       default:
         throw new Error();
     }
@@ -77,6 +82,7 @@ export const useGetUser = () => {
   const [state, dispatch] = useReducer(reducer, {
     isLoading: false,
     isError: true,
+    errorMessage: null,
     data: [],
   });
 
diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
index 7cda364..c8f6be7 100644
--- a/src/pages/Login/Login.js
+++ b/src/pages/Login/Login.js
@@ -3,7 +3,7 @@ import api from "../../api/api";
 import SignUp from "./SignUp";
 import { FetchState } from "../../hooks";
 
-const Login = ({ dispatch }) => {
+const Login = ({ dispatch, error }) => {
   const [email, setEmail] = useState();
   const [password, setPassword] = useState();
   const [register, setRegister] = useState(false);
@@ -19,12 +19,16 @@ const Login = ({ dispatch }) => {
       dispatch({ type: FetchState.FETCH_SUCCESS, payload: data });
     } catch (e) {
       setLoading(false);
-      dispatch({ type: FetchState.FETCH_FAILURE });
+      console.log(e.message);
+      dispatch({
+        type: FetchState.FETCH_FAILURE,
+        payload: { message: e.message },
+      });
     }
   };
 
   return register ? (
-    <SignUp setRegister={setRegister} dispatch={dispatch} />
+    <SignUp setRegister={setRegister} dispatch={dispatch} error={error} />
   ) : (
     <section className='container h-screen mx-auto flex'>
       <div className='flex-grow flex flex-col max-w-xl justify-center p-6'>
@@ -57,6 +61,8 @@ const Login = ({ dispatch }) => {
             autoComplete='password'
           />
 
+          <p className='text-red-600 text-sm mt-4'>{error}&nbsp;</p>
+
           <div className='mt-6'>
             <button
               type='submit'
diff --git a/src/pages/Login/SignUp.js b/src/pages/Login/SignUp.js
index f9316d3..8dbc1be 100644
--- a/src/pages/Login/SignUp.js
+++ b/src/pages/Login/SignUp.js
@@ -2,7 +2,7 @@ import { useState } from "react";
 import api from "../../api/api";
 import { FetchState } from "../../hooks";
 
-const SignUp = ({ setRegister, dispatch }) => {
+const SignUp = ({ setRegister, dispatch, error }) => {
   const [name, setName] = useState();
   const [email, setEmail] = useState();
   const [password, setPassword] = useState();
@@ -18,7 +18,10 @@ const SignUp = ({ setRegister, dispatch }) => {
       dispatch({ type: FetchState.FETCH_SUCCESS, payload: user });
     } catch (e) {
       setLoading(false);
-      dispatch({ type: FetchState.FETCH_FAILURE });
+      dispatch({
+        type: FetchState.FETCH_FAILURE,
+        payload: { message: e.message },
+      });
     }
   };
 
@@ -65,6 +68,8 @@ const SignUp = ({ setRegister, dispatch }) => {
               autoComplete='password'
             />
 
+            <p className='text-red-600 text-sm mt-4'>{error}&nbsp;</p>
+
             <div className='mt-6'>
               <button
                 type='submit'