refactor: fetch email as search query in forgot password view

Author: bishalshrestha013

packages/user/src/components/ForgotPasswordForm/index.tsx

@@ -1,24 +1,23 @@
 import { Provider, emailSchema } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import React from "react";
-import { useLocation } from "react-router-dom";
 import * as zod from "zod";
 
 import { ForgotPasswordFormFields } from "./ForgotPasswordFormFields";
 
 interface Properties {
   handleSubmit: (email: string) => void;
   loading?: boolean;
+  email?: string;
 }
 
-export const ForgotPasswordForm = ({ handleSubmit, loading }: Properties) => {
+export const ForgotPasswordForm = ({
+  handleSubmit,
+  loading,
+  email,
+}: Properties) => {
   const { t, i18n } = useTranslation("user");
 
-  const location = useLocation();
-
-  const searchParameters = new URLSearchParams(location.search);
-  const email = searchParameters.get("email");
-
   const ForgotPasswordFormSchema = zod.object({
     email: emailSchema({
       required: t("validation.messages.email"),
@@ -32,7 +31,7 @@ export const ForgotPasswordForm = ({ handleSubmit, loading }: Properties) => {
       onSubmit={(data) => handleSubmit(data.email)}
       validationTriggerKey={i18n.language}
       defaultValues={{
-        email: email,
+        email,
       }}
     >
       <ForgotPasswordFormFields loading={loading} />

packages/user/src/views/ForgotPassword.tsx

@@ -1,20 +1,24 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { AuthPage } from "@prefabs.tech/react-ui";
 import { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
 
+import { ForgotPasswordForm } from "../components/ForgotPasswordForm";
+
 import { AuthLinks } from "@/components/AuthLinks";
 import { DEFAULT_PATHS } from "@/constants";
 import { useConfig } from "@/hooks";
 import { forgotPassword } from "@/supertokens";
 import { LinkType } from "@/types/types";
 
-import { ForgotPasswordForm } from "../components/ForgotPasswordForm";
-
 export const ForgotPassword = ({ centered = true }: { centered?: boolean }) => {
   const { t } = useTranslation("user");
   const [loading, setLoading] = useState<boolean>(false);
 
+  const [searchParameters] = useSearchParams();
+  const email = searchParameters.get("email") ?? undefined;
+
   const config = useConfig();
 
   const links: Array<LinkType> = [
@@ -43,7 +47,11 @@ export const ForgotPassword = ({ centered = true }: { centered?: boolean }) => {
       className="forgot-password"
       title={t("forgotPassword.title")}
     >
-      <ForgotPasswordForm handleSubmit={handleSubmit} loading={loading} />
+      <ForgotPasswordForm
+        handleSubmit={handleSubmit}
+        loading={loading}
+        email={email}
+      />
       <AuthLinks className="forgot-password" links={links} />
     </AuthPage>
   );