From 7396c18a3a180e442032fe6c47d7fac4240c2002 Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Tue, 17 Sep 2024 10:00:00 +0330 Subject: [PATCH] build bugs fixed state mangment optimized --- src/app/(account-pages)/account/page.tsx | 48 +++----- src/app/(account-pages)/my-trips/page.tsx | 10 +- .../passengers-list/PassengerTable.tsx | 45 +++++--- .../(account-pages)/passengers-list/page.tsx | 2 - .../(client-components)/(Header)/MainNav1.tsx | 15 +-- .../[[...stepIndex]]/PageAddListing1.tsx | 12 +- src/app/add-listing/[[...stepIndex]]/page.tsx | 4 +- src/app/add-new-passenger/page.tsx | 3 +- src/app/custom-history/page.tsx | 18 +-- src/app/custom-trip/page.tsx | 3 +- src/app/forgot-password/page.tsx | 16 +-- src/app/login/page.tsx | 109 +++++++----------- src/app/signup/methodes/page.tsx | 95 ++++++++++----- src/app/signup/otp-code/page.tsx | 43 ++++--- src/app/signup/page.tsx | 10 +- src/components/contexts/userContext.tsx | 39 +++++-- 16 files changed, 255 insertions(+), 217 deletions(-) diff --git a/src/app/(account-pages)/account/page.tsx b/src/app/(account-pages)/account/page.tsx index dcf5072..1a22ace 100644 --- a/src/app/(account-pages)/account/page.tsx +++ b/src/app/(account-pages)/account/page.tsx @@ -1,5 +1,6 @@ "use client"; -import React, { useState, ChangeEvent, FC } from "react"; + +import React, { useState, ChangeEvent, FC, useEffect } from "react"; import Label from "@/components/Label"; import Avatar from "@/shared/Avatar"; import ButtonPrimary from "@/shared/ButtonPrimary"; @@ -36,21 +37,23 @@ interface APIResponse { const AccountPage: FC = () => { const router = useRouter(); + const { user, setUser, clerUser } = useUserContext(); - const storedUser = localStorage.getItem("user"); - let user: User | null = storedUser ? JSON.parse(storedUser) : null; - - if (!user) { - router.replace("/"); - return null; // Prevent rendering if no user data is found - } + // Redirect to home if user object is empty + useEffect(() => { + if (!Object.keys(user).length) { + router.replace("/"); + } + }, [user, router]); - const { setStatus } = useUserContext(); + // Return null to avoid rendering when redirecting + // if (!Object.keys(user).length) { + // return null; + // } const [name, setName] = useState(user.fullname || ""); const [email, setEmail] = useState(user.email || ""); const [number, setNumber] = useState(user.phone_number || ""); - const [password, setPassword] = useState(""); const [image, setImage] = useState(null); const [imageURL, setImageURL] = useState(null); const [error, setError] = useState(""); @@ -66,9 +69,7 @@ const AccountPage: FC = () => { }, }); if (response.status === 204) { - localStorage.removeItem("user"); - setStatus(false); - router.replace("/"); + clerUser(); } else { setError("Something went wrong"); } @@ -84,9 +85,7 @@ const AccountPage: FC = () => { }; const signOutHandler = (): void => { - localStorage.removeItem("user"); - setStatus(false); - router.replace("/"); + clerUser(); }; const changeHandler = async (): Promise => { @@ -96,7 +95,6 @@ const AccountPage: FC = () => { const formData = new FormData(); formData.append("fullname", name); formData.append("email", email); - formData.append("password", password); if (imageURL) { formData.append("avatar", imageURL); } @@ -113,14 +111,13 @@ const AccountPage: FC = () => { } ); if (response.status === 200) { - user = { + setUser({ ...user, avatar: response.data.avatar, email: response.data.email, fullname: response.data.fullname, phone_number: response.data.phone_number, - }; - localStorage.setItem("user", JSON.stringify(user)); + }); } else { setError("Something went wrong"); } @@ -171,7 +168,6 @@ const AccountPage: FC = () => { strokeLinejoin="round" /> - Change Image = () => { type="text" /> -
- - setPassword(e.target.value)} - type="password" - className="mt-1.5" - /> -
- {error &&

{error}

}
Update info diff --git a/src/app/(account-pages)/my-trips/page.tsx b/src/app/(account-pages)/my-trips/page.tsx index 47f47bb..3bc0104 100644 --- a/src/app/(account-pages)/my-trips/page.tsx +++ b/src/app/(account-pages)/my-trips/page.tsx @@ -13,11 +13,19 @@ import React, { Fragment, useEffect, useState } from "react"; import ButtonSecondary from "@/shared/ButtonSecondary"; import axiosInstance from "@/components/api/axios"; import StayCard2 from "@/components/StayCard2"; +import { useRouter } from "next/navigation"; const MyTrips = () => { - const user = JSON.parse(localStorage.getItem("user")); + const router = useRouter() let [categories] = useState(["Stays", "Experiences", "Cars"]); let [tours , setTours] = useState([]); + const [ user ] =useState() + + if(!user){ + router.replace("/") + return null + } + useEffect(() => { axiosInstance .get("/api/tours/orders/", { diff --git a/src/app/(account-pages)/passengers-list/PassengerTable.tsx b/src/app/(account-pages)/passengers-list/PassengerTable.tsx index ef7858d..3401402 100644 --- a/src/app/(account-pages)/passengers-list/PassengerTable.tsx +++ b/src/app/(account-pages)/passengers-list/PassengerTable.tsx @@ -1,30 +1,36 @@ +"use client"; import axiosInstance from "@/components/api/axios"; -import React, { useState } from "react"; +import { useUserContext } from "@/components/contexts/userContext"; +import React, { useEffect, useState } from "react"; import { IoMdTrash } from "react-icons/io"; import { MdEdit } from "react-icons/md"; -const PassengerTable = ({data}) => { -const user = JSON.parse(localStorage.getItem("user")) +const PassengerTable = ({ data }) => { + const { user } = useUserContext(); -const [show , setShow] =useState(true) + const [show, setShow] = useState(true); - const deletHandler = async ()=>{ - try{ - const response = await axiosInstance.delete(`/api/account/passengers/${data.id}/` ,{ - headers :{ - Authorization : `token ${user.token}` - } - }) - setShow(false) - - }catch (error){ + const deletHandler = async () => { + try { + const response = await axiosInstance.delete( + `/api/account/passengers/${data.id}/`, + { + headers: { + Authorization: `token ${user.token}`, + }, + } + ); + setShow(false); + } catch (error) { console.log(error); - - } - } + }; return ( -
+
{/* Passenger Information */}

@@ -39,7 +45,8 @@ const [show , setShow] =useState(true)

diff --git a/src/app/custom-trip/page.tsx b/src/app/custom-trip/page.tsx index f67b3c2..44652e6 100644 --- a/src/app/custom-trip/page.tsx +++ b/src/app/custom-trip/page.tsx @@ -7,6 +7,7 @@ import FormItem from "../add-listing/FormItem"; import Select from "@/shared/Select"; import Input from "@/shared/Input"; import { useRouter } from "next/navigation"; +import { useUserContext } from "@/components/contexts/userContext"; interface City { name: string; @@ -21,7 +22,7 @@ interface Country { interface CommonLayoutProps {} const CommonLayout: FC = () => { - const user = JSON.parse(localStorage.getItem("user")); + const {user} = useUserContext() const router = useRouter() diff --git a/src/app/forgot-password/page.tsx b/src/app/forgot-password/page.tsx index f5309ef..0c22d42 100644 --- a/src/app/forgot-password/page.tsx +++ b/src/app/forgot-password/page.tsx @@ -36,34 +36,30 @@ const PageSignUp: FC = ({}) => { }; const submitHandler = async ( - name, countryCode, phoneNumber, password, confirmPassword ) => { const form = { - name, + verification_methodes : "" , + method : "reset" , countryCode, phoneNumber, password, confirmPassword, }; - if (validateForm(form)) { - setForm(form); await axiosInstance .get(`/api/account/verfication/?range_phone=${countryCode}&phone_number=${phoneNumber}`) .then((response) => { - setMethod(response.data.verification_method) + form.verification_methodes = response.data.verification_method + setForm(form) + router.push("/signup/methodes") }) .catch((error) => { console.error("Error fetching data:", error); }); - router.push("/signup/methodes") - } else { - console.log('Form has errors:', errors); - } }; return ( @@ -133,7 +129,7 @@ const PageSignUp: FC = ({}) => { { e.preventDefault(); - submitHandler(name, countryCode, phoneNumber, password, confirmPassword); + submitHandler(countryCode, phoneNumber, password, confirmPassword); }} > Continue diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index c6e316e..b8cd078 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,61 +1,58 @@ "use client"; -import React, { FC, useContext, useState } from "react"; -import googleSvg from "@/images/Google.svg"; +import React, { FC, useState, useEffect } from "react"; import Input from "@/shared/Input"; import ButtonPrimary from "@/shared/ButtonPrimary"; -import Image from "next/image"; import Link from "next/link"; import axiosInstance from "@/components/api/axios"; import { useRouter } from "next/navigation"; import { useUserContext } from "@/components/contexts/userContext"; -export interface PageLoginProps {} -const PageLogin: FC = ({}) => { +export interface PageLoginProps {} +const PageLogin: FC = () => { + const { user, setUser } = useUserContext(); const router = useRouter(); - let user = JSON.parse(localStorage.getItem("user")); - if (user) { - return router.replace("/") - } - const { setStatus } = useUserContext(); - - const [phoneNumber, setPhoneNumber] = useState(""); - const [password, setPassword] = useState(""); - const [countryCode, setCountryCode] = useState(); - const [error, setError] = useState(); - + const [phoneNumber, setPhoneNumber] = useState(""); + const [password, setPassword] = useState(""); + const [countryCode, setCountryCode] = useState(""); + const [error, setError] = useState(""); + // Redirect to home if the user is already logged in + useEffect(() => { + if (Object.keys(user).length) { + router.replace("/"); + } + }, [user, router]); - const countryCodeHandler = (e) => { + const countryCodeHandler = (e: React.ChangeEvent) => { if (e.target.value.length <= 3) { setCountryCode(e.target.value); } }; - const submitHandler = async (phoneNumber, password) => { + const submitHandler = async () => { setError(""); - await axiosInstance - .post(`/api/account/login/`, { + try { + const response = await axiosInstance.post(`/api/account/login/`, { phone_number: phoneNumber, password, - }) - .then((response) => { - if (response.status === 201) { - - localStorage.setItem("user", JSON.stringify(response.data)); - setStatus(true) - - - } else { - setError("something went wrong"); - } - }) - .catch((error) => { - setError(error.message) }); + + if (response.status === 201) { + setUser(response.data); + } else { + setError("Something went wrong"); + } + } catch (error) { + if (error instanceof Error) { + setError(error.message); + } else { + setError("An unknown error occurred"); + } + } }; return ( @@ -65,36 +62,23 @@ const PageLogin: FC = ({}) => { Login
- {/* Email/Password Form */} -
+ e.preventDefault()}>