Untitled
unknown
jsx
2 years ago
5.2 kB
4
Indexable
Never
import Input from "@/components/atoms/Input"; import React from "react"; import styles from "./Form.module.scss"; import form from "../../../data/global/form"; import { useState, useEffect } from "react"; import Container from "@/components/atoms/Container"; import Button from "@/components/atoms/Button"; import AddressList from "../AddressList"; import Fader from "@/components/atoms/Fader"; const Form = () => { const [postcode, setPostcode] = useState(null); const [postcodeReturned, setPostcodeReturned] = useState([]); const [addressList, setAddressList] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const [isManual, setIsManual] = useState(false); const [finalData, setFinalData] = useState({}); const [formLast, setFormLast] = useState({}); const postcodeRef = React.createRef(); const formRef = React.createRef(); useEffect(() => { // console.log("Final data:", finalData); let data = JSON.parse(localStorage.getItem("Form")); console.log("Local storage", data); setFormLast({ email: data.email, }); }, []); const handleFindAddress = (e) => { e.preventDefault(); setIsManual(false); postcode != null && fetchPostcodeData(postcode); setAddressList(!addressList); }; const handleManualAddress = () => { setIsManual(!isManual); }; const handleFormSubmit = (e) => { e.preventDefault(); let form = { email: e.target[0].value, password: e.target[1].value, confirmPass: e.target[2].value, firstName: e.target[3].value, lastName: e.target[4].value, firstLine: e.target[5].value, secondLine: e.target[6].value, thirdLine: e.target[7].value, town: e.target[8].value, country: e.target[9].value, postcode: postcode, }; if (e.target[1].value !== e.target[2].value) { setErrorMessage("Passwords do not match, try again"); e.target[1].style.border = "1px red solid"; e.target[2].style.border = "1px red solid"; } else { setFinalData(form); localStorage.setItem("Form", JSON.stringify(form)); setFormToStorage(e); } }; const setFormToStorage = (form) => { let data = JSON.parse(localStorage.getItem("Form")); form.target[0].value = data.email; form.target[1].value = data.password; }; const handleChange = (e) => { setPostcode(e.target.value); }; const formatData = (data) => { let formattedData = data?.map((val) => val .split(",") .filter((x) => x.trim().length !== 0) .join(",") ); return formattedData; }; const fetchPostcodeData = (postcode) => { fetch(`https://api.getAddress.io/find/${postcode}?api-key=${process.env.NEXT_PUBLIC_API_URL}`) .then((res) => res.json()) .then((result) => setPostcodeReturned(formatData(result.addresses))) .catch((error) => (setErrorMessage("Error connecting to network"), console.log(error))); }; return ( <form onSubmit={(e) => handleFormSubmit(e)} ref={formRef}> <section className={styles.form}> {form.primary?.map((item) => ( <Input label={item.label} type={item.type} icon={item.hasIcon} /> ))} {isManual ? ( <Container className={styles.manualAddress}> <Input label={"Adress line 1"} type={"text"} value={formLast?.firstLine} /> <Input label={"Adress line 2 (optional)"} type={"text"} /> <Input label={"Adress line 3 (optional)"} type={"text"} /> <Input label={"Town or City"} type={"text"} value={formLast?.town} /> <Input label={"Country"} type={"text"} value={formLast?.county} /> </Container> ) : ( <Container className={styles.postcode}> <Container className={styles.postcode_input}> <Input label={"Postcode"} onChange={(e) => handleChange(e)} onClick={() => setAddressList(false)} ref={postcodeRef} id={"postcodeInput"} /> </Container> <Container className={styles.postcode_button}> <Button label={"Find Address"} disabled={false} onClick={(e) => handleFindAddress(e)} /> </Container> </Container> )} {!addressList && ( <span onClick={handleManualAddress} className={styles.manualAddressText}> Enter address manually </span> )} {errorMessage && <Fader text={"Passwords do not match, try again..."} className={styles.error} />} {addressList && ( <AddressList addresses={postcodeReturned} postcode={postcode} isPopulated={addressList} addressList={addressList} setIsManual={setIsManual} setAddressList={setAddressList} setFormLast={setFormLast} /> )} <Container className={styles.signup}> <Button label={"Sign Up"} disabled={false} className={styles.postcode_signup} type={"submit"} /> </Container> </section> </form> ); }; export default Form;