ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-12 13:26:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor ContactForm

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-15 14:53:01 +02:00
parent b5706c3a2e
commit 6132ed34ca
2 changed files with 21 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
TODO.md
View file

@ -5,7 +5,7 @@
- [ ] Firebase firestore and functions - [ ] Firebase firestore and functions
- [ ] Breadcrumb - [ ] Breadcrumb
- [ ] Cookie bar - [ ] Cookie bar
- [ ] code cleanup (props and refactoring) - [x] code cleanup (props and refactoring)
- [ ] Back to top button - [ ] Back to top button
- [ ] Close Sidebar at outside click - [ ] Close Sidebar at outside click
- [ ] Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default) - [ ] Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default)

52
src/components/ContactForm.jsx
View file

@ -8,28 +8,7 @@ export const ContactForm = ({ setIsSubmitted }) => {
const [phone, setPhone] = useState(""); const [phone, setPhone] = useState("");
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const changeFirstName = ev => { const handleSubmit = (ev) => {
const { value } = ev.target;
setFirstName(value);
};
const changeLastName = ev => {
const { value } = ev.target;
setLastName(value);
};
const changePhone = ev => {
const { value } = ev.target;
setPhone(value);
};
const changeEmail = ev => {
const { value } = ev.target;
setEmail(value);
};
const changeMessage = ev => {
const { value } = ev.target;
setMessage(value);
};
const handleSubmit = ev => {
ev.preventDefault(); ev.preventDefault();
// confirmationMail(email); // confirmationMail(email);
// const body = `Sender: ${firstName} ${lastName}\nPhone: ${phone}\nMessage: ${message}`; // const body = `Sender: ${firstName} ${lastName}\nPhone: ${phone}\nMessage: ${message}`;
@ -45,14 +24,14 @@ export const ContactForm = ({ setIsSubmitted }) => {
<ContactFormInput <ContactFormInput
id="First Name" id="First Name"
value={firstName} value={firstName}
onChange={changeFirstName} dispatch={setFirstName}
/> />
</div> </div>
<div className="col s12 m6"> <div className="col s12 m6">
<ContactFormInput <ContactFormInput
id="Last Name" id="Last Name"
value={lastName} value={lastName}
onChange={changeLastName} dispatch={setLastName}
/> />
</div> </div>
<div className="col s12 m6"> <div className="col s12 m6">
@ -60,7 +39,7 @@ export const ContactForm = ({ setIsSubmitted }) => {
id="Email" id="Email"
type="email" type="email"
value={email} value={email}
onChange={changeEmail} dispatch={setEmail}
/> />
</div> </div>
<div className="col s12 m6"> <div className="col s12 m6">
@ -68,15 +47,14 @@ export const ContactForm = ({ setIsSubmitted }) => {
id="Phone" id="Phone"
value={phone} value={phone}
type="tel" type="tel"
// pattern="[0-9]" dispatch={setPhone}
onChange={changePhone}
/> />
</div> </div>
<div className="col s12"> <div className="col s12">
<ContactFormTextArea <ContactFormTextArea
id="Message" id="Message"
value={message} value={message}
onChange={changeMessage} dispatch={setMessage}
/> />
<ContactFormSubmit text="Send Message" color="orange darken-2" /> <ContactFormSubmit text="Send Message" color="orange darken-2" />
</div> </div>
@ -86,7 +64,12 @@ export const ContactForm = ({ setIsSubmitted }) => {
); );
}; };
const ContactFormInput = ({ id, type = "text", value, onChange }) => { const ContactFormInput = ({ id, type = "text", value, dispatch }) => {
const handleChange = (e) => {
e.preventDefault();
dispatch(e.target.value);
};
return ( return (
<div className="input-field"> <div className="input-field">
{/* <i className="material-icons prefix">account_circle</i> */} {/* <i className="material-icons prefix">account_circle</i> */}
@ -95,7 +78,7 @@ const ContactFormInput = ({ id, type = "text", value, onChange }) => {
type={type} type={type}
id={id} id={id}
value={value} value={value}
onChange={onChange} onChange={handleChange}
required required
/> />
<label htmlFor={id}>{id}</label> <label htmlFor={id}>{id}</label>
@ -103,7 +86,12 @@ const ContactFormInput = ({ id, type = "text", value, onChange }) => {
); );
}; };
const ContactFormTextArea = ({ id, value, onChange }) => { const ContactFormTextArea = ({ id, value, dispatch }) => {
const handleChange = (e) => {
e.preventDefault();
dispatch(e.target.value);
};
return ( return (
<div className="input-field"> <div className="input-field">
<label htmlFor={id}>{id}</label> <label htmlFor={id}>{id}</label>
@ -112,7 +100,7 @@ const ContactFormTextArea = ({ id, value, onChange }) => {
rows="12" rows="12"
name={id} name={id}
value={value} value={value}
onChange={onChange} onChange={handleChange}
required required
/> />
</div> </div>