added spinner

package.json

@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-cookie": "^1.0.5",
     "react-dom": "^17.0.2",
+    "react-promise-tracker": "^2.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"

src/components/Spinner.js

@@ -0,0 +1,19 @@
+import "./spinner.css";
+
+const spinner = () => {
+  return (
+    <div className="sk-cube-grid">
+      <div className="sk-cube sk-cube1"></div>
+      <div className="sk-cube sk-cube2"></div>
+      <div className="sk-cube sk-cube3"></div>
+      <div className="sk-cube sk-cube4"></div>
+      <div className="sk-cube sk-cube5"></div>
+      <div className="sk-cube sk-cube6"></div>
+      <div className="sk-cube sk-cube7"></div>
+      <div className="sk-cube sk-cube8"></div>
+      <div className="sk-cube sk-cube9"></div>
+    </div>
+  );
+};
+
+export default spinner;

src/components/spinner.css

@@ -0,0 +1,64 @@
+#app:not(:empty) + .sk-cube-grid {
+  display: none;
+}
+
+.sk-cube-grid {
+  width: 60px;
+  height: 60px;
+  margin: 100px auto;
+}
+
+.sk-cube-grid .sk-cube {
+  width: 33%;
+  height: 33%;
+  background-color: #333;
+  float: left;
+  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+
+.sk-cube-grid .sk-cube1 {
+  animation-delay: 0.2s;
+}
+
+.sk-cube-grid .sk-cube2 {
+  animation-delay: 0.3s;
+}
+
+.sk-cube-grid .sk-cube3 {
+  animation-delay: 0.4s;
+}
+
+.sk-cube-grid .sk-cube4 {
+  animation-delay: 0.1s;
+}
+
+.sk-cube-grid .sk-cube5 {
+  animation-delay: 0.2s;
+}
+
+.sk-cube-grid .sk-cube6 {
+  animation-delay: 0.3s;
+}
+
+.sk-cube-grid .sk-cube7 {
+  animation-delay: 0s;
+}
+
+.sk-cube-grid .sk-cube8 {
+  animation-delay: 0.1s;
+}
+
+.sk-cube-grid .sk-cube9 {
+  animation-delay: 0.2s;
+}
+
+@keyframes sk-cubeGridScaleDelay {
+  0%,
+  70%,
+  100% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    transform: scale3D(0, 0, 1);
+  }
+}

src/pages/Home.js

@@ -4,6 +4,7 @@ import classes from "./Home.module.css";
 import AuthContext from "../context/auth-context";
 import axios from "axios";
 import Table from "./Table";
+import Spinner from "../components/Spinner";
 
 const Home = (props) => {
   const ctx = React.useContext(AuthContext);

src/pages/Login.js

@@ -4,21 +4,23 @@ import axios from "axios";
 
 import classes from "./Login.module.css";
 import Button from "../UI/Button";
+import Spinner from "../components/Spinner";
+import { usePromiseTracker } from "react-promise-tracker";
+import { trackPromise } from "react-promise-tracker";
 
 const Login = (props) => {
   const [email, setEmail] = React.useState("");
   const [password, setPassword] = React.useState("");
   const history = useHistory();
-
+  const { promiseInProgress } = usePromiseTracker();
   const emailChangeHandler = (e) => {
     setEmail(e.target.value);
   };
   const passwordChangeHandler = (e) => {
     setPassword(e.target.value);
   };
 
-  const submitHandler = async (e) => {
-    e.preventDefault();
+  const submitHandler = async () => {
     const options = {
       url: "https://urlshortdev.herokuapp.com/api/v2/users/login",
       method: "POST",
@@ -28,40 +30,51 @@ const Login = (props) => {
         password,
       },
     };
-    const res = await axios(options);
 
+    return await axios(options);
+  };
+
+  const promiseHandler = async (e) => {
+    e.preventDefault();
+    const res = await trackPromise(submitHandler());
     if (res.data.status === "success") {
       props.logStateHandler(true, res.data.data.user._id);
       history.replace("/");
     }
   };
 
   return (
-    <div className={classes.container}>
-      <form className={classes.form} onSubmit={submitHandler}>
-        <p>Please provide your email and password</p>
-        <label htmlFor="useremail">Email</label>
-        <input
-          type="email"
-          id="useremail"
-          placeholder="[email protected]"
-          onChange={emailChangeHandler}
-          value={email}
-        />
-        <label htmlFor="pass">Password</label>
-        <input
-          type="password"
-          id="pass"
-          onChange={passwordChangeHandler}
-          value={password}
-        />
-        <Button type="submit" text="Submit"></Button>
-        <p>Do not have a account ? Create a account here</p>
-        <NavLink to="/signup" className={classes.link}>
-          Signup
-        </NavLink>
-      </form>
-    </div>
+    <>
+      {promiseInProgress === true ? (
+        <Spinner />
+      ) : (
+        <div className={classes.container}>
+          <form className={classes.form} onSubmit={promiseHandler}>
+            <p>Please provide your email and password</p>
+            <label htmlFor="useremail">Email</label>
+            <input
+              type="email"
+              id="useremail"
+              placeholder="[email protected]"
+              onChange={emailChangeHandler}
+              value={email}
+            />
+            <label htmlFor="pass">Password</label>
+            <input
+              type="password"
+              id="pass"
+              onChange={passwordChangeHandler}
+              value={password}
+            />
+            <Button type="submit" text="Submit"></Button>
+            <p>Do not have a account ? Create a account here</p>
+            <NavLink to="/signup" className={classes.link}>
+              Signup
+            </NavLink>
+          </form>
+        </div>
+      )}
+    </>
   );
 };
 

src/pages/Signup.js

@@ -3,15 +3,18 @@ import axios from "axios";
 import classes from "./Signup.module.css";
 import { useHistory } from "react-router-dom";
 import Button from "../UI/Button";
+import { usePromiseTracker } from "react-promise-tracker";
+import { trackPromise } from "react-promise-tracker";
+import Spinner from "../components/Spinner";
 
 const Signup = (props) => {
-  console.log(props);
   const [name, setName] = React.useState("");
   const [email, setEmail] = React.useState("");
   const [password, setPassword] = React.useState("");
   const [passwordConfirm, setConfirmPassword] = React.useState("");
   const history = useHistory();
-
+  const { promiseInProgress } = usePromiseTracker();
+
   const nameChangeHandler = (e) => {
     setName(e.target.value);
   };
@@ -25,8 +28,7 @@ const Signup = (props) => {
     setConfirmPassword(e.target.value);
   };
 
-  const submitHandler = async (e) => {
-    e.preventDefault();
+  const submitHandler = async () => {
     const options = {
       url: "https://urlshortdev.herokuapp.com/api/v2/users/signup",
       method: "POST",
@@ -38,50 +40,60 @@ const Signup = (props) => {
         confirmPassword: passwordConfirm,
       },
     };
-    const res = await axios(options);
-    console.log(res);
+    return await axios(options);
+  };
+
+  const promiseHandler = async (e) => {
+    e.preventDefault();
+    const res = await trackPromise(submitHandler());
     if (res.data.status === "success") {
       props.logStateHandler(true, res.data.data.newUser._id);
       history.replace("/");
     }
   };
 
   return (
-    <div className={classes.container}>
-      <form className={classes.form} onSubmit={submitHandler}>
-        <p>Please provide your details</p>
-        <label htmlFor="name">Name</label>
-        <input
-          type="text"
-          id="name"
-          placeholder="Akshay"
-          onChange={nameChangeHandler}
-          value={name}
-        />
-        <label htmlFor="useremail">Email</label>
-        <input
-          type="email"
-          id="useremail"
-          placeholder="[email protected]"
-          onChange={emailChangeHandler}
-          value={email}
-        />
-        <label htmlFor="pass">Password</label>
-        <input
-          type="password"
-          id="pass"
-          onChange={passwordChangeHandler}
-          value={password}
-        />
-        <label htmlFor="confirm">Confirm Password</label>
-        <input
-          type="password"
-          id="confirm"
-          onChange={passCheckChangeHandler}
-        ></input>
-        <Button type="submit" text="Submit"></Button>
-      </form>
-    </div>
+    <>
+      {promiseInProgress === true ? (
+        <Spinner />
+      ) : (
+        <div className={classes.container}>
+          <form className={classes.form} onSubmit={promiseHandler}>
+            <p>Please provide your details</p>
+            <label htmlFor="name">Name</label>
+            <input
+              type="text"
+              id="name"
+              placeholder="Akshay"
+              onChange={nameChangeHandler}
+              value={name}
+            />
+            <label htmlFor="useremail">Email</label>
+            <input
+              type="email"
+              id="useremail"
+              placeholder="[email protected]"
+              onChange={emailChangeHandler}
+              value={email}
+            />
+            <label htmlFor="pass">Password</label>
+            <input
+              type="password"
+              id="pass"
+              onChange={passwordChangeHandler}
+              value={password}
+            />
+            <label htmlFor="confirm">Confirm Password</label>
+            <input
+              type="password"
+              id="confirm"
+              onChange={passCheckChangeHandler}
+            ></input>
+            <Button type="submit" text="Submit"></Button>
+          </form>
+        </div>
+      )}
+    </>
   );
 };