Compare commits

...

5 Commits

+15 -4
View File
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Link, useLocation, useNavigate } from "react-router-dom";
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
@@ -8,6 +8,9 @@ import AuthLayout from "../AuthLayout";
export default function SignUp() {
const queryParams = new URLSearchParams(location?.search);
const country = queryParams.get("cnt")?.toUpperCase();
const {pathname} = useLocation()
const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
const [signUpLoading, setSignUpLoading] = useState(false);
const [checked, setValue] = useState(false);
@@ -50,8 +53,12 @@ export default function SignUp() {
const { signup_country } = await res.data;
// setCountries(signup_country);
if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
let cnt = signup_country.filter(item => item[0]==country)
return setCountries({loading: false, data: cnt.length ? signup_country.filter(item => item[0]==country) : signup_country});
let cnt = signup_country.filter(item => item[0]==country) // test to see country passed in query param exist from list of countries supplied by API
if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
setFormData(prev => ({...prev, country: ''}))
return setCountries({loading: false, data: signup_country});
}
return setCountries({loading: false, data: cnt});
}
setCountries({loading: false, data:signup_country});
} else if (res.data.result !== 100) {
@@ -142,7 +149,7 @@ export default function SignUp() {
<AuthLayout slogan="Welcome to WrenchBoard">
<div className="w-full">
<div className="mb-5">
<Link to="#">
<Link to={currentPath}>
<img
src={WrenchBoard}
alt="wrenchboard"
@@ -180,6 +187,7 @@ export default function SignUp() {
name="country"
value={formData.country}
inputHandler={handleInputChange}
disable={country && countries?.data?.length <= 1 ? true : false}
/>
<div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
<div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
@@ -314,6 +322,7 @@ export default function SignUp() {
<div className="signin-area mb-1">
<div className="flex justify-center">
<button
disabled={countries.loading}
type="button"
onClick={handleSignUp}
className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
@@ -341,6 +350,7 @@ const SelectOption = ({
inputHandler,
value,
data, // passing the data from parent
disable
}) => {
return (
<div className="input-com mb-7">
@@ -354,6 +364,7 @@ const SelectOption = ({
</div>
<div>
<select
disabled={disable}
name={name}
id={name}
className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "