From a1801bcea3fb4a69995635f549d454c8740f79cb Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:54:54 +0530
Subject: [PATCH 1/8] added swr

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 5eb2a7f..f99be9b 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "recharts": "^2.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.3.0",
+    "swr": "^1.0.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.9"

From 7530611053248053e6effb3ca33fac70577e2f05 Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:55:02 +0530
Subject: [PATCH 2/8] added swr

---
 yarn.lock | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 3493fef..59ec191 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4441,6 +4441,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -11271,6 +11276,13 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.0.1.tgz#15f62846b87ee000e52fa07812bb65eb62d79483"
+  integrity sha512-EPQAxSjoD4IaM49rpRHK0q+/NzcwoT8c0/Ylu/u3/6mFj/CWnQVjNJ0MV2Iuw/U+EJSd2TX5czdAwKPYZIG0YA==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

From a3195dab93f8ea421f7082d0bedd3f2a21579777 Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:55:20 +0530
Subject: [PATCH 3/8] changed certificate verify url

---
 src/components/Certificate.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Certificate.tsx b/src/components/Certificate.tsx
index 63b7baa..2c21e84 100644
--- a/src/components/Certificate.tsx
+++ b/src/components/Certificate.tsx
@@ -52,7 +52,9 @@ const Certificate = ({
           </h5>
           <h5 className="verification-web-site">
             Verify the authenticity of the certificate at:
-            <span> www.certify.com/certificate/verify</span>
+            <span>
+              {`  https://symetry-certify-frontend.herokuapp.com/certificate/verify`}
+            </span>
           </h5>
         </div>
       </div>

From 24b20fd2029d89b33c8aeb748acaaa8649f23d61 Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:56:02 +0530
Subject: [PATCH 4/8] added caching and loading effects

---
 src/components/CertificateTable.tsx |  32 +++++---
 src/components/UserProfile.tsx      | 119 ++++++++++++++++------------
 src/components/UserTable.tsx        |  39 +++++----
 3 files changed, 117 insertions(+), 73 deletions(-)

diff --git a/src/components/CertificateTable.tsx b/src/components/CertificateTable.tsx
index a49924c..8640924 100644
--- a/src/components/CertificateTable.tsx
+++ b/src/components/CertificateTable.tsx
@@ -23,6 +23,10 @@ import colors from "../data/colors";
 import moment from "moment";
 import useLocalStorage from "../utils/useLocalStorage";
 import useBadge from "../utils/useBadge";
+import useSWR from "swr";
+import requests from "../data/requests";
+import axios from "../utils/axios";
+import useAxios from "../utils/axios";
 
 const getRow = (
   certificateId: string,
@@ -58,16 +62,24 @@ const CertificateTable = () => {
   const history = useHistory();
   const { getAdmin } = useLocalStorage();
   const { CertificateCategoryBadge } = useBadge();
+  const axios = useAxios();
 
-  useEffect(() => {
-    fetchCertificates()
-      .then((res) => {
-        setCertficates(toCertificateTableData(res.data));
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }, []);
+  const { data } = useSWR(requests.fetchCertificates, (url: string) =>
+    axios
+      .get(url)
+      .then((r) => toCertificateTableData(r.data))
+      .catch((err) => console.error(err))
+  );
+
+  // useEffect(() => {
+  //   fetchCertificates()
+  //     .then((res) => {
+  //       setCertficates(toCertificateTableData(res.data));
+  //     })
+  //     .catch((err) => {
+  //       console.error(err);
+  //     });
+  // }, []);
 
   type CertificateTableRow = {
     id: string;
@@ -235,7 +247,7 @@ const CertificateTable = () => {
       }}
     >
       <DataGrid
-        rows={certificates}
+        rows={data || []}
         columns={columns}
         pageSize={5}
         rowsPerPageOptions={[5]}
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index f6dce3b..36a0bc3 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -7,6 +7,7 @@ import {
   Tabs,
   Tab,
   AppBar,
+  CircularProgress,
 } from "@material-ui/core";
 import React, { useEffect, useState } from "react";
 import { useHistory } from "react-router";
@@ -25,21 +26,38 @@ interface UserProfileProps {
   id: number;
 }
 
+const Loading = () => {
+  return (
+    <div
+      style={{
+        marginLeft: "45%",
+        marginTop: "30%",
+      }}
+    >
+      <CircularProgress />
+      <p>Loading</p>
+    </div>
+  );
+};
+
 const UserProfile: React.FC<UserProfileProps> = ({ open, onClose, id }) => {
   const [user, setUser] = useState<UserDto>();
   const [certificates, setCertificates] = useState<CertificateDto[]>();
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const { VerifiedBadge, CertifiedBadge } = useBadge();
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     if (open) {
+      setLoading(true);
       fetchUser(id)
         .then((res) => {
           setUser(res.data);
         })
         .catch((err) => {
           console.error(err);
-        });
+        })
+        .finally(() => setLoading(false));
 
       fetchCertificatesByUser(id)
         .then((res) => {
@@ -74,58 +92,61 @@ const UserProfile: React.FC<UserProfileProps> = ({ open, onClose, id }) => {
           </AppBar>
 
           <div className="user-profile-dialog__body">
-            {selectedTab === 0 && (
-              <div className="user-profile-dialog__info">
-                <section className="info__badges-container">
-                  <h5>Badges</h5>
-                  <div className="badges">
-                    <VerifiedBadge verified={user?.emailVerified!} />
-                    <CertifiedBadge certified={user?.certified!} />
-                  </div>
-                </section>
-
-                <section className="info__info-container">
-                  <div className="set-1">
-                    <div className="set__left-col">
-                      <p className="key">First Name</p>
-                      <p className="key">Last Name</p>
-                      <p className="key">Role</p>
-                      <p className="key">Birthday</p>
-                      <p className="key">Email</p>
-                      <p className="key">Phone</p>
-                    </div>
-                    <div className="set__right-col">
-                      <p className="value">{user?.fname}</p>
-                      <p className="value">{user?.lname}</p>
-                      <p className="value">{user?.role}</p>
-                      <p className="value">{user?.birthday}</p>
-                      <p className="value">{user?.email}</p>
-                      <p className="value">{user?.phone}</p>
+            {selectedTab === 0 &&
+              (!loading ? (
+                <div className="user-profile-dialog__info">
+                  <section className="info__badges-container">
+                    <h5>Badges</h5>
+                    <div className="badges">
+                      <VerifiedBadge verified={user?.emailVerified!} />
+                      <CertifiedBadge certified={user?.certified!} />
                     </div>
-                  </div>
+                  </section>
 
-                  <div className="set-2">
-                    {user?.address && (
-                      <div className="descriptive-section">
-                        <p className="key">Address</p>
-                        <p className="descriptive-section__value">
-                          {user?.address}
-                        </p>
+                  <section className="info__info-container">
+                    <div className="set-1">
+                      <div className="set__left-col">
+                        <p className="key">First Name</p>
+                        <p className="key">Last Name</p>
+                        <p className="key">Role</p>
+                        <p className="key">Birthday</p>
+                        <p className="key">Email</p>
+                        <p className="key">Phone</p>
                       </div>
-                    )}
-
-                    {user?.description && (
-                      <div className="descriptive-section">
-                        <p className="key">Description</p>
-                        <p className="descriptive-section__value">
-                          {user?.description}
-                        </p>
+                      <div className="set__right-col">
+                        <p className="value">{user?.fname}</p>
+                        <p className="value">{user?.lname}</p>
+                        <p className="value">{user?.role}</p>
+                        <p className="value">{user?.birthday}</p>
+                        <p className="value">{user?.email}</p>
+                        <p className="value">{user?.phone}</p>
                       </div>
-                    )}
-                  </div>
-                </section>
-              </div>
-            )}
+                    </div>
+
+                    <div className="set-2">
+                      {user?.address && (
+                        <div className="descriptive-section">
+                          <p className="key">Address</p>
+                          <p className="descriptive-section__value">
+                            {user?.address}
+                          </p>
+                        </div>
+                      )}
+
+                      {user?.description && (
+                        <div className="descriptive-section">
+                          <p className="key">Description</p>
+                          <p className="descriptive-section__value">
+                            {user?.description}
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </section>
+                </div>
+              ) : (
+                <Loading />
+              ))}
             {selectedTab === 1 && (
               <div className="user-profile-dialog__certificates">
                 {certificates?.length !== 0 ? (
diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
index 0267e4e..bf72eea 100644
--- a/src/components/UserTable.tsx
+++ b/src/components/UserTable.tsx
@@ -27,6 +27,9 @@ import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import UserProfile from "./UserProfile";
 import useLocalStorage from "../utils/useLocalStorage";
 import useBadge from "../utils/useBadge";
+import useSWR from "swr";
+import requests from "../data/requests";
+import useAxios from "../utils/axios";
 
 const getRow = (
   id: string,
@@ -57,7 +60,7 @@ const rows = [
 ];
 
 const UserTable = () => {
-  const [users, setUsers] = useState<UserDto[]>([]);
+  //const [users, setUsers] = useState<UserDto[]>([]);
   const [selectedUserId, setSelectedUserId] = useState<number>();
   const [redirect, setRedirect] = useState<boolean>(false);
   const [openConfirmBox, setOpenConfirmBox] = useState<boolean>(false);
@@ -72,27 +75,35 @@ const UserTable = () => {
   const [openUserProfile, setOpenUserProfile] = useState<boolean>(false);
   const { getAdmin } = useLocalStorage();
   const { StatusBadge } = useBadge();
+  const axios = useAxios();
 
-  useEffect(() => {
-    fetchUsers()
-      .then((res) => {
-        setUsers(toUserDtos(res.data));
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }, []);
+  const { data: users } = useSWR(requests.fetchUsers, (url: string) =>
+    axios
+      .get(url)
+      .then((r) => toUserDtos(r.data))
+      .catch((err) => console.error(err))
+  );
+
+  // useEffect(() => {
+  //   fetchUsers()
+  //     .then((res) => {
+  //       setUsers(toUserDtos(res.data));
+  //     })
+  //     .catch((err) => {
+  //       console.error(err);
+  //     });
+  // }, []);
 
   const handleViewClick = (event: React.MouseEvent<unknown>, id: number) => {
     // set current user in redux store
-    setUser(users.find((u) => u.id === id)!);
+    setUser(users?.find((u) => u.id === id)!);
     setSelectedUserId(id);
     setOpenUserProfile(true);
   };
 
   const handleEditClick = (event: React.MouseEvent<unknown>, id: number) => {
     // set current user in redux store
-    setUser(users.find((u) => u.id === id)!);
+    setUser(users?.find((u) => u.id === id)!);
 
     setSelectedUserId(id);
     setRedirect(true);
@@ -110,7 +121,7 @@ const UserTable = () => {
         });
 
         // removing the item from the table
-        setUsers(users.filter((u) => u.id !== id));
+        //setUsers(users.filter((u) => u.id !== id));
 
         // if the deleted user is the current user in redux store. delete it
         if (currentUser?.id === id) removeUser();
@@ -225,7 +236,7 @@ const UserTable = () => {
       }}
     >
       <DataGrid
-        rows={users}
+        rows={users || []}
         columns={columns}
         pageSize={5}
         rowsPerPageOptions={[5]}

From a43993a7f33304b862d9b52cab5cbecc3100fac1 Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:56:15 +0530
Subject: [PATCH 5/8] added caching

---
 src/screens/Activity.tsx | 50 +++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/screens/Activity.tsx b/src/screens/Activity.tsx
index eb515aa..9a8e40f 100644
--- a/src/screens/Activity.tsx
+++ b/src/screens/Activity.tsx
@@ -7,6 +7,14 @@ import ActivityDto from "../types/models/ActivityDto";
 import { fetchActivities } from "../utils/requestHelper";
 import useLocalStorage from "../utils/useLocalStorage";
 
+import { bindActionCreators } from "redux";
+import { actionCreators } from "../redux";
+import { useDispatch } from "react-redux";
+
+import useSWR from "swr";
+import requests from "../data/requests";
+import useAxios from "../utils/axios";
+
 import "./Activity.css";
 
 export interface ActivityWrapper {
@@ -18,20 +26,36 @@ export interface ActivityWrapper {
 
 const Activity = () => {
   const { getAdmin } = useLocalStorage();
+  const dispatch = useDispatch();
+  const { setLoading } = bindActionCreators(actionCreators, dispatch);
+  const axios = useAxios();
+
+  //const [activities, setActivities] = useState<ActivityWrapper>();
+
+  const { data: activities } = useSWR(requests.fetchActivities, (url: string) =>
+    axios
+      .get(url, {
+        params: {
+          admin_id: getAdmin().id,
+        },
+      })
+      .then((r) => r.data)
+      .catch((err) => console.error(err))
+  );
 
-  const [activities, setActivities] = useState<ActivityWrapper>();
-
-  useEffect(() => {
-    if (getAdmin().id !== null) {
-      fetchActivities(parseInt(getAdmin().id!))
-        .then((res) => {
-          setActivities(res.data);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    }
-  }, []);
+  // useEffect(() => {
+  //   if (getAdmin().id !== null) {
+  //     setLoading(true);
+  //     fetchActivities(parseInt(getAdmin().id!))
+  //       .then((res) => {
+  //         setActivities(res.data);
+  //       })
+  //       .catch((err) => {
+  //         console.error(err);
+  //       })
+  //       .finally(() => setLoading(false));
+  //   }
+  // }, []);
 
   return (
     <div className="activity-screen">

From 4b85f9714c026f57adb1cebf1b9bd51e3421083d Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:56:35 +0530
Subject: [PATCH 6/8] added loading effects and form behaviours

---
 src/screens/CertficateVerification.tsx | 48 ++++++++++++++++----------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/screens/CertficateVerification.tsx b/src/screens/CertficateVerification.tsx
index 60206bb..4dbde06 100644
--- a/src/screens/CertficateVerification.tsx
+++ b/src/screens/CertficateVerification.tsx
@@ -8,12 +8,23 @@ import { useButtonStyles } from "../data/styles";
 import { validateCertificate } from "../utils/requestHelper";
 import { Redirect } from "react-router";
 
+import { bindActionCreators } from "redux";
+import { actionCreators } from "../redux";
+import { useDispatch, useSelector } from "react-redux";
+import { ReducerType } from "../redux/store";
+
 const CertificateVerification = () => {
   const buttonStyles = useButtonStyles();
   const [verified, setVerified] = useState<boolean>(false);
   const [id, setId] = useState<string>("");
+  const dispatch = useDispatch();
+  const { setLoading } = bindActionCreators(actionCreators, dispatch);
+  const loading = useSelector(
+    (state: ReducerType) => state.loadingReducer.loading
+  );
 
   const handleValidate = async () => {
+    setLoading(true);
     validateCertificate(id)
       .then((res) => {
         console.log(res);
@@ -24,7 +35,8 @@ const CertificateVerification = () => {
       .catch((err) => {
         setVerified(false);
         console.error(err);
-      });
+      })
+      .finally(() => setLoading(false));
   };
   console.log(verified);
 
@@ -39,24 +51,22 @@ const CertificateVerification = () => {
         </label>
         <h2>Verify a certificate</h2>
 
-        <div className="form">
-          <TextField
-            label="Enter Certificate ID"
-            name="certificateId"
-            helperText="The Certificate ID can be found at the bottom of each certificate."
-            value={id}
-            onChange={(e) => setId(e.target.value)}
-            //error={!!id}
-          />
-          <Button
-            className={buttonStyles.standardBtn}
-            onClick={(e) => {
-              handleValidate();
-            }}
-          >
-            Validate
-          </Button>
-        </div>
+        <form onSubmit={handleValidate}>
+          <div className="form">
+            <TextField
+              label="Enter Certificate ID"
+              name="certificateId"
+              helperText="The Certificate ID can be found at the bottom of each certificate."
+              value={id}
+              required
+              autoComplete="off"
+              onChange={(e) => setId(e.target.value)}
+            />
+            <Button className={buttonStyles.standardBtn} type="submit">
+              Validate
+            </Button>
+          </div>
+        </form>
       </div>
     </div>
   );

From e0ccdb91167f6a8ccf4b30324bbccc76811a8b80 Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:56:47 +0530
Subject: [PATCH 7/8] added loading effects

---
 src/screens/CertificateView.tsx | 81 ++++++++++++++++++++++-----------
 1 file changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/screens/CertificateView.tsx b/src/screens/CertificateView.tsx
index 84d28ed..0e924e6 100644
--- a/src/screens/CertificateView.tsx
+++ b/src/screens/CertificateView.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
@@ -44,6 +45,12 @@ import {
   WhatsappShareButton,
 } from "react-share";
 import useBadge from "../utils/useBadge";
+import LoadingLinearProgress from "../components/LoadingLinearProgress";
+
+import { bindActionCreators } from "redux";
+import { actionCreators } from "../redux";
+import { useDispatch, useSelector } from "react-redux";
+import { ReducerType } from "../redux/store";
 
 const CertificateView = () => {
   const [certificate, setCertificate] = useState<CertificateDto>();
@@ -53,6 +60,11 @@ const CertificateView = () => {
   const buttonStyles = useButtonStyles();
   const { VerifiedBadge, StatusBadge } = useBadge();
   const SHARE_ICON_SIZE = 36;
+  const dispatch = useDispatch();
+  const { setLoading } = bindActionCreators(actionCreators, dispatch);
+  const loading = useSelector(
+    (state: ReducerType) => state.loadingReducer.loading
+  );
 
   useEffect(() => {
     const currentUrl = window.location.href;
@@ -63,9 +75,13 @@ const CertificateView = () => {
     );
     console.log(certificateIdFromUrl);
 
-    fetchCertificate(certificateIdFromUrl).then((res) => {
-      setCertificate(getCertificateDto(res.data));
-    });
+    setLoading(true);
+    fetchCertificate(certificateIdFromUrl)
+      .then((res) => {
+        setCertificate(getCertificateDto(res.data));
+      })
+      .catch((err) => console.error(err))
+      .finally(() => setLoading(false));
   }, []);
 
   const handleDownload = () => {
@@ -85,32 +101,43 @@ const CertificateView = () => {
 
   return (
     <div className="certificate-view">
-      <div className="certificate-view__content">
-        <div id="certificate" className="certificate-container">
-          <Certificate certificate={certificate} />
+      <LoadingLinearProgress />
+      {loading ? (
+        <div style={{ color: "black", textAlign: "center", marginTop: "10em" }}>
+          <CircularProgress />
+          <p>Loading. Moment Please...</p>
         </div>
-        <div className="actions-container">
-          <Button className={buttonStyles.standardBtn} onClick={handleDownload}>
-            <GetAppIcon />
-            Download
-          </Button>
-          <Button
-            variant="contained"
-            style={{ textTransform: "capitalize" }}
-            onClick={() => setShareDialogOpen(!shareDialogOpen)}
-          >
-            <ShareIcon />
-            Share
-          </Button>
-          <Button
-            style={{ textTransform: "capitalize" }}
-            variant="contained"
-            onClick={() => certificate && setDrawerOpen(!drawerOpen)}
-          >
-            More Info <NavigateNextIcon />
-          </Button>
+      ) : (
+        <div className="certificate-view__content">
+          <div id="certificate" className="certificate-container">
+            <Certificate certificate={certificate} />
+          </div>
+          <div className="actions-container">
+            <Button
+              className={buttonStyles.standardBtn}
+              onClick={handleDownload}
+            >
+              <GetAppIcon />
+              Download
+            </Button>
+            <Button
+              variant="contained"
+              style={{ textTransform: "capitalize" }}
+              onClick={() => setShareDialogOpen(!shareDialogOpen)}
+            >
+              <ShareIcon />
+              Share
+            </Button>
+            <Button
+              style={{ textTransform: "capitalize" }}
+              variant="contained"
+              onClick={() => certificate && setDrawerOpen(!drawerOpen)}
+            >
+              More Info <NavigateNextIcon />
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
 
       <SwipeableDrawer
         open={drawerOpen}

From 55003883180fc39de0954f06cdf701eccce2e67f Mon Sep 17 00:00:00 2001
From: tharinda <tharindahp@gmail.com>
Date: Sat, 25 Sep 2021 21:57:08 +0530
Subject: [PATCH 8/8] added loading effects

---
 src/screens/Signin.tsx | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/screens/Signin.tsx b/src/screens/Signin.tsx
index 877d5a2..8c66155 100644
--- a/src/screens/Signin.tsx
+++ b/src/screens/Signin.tsx
@@ -1,7 +1,7 @@
-import { Button, Checkbox, TextField, Typography } from "@material-ui/core";
+import { Button, CircularProgress, TextField } from "@material-ui/core";
 import { useFormik } from "formik";
 import React, { useState } from "react";
-import { Link, Redirect } from "react-router-dom";
+import { Redirect } from "react-router-dom";
 import { useButtonStyles, useTextfieldStyles } from "../data/styles";
 
 import "./Signin.css";
@@ -12,24 +12,29 @@ import logo from "../assets/logo/logo.png";
 import useAuth from "../utils/useAuth";
 
 import * as yup from "yup";
-import colors from "../data/colors";
 import useTokenService from "../utils/useTokenService";
 import { bindActionCreators } from "redux";
 import { actionCreators } from "../redux";
 import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
+import { ReducerType } from "../redux/store";
 
 const Signin = () => {
   const [success, setSuccess] = useState<boolean>(false);
   const buttonStyles = useButtonStyles();
   const { signin } = useAuth();
   const styles = useTextfieldStyles();
+  const dispatch = useDispatch();
+  const { setLoading } = bindActionCreators(actionCreators, dispatch);
+  const loading = useSelector(
+    (state: ReducerType) => state.loadingReducer.loading
+  );
 
   const userValidationSchema = yup.object().shape({
     username: yup.string().required("Username is required"),
     password: yup.string().required("Password is required"),
   });
   const { setAccessToken } = useTokenService();
-  const dispatch = useDispatch();
   const { setAdmin } = bindActionCreators(actionCreators, dispatch);
 
   const formik = useFormik({
@@ -40,7 +45,8 @@ const Signin = () => {
       //rememberMe: true,
     },
     validationSchema: userValidationSchema,
-    onSubmit: (values) => {
+    onSubmit: async (values) => {
+      setLoading(true);
       signin(values)
         .then((res) => {
           if (res.status === 200) {
@@ -52,7 +58,8 @@ const Signin = () => {
         .catch((err) => {
           setSuccess(false);
           console.error(err);
-        });
+        })
+        .finally(() => setLoading(false));
     },
   });
 
@@ -105,7 +112,7 @@ const Signin = () => {
                   InputProps={{ className: styles.input }}
                 />
 
-                <div className="special-actions">
+                {/* <div className="special-actions">
                   <div style={{ display: "flex", alignItems: "center" }}>
                     <Checkbox color="primary" />
                     <Typography style={{ color: colors.secondaryFontClr }}>
@@ -118,9 +125,18 @@ const Signin = () => {
                       Forgot password?
                     </Typography>
                   </Link>
-                </div>
-                <Button className={buttonStyles.standardBtn} type="submit">
-                  Login
+                </div> */}
+                <Button
+                  className={buttonStyles.standardBtn}
+                  type="submit"
+                  disabled={loading}
+                  startIcon={
+                    loading ? (
+                      <CircularProgress size="1rem" color="secondary" />
+                    ) : null
+                  }
+                >
+                  {loading ? "Submitting" : "Login"}
                 </Button>
               </div>
             </form>