From fd3362a169e5d0d2df4409817dd73ba2e9e128c5 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Thu, 30 Jan 2020 22:18:39 +0100 Subject: [PATCH] cleanup --- README.md | 5 +- public/manifest.json | 6 +- src/App.js | 10 +- .../{CardEntry.js => CardEntry.jsx} | 0 .../{CategoryEntry.js => CategoryEntry.jsx} | 4 +- .../{ContactForm.js => ContactForm.jsx} | 0 .../{CopyrightText.js => CopyrightText.jsx} | 0 src/components/{Footer.js => Footer.jsx} | 0 .../{FooterLink.js => FooterLink.jsx} | 0 .../{GitHubLink.js => GitHubLink.jsx} | 0 .../{IngredientList.js => IngredientList.jsx} | 0 src/components/{Logo.js => Logo.jsx} | 0 ...alPresentation.js => MealPresentation.jsx} | 0 src/components/{Navbar.js => Navbar.jsx} | 1 - .../{PreLoader.js => PreLoader.jsx} | 0 .../{RandomButton.js => RandomButton.jsx} | 8 +- src/components/{Recipe.js => Recipe.jsx} | 0 .../{SearchBar.js => SearchBar.jsx} | 0 .../{SearchResult.js => SearchResult.jsx} | 0 src/index.css | 8 +- src/pages/{Category.js => Category.jsx} | 0 .../{CategoryList.js => CategoryList.jsx} | 0 src/pages/{Contact.js => Contact.jsx} | 0 src/pages/{Home.js => Home.jsx} | 4 +- src/pages/{Meal.js => Meal.jsx} | 2 +- src/pages/{NotFound.js => NotFound.jsx} | 0 src/pages/{Search.js => Search.jsx} | 0 src/utils/authentication.js | 111 ++++++++++++++++++ 28 files changed, 136 insertions(+), 23 deletions(-) rename src/components/{CardEntry.js => CardEntry.jsx} (100%) rename src/components/{CategoryEntry.js => CategoryEntry.jsx} (95%) rename src/components/{ContactForm.js => ContactForm.jsx} (100%) rename src/components/{CopyrightText.js => CopyrightText.jsx} (100%) rename src/components/{Footer.js => Footer.jsx} (100%) rename src/components/{FooterLink.js => FooterLink.jsx} (100%) rename src/components/{GitHubLink.js => GitHubLink.jsx} (100%) rename src/components/{IngredientList.js => IngredientList.jsx} (100%) rename src/components/{Logo.js => Logo.jsx} (100%) rename src/components/{MealPresentation.js => MealPresentation.jsx} (100%) rename src/components/{Navbar.js => Navbar.jsx} (99%) rename src/components/{PreLoader.js => PreLoader.jsx} (100%) rename src/components/{RandomButton.js => RandomButton.jsx} (58%) rename src/components/{Recipe.js => Recipe.jsx} (100%) rename src/components/{SearchBar.js => SearchBar.jsx} (100%) rename src/components/{SearchResult.js => SearchResult.jsx} (100%) rename src/pages/{Category.js => Category.jsx} (100%) rename src/pages/{CategoryList.js => CategoryList.jsx} (100%) rename src/pages/{Contact.js => Contact.jsx} (100%) rename src/pages/{Home.js => Home.jsx} (85%) rename src/pages/{Meal.js => Meal.jsx} (97%) rename src/pages/{NotFound.js => NotFound.jsx} (100%) rename src/pages/{Search.js => Search.jsx} (100%) create mode 100644 src/utils/authentication.js diff --git a/README.md b/README.md index f0126b4..c210086 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,8 @@ Free meal planner for cooks short on ideas! (like me …) - [Materialize](https://materializecss.com) CSS librairy for styling - Public API: [TheMealDb](https://www.themealdb.com/api.php) and [TheCocktailDb](https://www.thecocktaildb.com/api.php) - Hosting: [Render](https://render.com/) +- Analytics : Google Analytics & Mixpanel +- Authentication : Firebase or Auth0 ## Versions @@ -90,7 +92,7 @@ Free meal planner for cooks short on ideas! (like me …) ## TO DO - add sidenav on mobile -- accounts v2 +- accounts v2 (profile page) - send message after contact form validation (confirm to sender and msg+info to admin) - code cleanup (props and refactoring) - put a preloader @@ -99,3 +101,4 @@ Free meal planner for cooks short on ideas! (like me …) - https://www.henriksommerfeld.se/error-handling-with-fetch/ - Use ErrorBoundaries component ? - Back to top button +- Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default) diff --git a/public/manifest.json b/public/manifest.json index 96a6f51..25fb19e 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Meal Planner", - "name": "Chef's Meal Planner", + "short_name": "Chef's", + "name": "Chef's | Meal Planner", "icons": [ { "src": "favicon.ico", @@ -27,4 +27,4 @@ "display": "standalone", "theme_color": "#ee6e73", "background_color": "#ffffff" -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index e38bf04..9cbe96d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,8 @@ import React, { useState } from "react"; import { Router } from "./utils/router"; import { Switch, Route, Redirect } from "react-router-dom"; -import { HomePage } from "./pages/Home"; -import { MealPage } from "./pages/Meal"; +import { Home } from "./pages/Home"; +import { Meal } from "./pages/Meal"; import { SearchPage } from "./pages/Search"; import { CategoryListPage } from "./pages/CategoryList"; import { CategoryPage } from "./pages/Category"; @@ -113,10 +113,10 @@ export const App = () => { /> - + - + { - + diff --git a/src/components/CardEntry.js b/src/components/CardEntry.jsx similarity index 100% rename from src/components/CardEntry.js rename to src/components/CardEntry.jsx diff --git a/src/components/CategoryEntry.js b/src/components/CategoryEntry.jsx similarity index 95% rename from src/components/CategoryEntry.js rename to src/components/CategoryEntry.jsx index aae9941..c40bc45 100644 --- a/src/components/CategoryEntry.js +++ b/src/components/CategoryEntry.jsx @@ -4,8 +4,8 @@ import { Link, useRouteMatch } from "react-router-dom"; const CategoryEntry = props => { const { strCategory, - strCategoryThumb, - strCategoryDescription + strCategoryThumb + // strCategoryDescription } = props.category; const { url } = useRouteMatch(); diff --git a/src/components/ContactForm.js b/src/components/ContactForm.jsx similarity index 100% rename from src/components/ContactForm.js rename to src/components/ContactForm.jsx diff --git a/src/components/CopyrightText.js b/src/components/CopyrightText.jsx similarity index 100% rename from src/components/CopyrightText.js rename to src/components/CopyrightText.jsx diff --git a/src/components/Footer.js b/src/components/Footer.jsx similarity index 100% rename from src/components/Footer.js rename to src/components/Footer.jsx diff --git a/src/components/FooterLink.js b/src/components/FooterLink.jsx similarity index 100% rename from src/components/FooterLink.js rename to src/components/FooterLink.jsx diff --git a/src/components/GitHubLink.js b/src/components/GitHubLink.jsx similarity index 100% rename from src/components/GitHubLink.js rename to src/components/GitHubLink.jsx diff --git a/src/components/IngredientList.js b/src/components/IngredientList.jsx similarity index 100% rename from src/components/IngredientList.js rename to src/components/IngredientList.jsx diff --git a/src/components/Logo.js b/src/components/Logo.jsx similarity index 100% rename from src/components/Logo.js rename to src/components/Logo.jsx diff --git a/src/components/MealPresentation.js b/src/components/MealPresentation.jsx similarity index 100% rename from src/components/MealPresentation.js rename to src/components/MealPresentation.jsx diff --git a/src/components/Navbar.js b/src/components/Navbar.jsx similarity index 99% rename from src/components/Navbar.js rename to src/components/Navbar.jsx index 43f1736..1e0f6b8 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.jsx @@ -16,7 +16,6 @@ export const Navbar = props => { {links.map((link, i) => ( ))} -
  • { - const classString = `waves-effect waves-light btn-${props.size}`; +export const RandomButton = ({ url, size, handleClick }) => { + const classString = `waves-effect waves-light btn-${size}`; return ( - + diff --git a/src/components/Recipe.js b/src/components/Recipe.jsx similarity index 100% rename from src/components/Recipe.js rename to src/components/Recipe.jsx diff --git a/src/components/SearchBar.js b/src/components/SearchBar.jsx similarity index 100% rename from src/components/SearchBar.js rename to src/components/SearchBar.jsx diff --git a/src/components/SearchResult.js b/src/components/SearchResult.jsx similarity index 100% rename from src/components/SearchResult.js rename to src/components/SearchResult.jsx diff --git a/src/index.css b/src/index.css index 61d76b1..50c2333 100644 --- a/src/index.css +++ b/src/index.css @@ -15,10 +15,10 @@ div { white-space: pre-wrap; } -.background { - background-image: url(./images/Chef.svg); - /* width: 100%; */ -} +/* .background { + background-image: url(./images/chef.svg); + width: 100%; +} */ .logo { font-family: "Marck Script", cursive; diff --git a/src/pages/Category.js b/src/pages/Category.jsx similarity index 100% rename from src/pages/Category.js rename to src/pages/Category.jsx diff --git a/src/pages/CategoryList.js b/src/pages/CategoryList.jsx similarity index 100% rename from src/pages/CategoryList.js rename to src/pages/CategoryList.jsx diff --git a/src/pages/Contact.js b/src/pages/Contact.jsx similarity index 100% rename from src/pages/Contact.js rename to src/pages/Contact.jsx diff --git a/src/pages/Home.js b/src/pages/Home.jsx similarity index 85% rename from src/pages/Home.js rename to src/pages/Home.jsx index e15dedf..b83ce15 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.jsx @@ -1,14 +1,14 @@ import React from "react"; import { RandomButton } from "../components/RandomButton"; -export const HomePage = props => { +export const Home = ({ buttonUrl }) => { return (

    Chef's Online Cookbook

    - +
    { +export const Meal = props => { const { getMeal } = props; const { idMeal } = useParams(); diff --git a/src/pages/NotFound.js b/src/pages/NotFound.jsx similarity index 100% rename from src/pages/NotFound.js rename to src/pages/NotFound.jsx diff --git a/src/pages/Search.js b/src/pages/Search.jsx similarity index 100% rename from src/pages/Search.js rename to src/pages/Search.jsx diff --git a/src/utils/authentication.js b/src/utils/authentication.js new file mode 100644 index 0000000..5a5c7a7 --- /dev/null +++ b/src/utils/authentication.js @@ -0,0 +1,111 @@ +import React, { useState, useEffect, useContext, createContext } from "react"; +import queryString from "query-string"; +import * as firebase from "firebase/app"; +import "firebase/auth"; + +if (!firebase.apps.length) { + // Replace with your own Firebase credentials + firebase.initializeApp({ + apiKey: "AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas", + authDomain: "divjoy-demo.firebaseapp.com", + projectId: "divjoy-demo", + appID: "divjoy-demo" + }); +} + +const authContext = createContext(); + +// Provider component that wraps your app and makes auth object ... +// ... available to any child component that calls useAuth(). +export function ProvideAuth({ children }) { + const auth = useProvideAuth(); + return {children}; +} + +// Hook for child components to get the auth object ... +// ... update when it changes. +export const useAuth = () => { + return useContext(authContext); +}; + +// Provider hook that creates auth object and handles state +function useProvideAuth() { + const [user, setUser] = useState(null); + + const signin = (email, password) => { + return firebase + .auth() + .signInWithEmailAndPassword(email, password) + .then(response => { + setUser(response.user); + return response.user; + }); + }; + + const signup = (email, password) => { + return firebase + .auth() + .createUserWithEmailAndPassword(email, password) + .then(response => { + setUser(response.user); + return response.user; + }); + }; + + const signout = () => { + return firebase + .auth() + .signOut() + .then(() => { + setUser(false); + }); + }; + + const sendPasswordResetEmail = email => { + return firebase + .auth() + .sendPasswordResetEmail(email) + .then(() => { + return true; + }); + }; + + const confirmPasswordReset = (password, code) => { + // Get code from query string object + const resetCode = code || getFromQueryString("oobCode"); + + return firebase + .auth() + .confirmPasswordReset(resetCode, password) + .then(() => { + return true; + }); + }; + + // Subscribe to user on mount + useEffect(() => { + const unsubscribe = firebase.auth().onAuthStateChanged(user => { + if (user) { + setUser(user); + } else { + setUser(false); + } + }); + + // Subscription unsubscribe function + return () => unsubscribe(); + }, []); + + return { + user, + signin, + signup, + signout, + sendPasswordResetEmail, + confirmPasswordReset + }; +} + +const getFromQueryString = key => { + return queryString.parse(window.location.search)[key]; +};