WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added the email and offed the autocomplete attr for the component

Browse Source
This commit was merged in pull request #567.
This commit is contained in:
Chukwumdiebube Ojinta
2024-02-04 00:29:09 +01:00
parent 6268d68b67
commit 77ac52820d
4 changed files with 146 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/SignUp/index2.jsx
+73 -58
View File
@@ -9,19 +9,21 @@ export default function SignUp() {
// eslint-disable-next-line no-restricted-globals
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 { 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);
// for the catch error
const [msgError, setMsgError] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [countries, setCountries] = useState({loading:true, data:[]});
const [countries, setCountries] = useState({ loading: true, data: [] });
const [formData, setFormData] = useState({
country: country? country : "",
country: country ? country : "",
first_name: "",
last_name: "",
email: "",
@@ -47,22 +49,23 @@ export default function SignUp() {
// Get Country Api
const getCountryList = useCallback(async () => {
try {
const res = await userApi.getSignupCountryData();
if (res.status === 200 && res.data.internal_return >= 0) {
const { result_list } = await res.data;
if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
let cnt = result_list.filter(item => item.code == 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: result_list});
if (country) {
// IF LINK/PATHNAME HAS CNT QUERY VALUE
let cnt = result_list.filter((item) => item.code == 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: result_list });
}
return setCountries({loading: false, data: cnt});
return setCountries({ loading: false, data: cnt });
}
setCountries({loading: false, data:result_list});
setCountries({ loading: false, data: result_list });
} else if (res.data.result !== 100) {
setCountries({loading: false, data:[]});
setCountries({ loading: false, data: [] });
}
} catch (error) {
throw new Error(error);
@@ -113,9 +116,7 @@ export default function SignUp() {
if (res.status === 200) {
const { data } = res;
if (data && data.acc === "DULPICATE") {
setMsgError(
"Unable to use this username. Please try another username."
);
setMsgError("Duplicate username. Please try another email.");
setSignUpLoading(false);
}
if (data && data.status === "1") {
@@ -124,6 +125,11 @@ export default function SignUp() {
setSignUpLoading(false);
}, 2000);
}
if (data && data.status === "5") {
setMsgError("Something went wrong. Please try another email.");
setSignUpLoading(false);
}
} else {
setSignUpLoading(false);
setMsgError("An error occurred");
@@ -187,7 +193,9 @@ export default function SignUp() {
name="country"
value={formData.country}
inputHandler={handleInputChange}
disable={country && countries?.data?.length <= 1 ? true : false}
disable={
country && countries?.data?.length <= 1 ? true : false
}
/>
<div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
<div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
@@ -339,27 +347,40 @@ export default function SignUp() {
{/* APP DOWNLOAD STORE */}
<div className="w-full mt-4">
<div className="w-full flex justify-center items-center gap-4">
<div className='w-28 lg:w-32'>
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_APPLE_APP}>
<i className="fa-brands fa-apple text-3xl"></i>
<div className="flex flex-col">
<span className="text-[11px]">Available on the</span>
<span className="text-[12px] lg:text-base">App Store</span>
</div>
</a>
</div>
<div className='w-28 lg:w-32'>
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
<i className="fa-brands fa-google-play text-2xl"></i>
<div className="flex flex-col">
<span className="text-[11px]">Available on the</span>
<span className="text-[12px] lg:text-base">Google Play</span>
</div>
</a>
</div>
<div className="w-28 lg:w-32">
<a
className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
target="_blank"
href={process.env.REACT_APP_APPLE_APP}
rel="noreferrer"
>
<i className="fa-brands fa-apple text-3xl"></i>
<div className="flex flex-col">
<span className="text-[11px]">Available on the</span>
<span className="text-[12px] lg:text-base">
App Store
</span>
</div>
</a>
</div>
<div className="w-28 lg:w-32">
<a
className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
target="_blank"
href={process.env.REACT_APP_ANDROID_APP}
rel="noreferrer"
>
<i className="fa-brands fa-google-play text-2xl"></i>
<div className="flex flex-col">
<span className="text-[11px]">Available on the</span>
<span className="text-[12px] lg:text-base">
Google Play
</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -375,7 +396,7 @@ const SelectOption = ({
inputHandler,
value,
data, // passing the data from parent
disable
disable,
}) => {
return (
<div className="input-com mb-7">
@@ -389,39 +410,33 @@ const SelectOption = ({
</div>
<div>
<select
disabled={disable}
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 "
onChange={inputHandler}
value={value}
>
{data?.data?.length > 1 ?
{data?.data?.length > 1 ? (
<>
<option value={""}>Select your Country</option>
{data?.data?.map((item) => (
<option value={item.code} key={item.uid}>
{item.country}
</option>
))}
<option value={""}>Select your Country</option>
{data?.data?.map((item) => (
<option value={item.code} key={item.uid}>
{item.country}
</option>
))}
</>
:
data?.data?.length == 1 ?
) : data?.data?.length == 1 ? (
data?.data?.map((item) => (
<option value={item.code} key={item.uid}>
{item.country}
</option>
))
:
data?.data?.length < 1 && data.loading ?
<option value=''>
Loading...
</option>
:
<option value=''>
No Country Found!
</option>
}
) : data?.data?.length < 1 && data.loading ? (
<option value="">Loading...</option>
) : (
<option value="">No Country Found!</option>
)}
</select>
</div>
</div>