fix: validate jwt only once at start (#19)

Signed-off-by: Chirag Ghosh <[email protected]>
metakgp · Jul 2, 2024 · d42b9cc · d42b9cc
1 parent e364fdc
commit d42b9cc
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 35 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -2,26 +2,11 @@ import { Toaster } from "react-hot-toast";
 import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
 import Form from "./Form";
 import Services from "./Services";
-import { useEffect, useState } from "react";
-import { BACKEND_URL } from "./constants";
+import { useState } from "react";
 
 function App() {
-    const [email, setEmail] = useState("");
     const [isAuthenticated, setIsAuthenticated] = useState(false);
 
-    useEffect(() => {
-        fetch(`${BACKEND_URL}/validate-jwt`, { credentials: "include" }).then(
-            (response) => {
-                if (response.ok) {
-                    response.json().then((data) => {
-                        setEmail(data.email);
-                        setIsAuthenticated(true);
-                    });
-                }
-            },
-        );
-    }, [email, isAuthenticated]);
-
     return (
         <>
             <BrowserRouter>
@@ -32,8 +17,6 @@ function App() {
                             <Form
                                 isAuthenticated={isAuthenticated}
                                 setIsAuthenticated={setIsAuthenticated}
-                                email={email}
-                                setEmail={setEmail}
                             />
                         }
                     />

diff --git a/frontend/src/Form.tsx b/frontend/src/Form.tsx
@@ -5,36 +5,52 @@ import { BACKEND_URL } from "./constants";
 import Success from "./Success";
 
 type FormProps = {
-    isAuthenticated: boolean
-    setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>
-    email: string
-    setEmail: React.Dispatch<React.SetStateAction<string>>
-}
+    isAuthenticated: boolean;
+    setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
+};
 
-const Form = ({isAuthenticated, setIsAuthenticated, email, setEmail }: FormProps) => {
+const Form = ({ isAuthenticated, setIsAuthenticated }: FormProps) => {
+    const [email, setEmail] = useState("");
     const [otpRequested, setOtpRequested] = useState(false);
     const [otp, setOtp] = useState("");
     const [timer, setTimer] = useState("01:00");
     const [timerStart, setTimerStart] = useState<number | null>(null);
 
+    useEffect(() => {
+        fetch(`${BACKEND_URL}/validate-jwt`, { credentials: "include" }).then(
+            (response) => {
+                if (response.ok) {
+                    response.json().then((data) => {
+                        setEmail(data.email);
+                        setIsAuthenticated(true);
+                    });
+                }
+            },
+        );
+    }, []);
+
     useEffect(() => {
         if (!otpRequested || timerStart === null) return;
 
-        // const startTime = Date.now(); 
+        // const startTime = Date.now();
         const countdown = setInterval(() => {
-            const totalSeconds = Math.max(60 - Math.floor((Date.now() - timerStart) / 1000), 0);
+            const totalSeconds = Math.max(
+                60 - Math.floor((Date.now() - timerStart) / 1000),
+                0,
+            );
             const minutes = Math.floor(totalSeconds / 60);
             const seconds = totalSeconds % 60;
-          setTimer(
-             (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds)
+            setTimer(
+                (minutes > 9 ? minutes : "0" + minutes) +
+                    ":" +
+                    (seconds > 9 ? seconds : "0" + seconds),
             );
             if (minutes === 0 && seconds === 0) {
-              clearInterval(countdown);
+                clearInterval(countdown);
             }
-          }, 1000);
-          return () => clearInterval(countdown); 
-        }, [otpRequested, timerStart]);
-
+        }, 1000);
+        return () => clearInterval(countdown);
+    }, [otpRequested, timerStart]);
 
     const requestOTP = () => {
         if (validateEmail(email)) {
@@ -54,7 +70,8 @@ const Form = ({isAuthenticated, setIsAuthenticated, email, setEmail }: FormProps
                         setTimerStart(Date.now());
                         setTimer("01:00");
                     } else {
-                        response.text().then((msg) => {  // Show message to user in case he refreshes page and attempts to request otp again
+                        response.text().then((msg) => {
+                            // Show message to user in case he refreshes page and attempts to request otp again
                             toast.error(msg, {
                                 id: loadingToast,
                             });
@@ -128,7 +145,19 @@ const Form = ({isAuthenticated, setIsAuthenticated, email, setEmail }: FormProps
                             placeholder="Enter OTP"
                         />
                         <button onClick={verifyOTP}>Verify</button>
-                        {timer==="00:00"?<button onClick={requestOTP}>Resend OTP</button>:<button style={{backgroundColor:"#f2b183", cursor:"wait"}}disabled={true}>{timer}</button>}
+                        {timer === "00:00" ? (
+                            <button onClick={requestOTP}>Resend OTP</button>
+                        ) : (
+                            <button
+                                style={{
+                                    backgroundColor: "#f2b183",
+                                    cursor: "wait",
+                                }}
+                                disabled={true}
+                            >
+                                {timer}
+                            </button>
+                        )}
                     </>
                 ) : (
                     <button onClick={requestOTP}>Send OTP</button>