From c87fc4f32d46dce1f8c38629b1969cf17ee1570b Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 02:25:03 +0100
Subject: [PATCH 1/8] Added verify link

---
 src/components/AuthPages/VerifyLink/index.jsx | 141 ++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 src/components/AuthPages/VerifyLink/index.jsx

diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx
new file mode 100644
index 0000000..ed4b7a1
--- /dev/null
+++ b/src/components/AuthPages/VerifyLink/index.jsx
@@ -0,0 +1,141 @@
+import { useEffect, useState } from "react";
+import { useLocation, Link, useNavigate } from "react-router-dom";
+import AuthLayout from "../AuthLayout";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import usersService from "../../../services/UsersService";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
+
+export default function VerifyLink() {
+  const [pageLoader, setPageLoader] = useState(true)
+  const [linkSuccess, setLinkSuccess] = useState(false)
+  const [linkError, setLinkError] = useState(false)
+  const navigate = useNavigate()
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search)
+  const token = queryParams.get('vlink')
+
+  const verifyEmail = async (code) => {
+    const userApi = new usersService()
+
+    try {
+      const verifyRes = await userApi.verifyEmail(code)
+      console.log(verifyRes)
+      if (verifyRes.status === 200) {
+        let { data } = verifyRes
+
+        if (data && data.internal_return === 0 && data.status_text === 'Link Verfied') {
+          setPageLoader(false)
+          setLinkSuccess(true)
+        } else {
+          setPageLoader(false)
+          setLinkError(true)
+        }
+      }
+    } catch (error) {
+      console.log(error)
+      setPageLoader(false)
+      setLinkError(true)
+      throw new Error(error)
+    }
+  }
+
+  useEffect(() => {
+    verifyEmail(token)
+  })
+
+  console.log(token)
+
+  return (
+    <>
+      <AuthLayout
+        slogan="Welcome to WrenchBoard"
+      >
+        {pageLoader ? (
+          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+        ) : (
+          <div className="w-full">
+            <div className='mb-12'>
+              <Link to='#'>
+                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+              </Link>
+            </div>
+            <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+              <div className="w-full">
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                    fontSize: 'calc(1rem + .6vw)'
+                  }}>
+                    {linkError && 'Invalid verification link'}
+                    {linkSuccess && 'Sign In to WrenchBoard'}
+                  </h1>
+                </div>
+                {/* If the verification was a success */}
+                {linkSuccess && <SuccessfulComponent />}
+
+                {/* If the verification was unsuccessful */}
+                {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
+              </div>
+            </div>
+          </div>
+        )}
+      </AuthLayout>
+    </>
+  )
+}
+
+const SuccessfulComponent = ({ onClick }) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        // value={password}
+        // inputHandler={handlePassword}
+        placeholder="support@mermsemr.com"
+        label="Email"
+        name="email"
+        type="email"
+        iconName="message"
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        // value={password}
+        // inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type="password"
+        iconName="password"
+      />
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center $`}
+      >
+        <span>Continue</span>
+      </button>
+    </div>
+  </div>
+)
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already verified this link or the link has expired. Try login or reset password. If none worked, try to create the account from the start.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+)
\ No newline at end of file

From 3ed764e8f4953a6fe80e52c45f97564bbbf2e74e Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 02:28:59 +0100
Subject: [PATCH 2/8] Added a check up email v

---
 src/components/AuthPages/VerifyLink/index.jsx |  4 --
 src/components/AuthPages/VerifyYou/index.jsx  | 39 +++++++------------
 2 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx
index ed4b7a1..01d55c2 100644
--- a/src/components/AuthPages/VerifyLink/index.jsx
+++ b/src/components/AuthPages/VerifyLink/index.jsx
@@ -19,7 +19,6 @@ export default function VerifyLink() {
 
     try {
       const verifyRes = await userApi.verifyEmail(code)
-      console.log(verifyRes)
       if (verifyRes.status === 200) {
         let { data } = verifyRes
 
@@ -32,7 +31,6 @@ export default function VerifyLink() {
         }
       }
     } catch (error) {
-      console.log(error)
       setPageLoader(false)
       setLinkError(true)
       throw new Error(error)
@@ -43,8 +41,6 @@ export default function VerifyLink() {
     verifyEmail(token)
   })
 
-  console.log(token)
-
   return (
     <>
       <AuthLayout
diff --git a/src/components/AuthPages/VerifyYou/index.jsx b/src/components/AuthPages/VerifyYou/index.jsx
index 66607f0..5cf2fee 100644
--- a/src/components/AuthPages/VerifyYou/index.jsx
+++ b/src/components/AuthPages/VerifyYou/index.jsx
@@ -1,7 +1,4 @@
-import React from "react";
-import titleShape from "../../../assets/images/shape/text-shape-three.svg";
 import AuthLayout from "../AuthLayout";
-import Otp from "./Otp";
 
 export default function VerifyYou() {
   return (
@@ -9,32 +6,24 @@ export default function VerifyYou() {
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="content-wrapper xl:bg-white dark:bg-dark-white   w-full sm:w-auto px-5 xl:px-[70px] 2xl:px-[100px] h-[818px] rounded-xl flex flex-col justify-center">
-          <div>
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-8">
-              <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
-                Verification Code
+        <div className="content-wrapper login dark:bg-dark-white w-full lg:max-w-[500px] 2xl:w-[828px] rounded-xl flex flex-col justify-center sm:p-7 p-5">
+          <div className="w-full">
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+              <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                fontSize: 'calc(1rem + .6vw)'
+              }}>
+                Verification Sent
               </h1>
-              <div className="shape sm:w-[377px] w-[270px] -mt-5 ml-5">
-                <img src={titleShape} alt="shape" />
-              </div>
             </div>
             <div className="input-area">
-              <Otp />
-              <div className="signin-area mb-3.5">
-                <a
-                  href="/update-password"
-                  className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
-                >
-                  Continue
-                </a>
+              <div className="mb-5">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided.
+                </p>
               </div>
-              <div className="resend-code flex justify-center">
-                <p className="text-lg text-thin-light-gray font-normal">
-                  Dont’t have an aceount ?
-                  <a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
-                    Please resend
-                  </a>
+              <div className="mb-5">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.
                 </p>
               </div>
             </div>

From 6cb0871d3451f465d0aeb11ac4ac28164c59b354 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 02:37:04 +0100
Subject: [PATCH 3/8] added html validation

---
 .../Helpers/Inputs/InputCom/index.jsx         | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 9dd8efc..707d0cc 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import Icons from "../../Icons";
 import { Link } from "react-router-dom";
 
@@ -16,6 +16,53 @@ export default function InputCom({
   disable,
   blurHandler,
 }) {
+  const inputRef = useRef(null)
+  // Entry Validation
+  // for Min Length:
+  const minLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+      return 7
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+      return 5
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+      return 8
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+      return 1
+    }
+  }
+
+  // for MaxLength
+  const maxLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
+      return 35
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
+      return 49
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
+      return 15
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
+      return 9  
+    }
+  }
   return (
     <div className="input-com">
       <div className="flex items-center justify-between">
@@ -38,6 +85,9 @@ export default function InputCom({
           type={type}
           id={name}
           name={name}
+          minLength={minLengthValidation()}
+          maxLength={maxLengthValidation()}
+          ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
         />

From 886b73ffa35f9709a1ee6291ad892a6663f671a9 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 02:44:09 +0100
Subject: [PATCH 4/8] fixing signup

---
 src/Routers.jsx                           | 2 ++
 src/components/AuthPages/SignUp/index.jsx | 6 +++---
 src/views/VerifyLinkPages.jsx             | 5 +++++
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 src/views/VerifyLinkPages.jsx

diff --git a/src/Routers.jsx b/src/Routers.jsx
index a19959c..d7e4af7 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -30,6 +30,7 @@ import ResourcePage from "./views/ResourcePage";
 import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
+import VerifyLinkPages from "./views/VerifyLinkPages";
 
 export default function Routers() {
   return (
@@ -49,6 +50,7 @@ export default function Routers() {
           element={<UpdatePasswordPages />}
         />
         <Route exact path="/verify-you" element={<VerifyYouPages />} />
+        <Route path={`/vemail?`} element={<VerifyLinkPages />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx
index ee8732d..3099c7e 100644
--- a/src/components/AuthPages/SignUp/index.jsx
+++ b/src/components/AuthPages/SignUp/index.jsx
@@ -57,7 +57,7 @@ export default function SignUp() {
   const handleSignUp = async () => {
     let { country, first_name, last_name, email, password } = formData
 
-    if (email == '' && password == '' && first_name == '') {
+    if (email === '' && password === '' && first_name === '') {
       setMsgError('Please fill in fields')
     }
 
@@ -79,11 +79,11 @@ export default function SignUp() {
 
         if (res.status === 200) {
           const { data } = res
-          if (data.status == -1 && data.acc == 'DULPICATE') {
+          if (data.status === -1 && data.acc === 'DULPICATE') {
             setMsgError('This account has been already created')
             setSignUpLoading(false)
           }
-          if (data.status > 0 && data.internal_return == 100 && data.session != '') {
+          if (data.status > 0 && data.session !== '') {
             localStorage.setItem("email", `${data.email}`);
             localStorage.setItem("country", `${data.country}`);
             localStorage.setItem("firstname", `${data.firstname}`);
diff --git a/src/views/VerifyLinkPages.jsx b/src/views/VerifyLinkPages.jsx
new file mode 100644
index 0000000..0d25ece
--- /dev/null
+++ b/src/views/VerifyLinkPages.jsx
@@ -0,0 +1,5 @@
+import VerifyLink from "../components/AuthPages/VerifyLink";
+
+export default function VerifyLinkPages() {
+  return <VerifyLink />;
+}

From 1ad3b746101f5ed6c78b9b5b0b65d8b1e75a6927 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 08:31:25 +0100
Subject: [PATCH 5/8] added checkers

---
 src/components/AuthPages/SignUp/index.jsx     | 33 ++++++++++---------
 src/components/AuthPages/VerifyLink/index.jsx |  3 ++
 yarn.lock                                     |  5 ---
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx
index 3099c7e..549a501 100644
--- a/src/components/AuthPages/SignUp/index.jsx
+++ b/src/components/AuthPages/SignUp/index.jsx
@@ -37,7 +37,7 @@ export default function SignUp() {
 
   const navigate = useNavigate();
   const userApi = new usersService();
-  
+
   // Get Country Api
   const getCountryList = async () => {
     const res = await userApi.getSignupCountryData()
@@ -46,7 +46,7 @@ export default function SignUp() {
       if (res.status === 200) {
         const { signup_country } = await res.data
         setCountries(signup_country)
-      } else if (res.data.result != 100) {
+      } else if (res.data.result !== 100) {
         setCountries('Nothing see here!')
       }
     } catch (error) {
@@ -63,6 +63,7 @@ export default function SignUp() {
 
     try {
       if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
+        setSignUpLoading(true)
         const reqData = {
           country: country,
           firstname: first_name,
@@ -75,7 +76,6 @@ export default function SignUp() {
         }
 
         const res = await userApi.CreateUser(reqData)
-        setSignUpLoading(true)
 
         if (res.status === 200) {
           const { data } = res
@@ -83,38 +83,39 @@ export default function SignUp() {
             setMsgError('This account has been already created')
             setSignUpLoading(false)
           }
-          if (data.status > 0 && data.session !== '') {
-            localStorage.setItem("email", `${data.email}`);
-            localStorage.setItem("country", `${data.country}`);
-            localStorage.setItem("firstname", `${data.firstname}`);
-            localStorage.setItem("lastname", `${data.lastname}`);
-
+          if (data && data.status === '1') {
             setTimeout(() => {
-              navigate("/", { replace: true });
+              navigate("/verify-you", { replace: true });
               setSignUpLoading(false)
             }, 2000)
           } else {
-            setMsgError(data.status)
             setSignUpLoading(false)
+            setMsgError('This account does not exist')
           }
+        } else {
+          setSignUpLoading(false)
+          setMsgError('An error occurred')
         }
-      } else {
-        setMsgError('This account does not exist')
-        setSignUpLoading(false)
       }
     } catch (error) {
       throw new Error(error)
-      setMsgError('An error occurred')
     } finally {
       setTimeout(() => {
         setMsgError(null)
       }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
+      setFormData({
+        first_name: '',
+        last_name: '',
+        email: '',
+        country: '',
+        password: ''
+      })
     }
   }
 
   useEffect(() => {
     getCountryList()
-  }, [])
+  })
 
   return (
     <>
diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx
index 01d55c2..7d48afe 100644
--- a/src/components/AuthPages/VerifyLink/index.jsx
+++ b/src/components/AuthPages/VerifyLink/index.jsx
@@ -29,6 +29,7 @@ export default function VerifyLink() {
           setPageLoader(false)
           setLinkError(true)
         }
+        console.log(data)
       }
     } catch (error) {
       setPageLoader(false)
@@ -41,6 +42,8 @@ export default function VerifyLink() {
     verifyEmail(token)
   })
 
+  console.log(token)
+
   return (
     <>
       <AuthLayout
diff --git a/yarn.lock b/yarn.lock
index ba2acfa..b8fcbb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4810,11 +4810,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"

From d91241dad93bf70f641d0f95eedd62a435490555 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 08:34:07 +0100
Subject: [PATCH 6/8] added verify emali endpoint

---
 src/services/UsersService.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index a1fb93f..c5de5c7 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -297,6 +297,14 @@ class usersService {
         return this.postAuxEnd("/accounttypes", postData);
     }
 
+    verifyEmail(code) {
+        const reqData = {
+            verify_link: code,
+            action: 11015
+        }
+        return this.postAuxEnd("/verifysignuplink", reqData);
+    }
+
     /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

From e2b4aaa105c835243578d66deab5b7edb7e73ce2 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 10:07:10 +0100
Subject: [PATCH 7/8] added the rest

---
 src/Routers.jsx                               |  2 +-
 src/components/AuthPages/Login/index.jsx      |  1 -
 src/components/AuthPages/VerifyLink/index.jsx | 48 ++++++++++---------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/Routers.jsx b/src/Routers.jsx
index d7e4af7..061a28d 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -49,8 +49,8 @@ export default function Routers() {
           path="/update-password"
           element={<UpdatePasswordPages />}
         />
+        <Route path="/vemail" element={<VerifyLinkPages />} />
         <Route exact path="/verify-you" element={<VerifyYouPages />} />
-        <Route path={`/vemail?`} element={<VerifyLinkPages />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index 71f8c34..df34e23 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -67,7 +67,6 @@ export default function Login() {
           setLoginLoading(true);
           // userApi.getUserReminders(); //testing
           setTimeout(() => {
-            toast.success("Login Successfully");
             navigate("/", { replace: true });
             setLoginLoading(false);
           }, 2000);
diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx
index 7d48afe..567e7f5 100644
--- a/src/components/AuthPages/VerifyLink/index.jsx
+++ b/src/components/AuthPages/VerifyLink/index.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState, useLayoutEffect, useCallback } from "react";
 import { useLocation, Link, useNavigate } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -14,31 +14,33 @@ export default function VerifyLink() {
   const queryParams = new URLSearchParams(location?.search)
   const token = queryParams.get('vlink')
 
-  const verifyEmail = async (code) => {
-    const userApi = new usersService()
-
-    try {
-      const verifyRes = await userApi.verifyEmail(code)
-      if (verifyRes.status === 200) {
-        let { data } = verifyRes
-
-        if (data && data.internal_return === 0 && data.status_text === 'Link Verfied') {
-          setPageLoader(false)
-          setLinkSuccess(true)
-        } else {
-          setPageLoader(false)
-          setLinkError(true)
+  const verifyEmail = useCallback(
+    async (code) => {
+      const userApi = new usersService()
+  
+      try {
+        const verifyRes = await userApi.verifyEmail(code)
+        if (verifyRes.status === 200) {
+          let { data } = verifyRes
+  
+          if (data && data.internal_return === 0 && data.status_text === 'Link Verfied') {
+            setPageLoader(false)
+            setLinkSuccess(true)
+          } else {
+            setPageLoader(false)
+            setLinkError(true)
+          }
+          console.log(data)
         }
-        console.log(data)
+      } catch (error) {
+        setPageLoader(false)
+        setLinkError(true)
+        throw new Error(error)
       }
-    } catch (error) {
-      setPageLoader(false)
-      setLinkError(true)
-      throw new Error(error)
-    }
-  }
+    }, []
+  )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     verifyEmail(token)
   })
 

From 2b0d344dfa78a31b3defbbc3c0d6c4610ab20fb3 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 13:11:56 +0100
Subject: [PATCH 8/8] lest touch b4 pr

---
 src/components/AuthPages/Login/index.jsx      | 2 ++
 src/components/AuthPages/VerifyLink/index.jsx | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index df34e23..f06a758 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -118,6 +118,8 @@ export default function Login() {
                     iconName="message"
                   />
                 </div>
+    <input type="text" placeholder="boyce" />
+
                 <div className="input-item mb-5">
                   <InputCom
                     value={password}
diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx
index 567e7f5..70b6f5a 100644
--- a/src/components/AuthPages/VerifyLink/index.jsx
+++ b/src/components/AuthPages/VerifyLink/index.jsx
@@ -129,6 +129,7 @@ const ErrorComponent = ({ onClick }) => (
       </p>
     </div>
 
+
     <div className="signin-area flex justify-center mb-3.5">
       <button
         onClick={onClick}