From df80472fd77c8bcbda1a93379895ade120e6903f Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Thu, 30 Jan 2020 13:23:23 +0100 Subject: [PATCH] contact page --- README.md | 10 ++- src/App.js | 4 ++ src/components/CategoryEntry.js | 2 +- src/components/ContactForm.js | 98 ++++++++++++++++++++++++++++++ src/components/Footer.js | 2 +- src/components/MealPresentation.js | 2 +- src/components/Navbar.js | 10 +-- src/images/Chef.svg | 2 +- src/images/breakfast.svg | 2 +- src/images/healthy_options.svg | 2 +- src/images/mail_sent.svg | 1 + src/images/special_event.svg | 2 +- src/pages/Contact.js | 23 +++++++ 13 files changed, 146 insertions(+), 14 deletions(-) create mode 100644 src/components/ContactForm.js create mode 100644 src/images/mail_sent.svg create mode 100644 src/pages/Contact.js diff --git a/README.md b/README.md index 9020cc1..f0126b4 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ Free meal planner for cooks short on ideas! (like me …) - Cocktail selection - Create a profile and save your favourite meals - Notation system: know what are the most loved meals +- Share recipe with your friends and family - Suggestions based on what your personal taste - Recipes in Video - Get a full menu (Starter, Main, Dessert + Cocktail) @@ -84,14 +85,17 @@ Free meal planner for cooks short on ideas! (like me …) - Progressive Web App - User Interface Enhancement +- Contact form ## TO DO +- add sidenav on mobile +- accounts v2 +- send message after contact form validation (confirm to sender and msg+info to admin) +- code cleanup (props and refactoring) - put a preloader - redirect after failed fetch request: (history.push('/path'), or write handleFetchResponse function) - https://stackoverflow.com/questions/45089386/what-is-the-best-way-to-redirect-a-page-using-react-router - https://www.henriksommerfeld.se/error-handling-with-fetch/ - Use ErrorBoundaries component ? -- add sidenav on mobile -- accounts v2 -- contact form (with validation) +- Back to top button diff --git a/src/App.js b/src/App.js index 99a960e..e38bf04 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import { MealPage } from "./pages/Meal"; import { SearchPage } from "./pages/Search"; import { CategoryListPage } from "./pages/CategoryList"; import { CategoryPage } from "./pages/Category"; +import { ContactPage } from "./pages/Contact"; import { NotFoundPage } from "./pages/NotFound"; import { Navbar } from "./components/Navbar"; import { SearchBar } from "./components/SearchBar"; @@ -137,6 +138,9 @@ export const App = () => { searchResults={searchResults} /> + + + diff --git a/src/components/CategoryEntry.js b/src/components/CategoryEntry.js index 8224bfb..aae9941 100644 --- a/src/components/CategoryEntry.js +++ b/src/components/CategoryEntry.js @@ -26,7 +26,7 @@ const CategoryEntry = props => {
-

{strCategory}

+

{strCategory}

{/*

{strCategoryDescription}

*/}
diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js new file mode 100644 index 0000000..f99ec13 --- /dev/null +++ b/src/components/ContactForm.js @@ -0,0 +1,98 @@ +import React, { useState } from "react"; + +export const ContactForm = ({ handleSubmit }) => { + const fields = ["firstname", "lastname", "email", "phone", "message"]; + + // const [firstName, setFirstName] = useState(""); + + const onSubmit = ev => { + ev.preventDefault(); + handleSubmit(true); + }; + + // const handleChange = ev => { + // const { value } = ev.target; + // setFirstName(value); + // }; + + return ( +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+
+
+ ); +}; + +const ContactFormInput = ({ id, type = "text" }) => { + return ( +
+ {/* account_circle */} + + +
+ ); +}; + +const ContactFormTextArea = ({ id }) => { + return ( +
+ +