Skip to content

Commit

Permalink
update validation and home buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@codelover1226
codelover1226 committed May 2, 2024
1 parent 29a64f3 commit b6333cd
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 122 deletions.
12 changes: 4 additions & 8 deletions src/components/Button/CustomButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,22 @@ function CustomButton({ label, width, backgroundColor, fontColor, outline, centr

const handleMouseEnter = () => {
setHovered(true);
console.log("1");
};

const handleMouseLeave = () => {
setHovered(false);
console.log("0");
};

const customStyles = {
width: width,
backgroundColor: !hovered ? backgroundColor : '#F1ECE2',
color: !hovered? fontColor : '#153644',
border: outline ? `1px solid #F1ECE2` : 'none',
cursor: 'pointer',
transition: 'background-color 0.3s ease',
transition: 'background-color 0.3s ease, color 0.3s ease',
padding: '2px',
textAlign: "center",
margin: centre ? 'auto' : 'none'
margin: centre ? 'auto' : 'none',
color: !hovered? fontColor : '#153644'
};

return (
Expand All @@ -33,9 +31,7 @@ function CustomButton({ label, width, backgroundColor, fontColor, outline, centr
onMouseLeave={handleMouseLeave}
onClick={onClick}
>
<p style={{ color: !hovered? fontColor : '#153644' }}>
{label}
</p>
{label}
</div>
);
}
Expand Down
20 changes: 13 additions & 7 deletions src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import Typography from "@mui/material/Typography";
import { Button } from "@material-tailwind/react";
import Sidebar from "./Sidebar";
import "./menu.css";
import { Link, useNavigate } from "react-router-dom";
import { Link, useNavigate, useLocation } from "react-router-dom";

export default function Header() {
const navigate = useNavigate()
const [isScrolled, setIsScrolled] = React.useState(false);
Expand All @@ -17,17 +18,22 @@ export default function Header() {
}
ref.current.log();
};
const handleScroll = () => {
const isScrolled = window.scrollY > 50;
setIsScrolled(isScrolled);
};

const location = useLocation();

React.useEffect(() => {
const handleScroll = () => {
const isScrolled = window.scrollY > 50;
setIsScrolled(isScrolled);
};

openDrawer()
document.addEventListener("scroll", handleScroll);

return () => {
document.removeEventListener("scroll", handleScroll);
};
}, []);
}, [location]);
return (
<div>
<div className="z-[9997] fixed w-full">
Expand Down Expand Up @@ -76,7 +82,7 @@ export default function Header() {
</Typography>
<Button
color="white"
className="text-center rounded-none h-9 ml-7 mr-10 hover:bg-brown-300"
className="text-center rounded-none h-9 ml-7 mr-10 hover:bg-brown-300 animate-duration"
onClick={() => navigate("/contact")}
>
CONTACT
Expand Down
153 changes: 95 additions & 58 deletions src/pages/contact/contact.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,111 @@ import React, { useState } from "react";
import DropDownSelect from "../../components/Form/DropDownSelect";
import Input from "../../components/Form/Input";
import CustomButton from "./../../components/Button/CustomButton";
import { isEmail, isEmpty, getLength, isValidName } from "../../utils/validation";
import "./contact.css";

export default function Contact() {
const [agent, setAgent] = useState("");
const [price, setPrice] = useState("");
const [residences, setResidences] = useState("");
const [firstname, setFirstName] = useState("");
const [lastname, setLastName] = useState("");
const [email, setEmail] = useState("");
const [comment, setComment] = useState("");
const [instagram, setInstagram] = useState("");
const [errors, setErrors] = useState({});

const [forms, setForms] = useState({
firstname : "",
lastname: "",
email: "",
comment: "",
instagram: "",
agent: "",
price: "",
residences: ""
})
const [errors, setErrors] = useState({
});

const onValueChange = (value, id) => {
switch (id) {
case "firstname":
setFirstName(value);
setForms({...forms, [id]: value});
if(!isEmpty(value)){
setErrors({ ...errors, [id]: "" });
}
break;
case "lastname":
setLastName(value);
setForms({...forms, [id]: value});
if(!isEmpty(value)){
setErrors({ ...errors, [id]: "" });
}
break;
case "email":
setEmail(value);
if(!isEmpty(value)) {
if(isEmail(value)){
setErrors({ ...errors, [id]: "" });
} else {
setErrors({ ...errors, [id]: "Input Valid Email"})
}
}

setForms({...forms, [id]: value});
break;
case "comment":
setComment(value);
setForms({...forms, [id]: value});
if(!isEmpty(value)){
setErrors({ ...errors, [id]: "" });
}
break;
case "instagram":
setInstagram(value);
if(!isEmpty(value)){
setErrors({ ...errors, [id]: "" });
}
setForms({...forms, [id]: value});
break;
default:
return;
}
if (!value.trim()) {
setErrors({ ...errors, [id]: "" });

setErrors({ ...errors, [id]: "This field is required." });
}
};
const handleDropdownChange = (event) => {
switch (event.target.id) {
case "agent":
setAgent(event.target.value);
setForms({...forms, [event.target.id]: event.target.value});
break;
case "price":
setPrice(event.target.value);
setForms({...forms, [event.target.id]: event.target.value});
break;
case "residences":
setResidences(event.target.value);
setForms({...forms, [event.target.id]: event.target.value});
break;
default:
return;
}

if(!isEmpty(event.target.value)){
setErrors({ ...errors, [event.target.id]: ""})
}
};
const onSubmit = (event) => {
event.preventDefault();
const requiredFields = ["firstname", "lastname", "email", "comment"];
const allRequiredFilled = requiredFields.every((id) => {
switch (id) {
case "firstname":
return firstname.trim() !== "";
case "lastname":
return lastname.trim() !== "";
case "email":
return email.trim() !== "";
case "comment":
return comment.trim() !== "";
default:
return true;
for (let key in forms) {
if(key === "firstname" || key === "lastname"){
if(!isValidName(forms[key])){
setErrors(prevErrors => ({...prevErrors, [key]: "Input valid name" }));
}
}
if(key === "email"){
if(!isEmail(forms[key])){
setErrors(prevErrors => ({...prevErrors, [key]: "Input valid email" }));
}
}
if (isEmpty(forms[key])) {
setErrors(prevErrors => ({...prevErrors, [key]: "This field is required" }));
}
}
const allValid = Object.values(forms).every((field) =>!isEmpty(field));
if(allValid){
if (Object.values(errors).every(value => isEmpty(value))) {
console.log("success");
}
});

if (!allRequiredFilled) {
alert("Please fill out all required fields.");
return;
}

console.log(agent, price, residences);
};
const priceOptions = [
{ value: "", label: "Price" },
Expand All @@ -98,8 +125,8 @@ export default function Contact() {
];
const agentOptions = [
{ value: "", label: "Agent" },
{ value: true, label: "Yes" },
{ value: false, label: "No" },
{ value: "true", label: "Yes" },
{ value: "false", label: "No" },
];

return (
Expand All @@ -115,77 +142,87 @@ export default function Contact() {
</p>
</div>
<div className="px-4 md:w-1/2 mb-6">
<form className="space-y-0">
<div className="w-full py-1">
<form className="space-y-2">
<div className="w-full py-1 relative">
<Input
placeholder="FIRST NAME*"
onValueChange={onValueChange}
id={"firstname"}
/>
{errors.firstName && <p>{errors.firstName}</p>}
{errors.firstname && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.firstname}</p>}
</div>
<div className="w-full py-1">
<div className="w-full py-1 relative">
<Input
placeholder="LAST NAME*"
onValueChange={onValueChange}
id={"lastname"}
/>
{errors.lastname && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.lastname}</p>}
</div>
<div className="w-full py-1">
<div className="w-full py-1 relative">
<Input
placeholder="EMAIL*"
onValueChange={onValueChange}
type={"email"}
id={"email"}
/>
{errors.email && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.email}</p>}
</div>
<div className="w-full py-1">
<div className="w-full py-1 relative">
<DropDownSelect
options={priceOptions}
onChange={handleDropdownChange}
id={"price"}
/>
{errors.price && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.price}</p>}
</div>

<div className="w-full py-1">
<div className="w-full py-1 relative">
<DropDownSelect
options={residencesOptions}
onChange={handleDropdownChange}
id={"residences"}
/>
{errors.residences && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.residences}</p>}
</div>

<div className="w-full py-1">
<div className="w-full py-1 relative">
<DropDownSelect
options={agentOptions}
onChange={handleDropdownChange}
id={"agent"}
/>
{errors.agent && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.agent}</p>}
</div>

<div className="w-full py-1">
<div className="w-full py-1 relative">
<Input
placeholder="COMMENT*"
onValueChange={onValueChange}
id={"comment"}
/>
{errors.comment && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.comment}</p>}
</div>

<div className="w-full py-1">
<div className="w-full py-1 relative">
<Input
placeholder="INSTAGRAM HANDLE*"
onValueChange={onValueChange}
id={"instagram"}
/>
{errors.instagram && <p className="float-right text-red-600 text-[12px] absolute -bottom-3 left-0">{errors.instagram}</p>}
</div>
<div className="pt-5">
<CustomButton
backgroundColor="#153644"
outline={false}
label="Submit"
fontColor="#F1ECE2"
width={150}
onClick={onSubmit}
/>
</div>
<CustomButton
backgroundColor="#153644"
outline={false}
label="Submit"
fontColor="#F1ECE2"
width={150}
onClick={onSubmit}
/>

</form>
</div>
<div className="px-4 md:w-1/5">
Expand Down
Loading

0 comments on commit b6333cd

Please sign in to comment.