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 ( +
+ +