Resend Token Core Component

src/components/login-navy/SendToken.jsx

@@ -1,6 +1,7 @@
 import Notifications from "@/core/components/notifications";
+import ResendToken from "@/core/components/ResendToken";
 import StyledForm from "@/core/components/StyledForm";
-import { LOGIN, LOGIN_SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
+import { LOGIN } from "@/core/data/apiRoutes";
 import CenterLayout from "@/layouts/CenterLayout";
 import FullPageLayout from "@/layouts/FullPageLayout";
 import useDirection from "@/lib/app/hooks/useDirection";
@@ -11,21 +12,24 @@ import {
   Box,
   Button,
   Container,
-  Grid,
+  Grid, Paper,
-  Link,
-  Paper,
   Stack,
   TextField,
-  Typography,
+  Typography
 } from "@mui/material";
 import axios from "axios";
 import { Field, Formik } from "formik";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import { useEffect } from "react";
 import * as Yup from "yup";
 
-const SendToken = ({ PhoneNumber, setOtpToken, timer, setTimer }) => {
+const SendToken = ({
+  PhoneNumber,
+  setOtpToken,
+  timer,
+  setTimer,
+  initialTimerValue,
+}) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
   const { setToken } = useUser();
@@ -57,36 +61,6 @@ const SendToken = ({ PhoneNumber, setOtpToken, timer, setTimer }) => {
       });
   };
 
-  useEffect(() => {
-    let interval;
-    if (timer > 0) {
-      interval = setInterval(() => {
-        setTimer((prevTimer) => prevTimer - 1);
-      }, 1000);
-    } else {
-      clearInterval(interval);
-    }
-
-    return () => clearInterval(interval);
-  }, [timer]);
-
-  const handleResendClick = async () => {
-    // work on it
-    if (timer != 0) return  
-    Notifications(directionApp, t, undefined);
-    await axios
-      .post(LOGIN_SEND_OTP_TOKEN, {
-        phone_number: PhoneNumber,
-      })
-      .then(function (response) {
-        Notifications(directionApp, t, response);
-        setTimer(30);
-      })
-      .catch(function (error) {
-        Notifications(directionApp, t, error.response);
-      });
-  };
-
   return (
     <FullPageLayout sx={{ p: 1 }}>
       <CenterLayout>
@@ -169,18 +143,12 @@ const SendToken = ({ PhoneNumber, setOtpToken, timer, setTimer }) => {
                           </Button>
                         </Grid>
                       </Grid>
-                      <Typography
+                      <ResendToken
-                        variant={"button"}
+                        initialTimerValue={initialTimerValue}
-                        sx={{ cursor: "pointer", textAlign: "center" }}
+                        timer={timer}
-                        onClick={handleResendClick}
+                        setTimer={setTimer}
-                        underline="hover"
+                        PhoneNumber={PhoneNumber}
-                      >
+                      />
-                        {timer > 0
-                          ? `${t("LoginPage.Resend_code_in")}: ${timer} ${t(
-                              "LoginPage.seconds_later"
-                            )}`
-                          : t("LoginPage.resend_code")}
-                      </Typography>
                     </Stack>
                   </StyledForm>
                 </Stack>

src/components/login-navy/SendUserData.jsx

@@ -15,7 +15,7 @@ import {
   Paper,
   Stack,
   TextField,
-  Typography
+  Typography,
 } from "@mui/material";
 import axios from "axios";
 import { Field, Formik } from "formik";
@@ -24,7 +24,13 @@ import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import * as Yup from "yup";
 
-const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
+const SendUserData = ({
+  setOtpToken,
+  setPhoneNumber,
+  PhoneNumber,
+  setTimer,
+  initialTimerValue,
+}) => {
   const t = useTranslations();
   const { directionApp } = useDirection();
 
@@ -48,6 +54,7 @@ const SendUserData = ({ setOtpToken, setPhoneNumber, PhoneNumber }) => {
         Notifications(directionApp, t, response);
         setPhoneNumber(values.phone_number);
         setOtpToken(true);
+        setTimer(initialTimerValue);
       })
       .catch(function (error) {
         Notifications(directionApp, t, error.response);

src/components/login-navy/index.jsx

@@ -5,7 +5,11 @@ import SendToken from "./SendToken";
 const LoginComponent = () => {
   const [otpToken, setOtpToken] = useState(false);
   const [PhoneNumber, setPhoneNumber] = useState("");
-  const [timer, setTimer] = useState(30);
+
+  // For Resend Token (read ResendToken Component Doc)
+  const initialTimerValue = 30;
+  const [timer, setTimer] = useState(initialTimerValue);
+  // End For Resend Token
 
   if (!otpToken) {
     return (
@@ -13,6 +17,8 @@ const LoginComponent = () => {
         setOtpToken={setOtpToken}
         setPhoneNumber={setPhoneNumber}
         PhoneNumber={PhoneNumber}
+        initialTimerValue={initialTimerValue}
+        setTimer={setTimer}
       />
     );
   } else {
@@ -21,6 +27,7 @@ const LoginComponent = () => {
         PhoneNumber={PhoneNumber}
         setOtpToken={setOtpToken}
         timer={timer}
+        initialTimerValue={initialTimerValue}
         setTimer={setTimer}
       />
     );

src/core/components/ResendToken.jsx

@@ -0,0 +1,77 @@
+import Notifications from "@/core/components/notifications";
+import useDirection from "@/lib/app/hooks/useDirection";
+import { Typography } from "@mui/material";
+import axios from "axios";
+import { useTranslations } from "next-intl";
+import { useEffect } from "react";
+import { LOGIN_SEND_OTP_TOKEN } from "../data/apiRoutes";
+
+const ResendToken = ({ initialTimerValue, timer, setTimer, PhoneNumber }) => {
+  const t = useTranslations();
+  const { directionApp } = useDirection();
+
+  // Countdown Timer
+  useEffect(() => {
+    let interval;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prevTimer) => prevTimer - 1);
+      }, 1000);
+    } else {
+      clearInterval(interval);
+    }
+
+    return () => clearInterval(interval);
+  }, [timer]);
+  // End Countdown Timer
+
+  // Handle Resend Token
+  const handleResendClick = async () => {
+    // work on it
+    if (timer != 0) return;
+    Notifications(directionApp, t, undefined);
+    await axios
+      .post(LOGIN_SEND_OTP_TOKEN, {
+        phone_number: PhoneNumber,
+      })
+      .then(function (response) {
+        Notifications(directionApp, t, response);
+        setTimer(initialTimerValue);
+      })
+      .catch(function (error) {
+        Notifications(directionApp, t, error.response);
+      });
+  };
+  // End Handle Resend Token
+
+  return (
+    <>
+      {timer > 0 ? (
+        <Typography variant={"button"} sx={{ textAlign: "center" }}>
+          {t("LoginPage.Resend_code_in")}: {timer}
+          {t("LoginPage.seconds_later")}
+        </Typography>
+      ) : (
+        <Typography
+          variant={"button"}
+          sx={{ cursor: "pointer", textAlign: "center" }}
+          onClick={handleResendClick}
+          underline="hover"
+        >
+          {t("LoginPage.resend_code")}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+export default ResendToken;
+
+
+//////****** usage document ******/////////
+// 1.) use <ResendToken /> component inside your page
+// 2.) list of props that you need to send is down below
+// 2.1) initialTimerValue **** Delay Time For Sending Token
+// 2.2) timer **** Timer Of Resending Token
+// 2.3) setTimer **** Set Timer Of Resend (note: every places in your components if you are requesting for getting token you should use this prop like this setTimer(initialTimerValue) )
+// 2.4) PhoneNumber **** Phone Number That Should Recive Token

src/core/components/notifications/index.jsx

@@ -4,7 +4,6 @@ import SuccessNotification from "./SuccessNotification";
 import WarningNotification from "./WarningNotification";
 
 const Notifications = async (directionApp, t, response) => {
-  console.log(directionApp, t, response);
   const { status, data } = response != undefined ? response : ""
   toast.dismiss();
   switch (status) {