From 0ce8b1cfc26a3b21e5275e999da7c45ea727a60d Mon Sep 17 00:00:00 2001 From: Ruidy Date: Mon, 13 Dec 2021 12:45:29 -0400 Subject: [PATCH] feat: remove login and profile --- src/App.tsx | 24 ++--- src/components/SideNav.tsx | 16 ---- src/containers/Meal/components/MealPage.tsx | 5 +- .../Meal/components/MealPresentation.tsx | 15 +-- src/containers/Meal/index.tsx | 34 +------ src/containers/Meal/service.ts | 3 +- .../Profile/components/ProfilePage.tsx | 26 ----- src/containers/Profile/index.tsx | 26 ----- src/index.jsx | 27 +----- src/router/AppRouter.tsx | 4 - src/router/PrivateRoute.tsx | 22 ----- src/services/Firebase/context.ts | 8 -- src/services/Firebase/firebase.ts | 96 ------------------- src/services/Firebase/index.ts | 7 -- src/utils/auth0-spa.js | 93 ------------------ 15 files changed, 16 insertions(+), 390 deletions(-) delete mode 100644 src/containers/Profile/components/ProfilePage.tsx delete mode 100644 src/containers/Profile/index.tsx delete mode 100644 src/router/PrivateRoute.tsx delete mode 100644 src/services/Firebase/context.ts delete mode 100644 src/services/Firebase/firebase.ts delete mode 100644 src/services/Firebase/index.ts delete mode 100644 src/utils/auth0-spa.js diff --git a/src/App.tsx b/src/App.tsx index 5ec7142..e02cfb6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,11 @@ -import { PreLoader } from "./components/PreLoader"; import "./index.css"; import MainLayout from "./layouts/MainLayout"; import { AppRouter, Router } from "./router"; -import { useAuth0 } from "./utils/auth0-spa"; -export const App = () => { - const { loading } = useAuth0(); - - return loading ? ( -
- -
- ) : ( - - - - - - ); -}; +export const App = () => ( + + + + + +); diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx index 57a15fc..6c1d390 100644 --- a/src/components/SideNav.tsx +++ b/src/components/SideNav.tsx @@ -1,9 +1,7 @@ import { MouseEventHandler } from "react"; import { Link } from "react-router-dom"; import { buttonURL, links } from "../constants"; -import ChefImage from "../images/chef.svg"; import SpecialEventImage from "../images/special_event.svg"; -import { useAuth0 } from "../utils/auth0-spa"; import { FooterLink } from "./FooterLink"; import { RandomButton } from "./RandomButton"; @@ -13,7 +11,6 @@ type Props = { }; export const SideNav = ({ showNav, closeNavClick }: Props) => { - const { isAuthenticated, user } = useAuth0(); let transformStyle = { transform: showNav ? "translateX(0%)" : "translateX(-105%)", transition: "0.5s", @@ -44,18 +41,6 @@ export const SideNav = ({ showNav, closeNavClick }: Props) => { close - - - {isAuthenticated ? ( -
- user_avatar - {user.name} - {user.email} -
- ) : ( - user_avatar - )} - @@ -73,7 +58,6 @@ export const SideNav = ({ showNav, closeNavClick }: Props) => { {links.map((link, i) => ( ))} - {isAuthenticated && } ); }; diff --git a/src/containers/Meal/components/MealPage.tsx b/src/containers/Meal/components/MealPage.tsx index b621826..231aff6 100644 --- a/src/containers/Meal/components/MealPage.tsx +++ b/src/containers/Meal/components/MealPage.tsx @@ -7,14 +7,13 @@ type Props = { ingredients: string[][]; recipe: string; meal: Meal; - handleFavChange: () => void; }; -export const MealPage = ({ meal, ingredients, recipe, handleFavChange }: Props) => ( +export const MealPage = ({ meal, ingredients, recipe }: Props) => (
- +
diff --git a/src/containers/Meal/components/MealPresentation.tsx b/src/containers/Meal/components/MealPresentation.tsx index faf2d3a..5b70ae2 100644 --- a/src/containers/Meal/components/MealPresentation.tsx +++ b/src/containers/Meal/components/MealPresentation.tsx @@ -3,12 +3,10 @@ import { Meal } from "../../../types/meal"; type Props = { meal: Meal; - handleFavChange: () => void; }; export const MealPresentation = ({ - meal: { mealName, imgAddress, videoAddress, mealCategory, mealArea, isFav }, - handleFavChange, + meal: { mealName, imgAddress, videoAddress, mealCategory, mealArea }, }: Props) => { return (
@@ -36,17 +34,6 @@ export const MealPresentation = ({
Origin: {mealArea}
- -
- {isFav ? "Remove from favourites" : "Add to favourites"}: - - - {" "} - - {isFav ? "favorite" : "favorite_border"} - - -
diff --git a/src/containers/Meal/index.tsx b/src/containers/Meal/index.tsx index 611f4d9..63d8d51 100644 --- a/src/containers/Meal/index.tsx +++ b/src/containers/Meal/index.tsx @@ -1,21 +1,15 @@ -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useParams } from "react-router-dom"; -import { useFirebase } from "../../services/Firebase"; import { useMeal } from "../../store/meal"; import { fetchMeal, fetchRandomMeal } from "../../store/meal/async"; -import { useAuth0 } from "../../utils/auth0-spa"; import { NotFound } from "../NotFound"; import { MealPage } from "./components/MealPage"; import { buildIngredientList, buildMealProps } from "./service"; export const Meal = () => { // hooks - const { user, isAuthenticated } = useAuth0(); const { id } = useParams<{ id: string }>(); const { state, dispatch } = useMeal(); - const fb = useFirebase(); - // local state - const [isFav, setIsFav] = useState(); // variables const mealItem = state.meals?.[0]; // effects @@ -24,30 +18,7 @@ export const Meal = () => { !id ? fetchRandomMeal(dispatch) : fetchMeal(dispatch, id); }, [id, dispatch]); - /** Updates fav status in db */ - useEffect(() => { - if (isAuthenticated) { - fb?.isFav(user.email, mealItem?.idMeal).then((res) => setIsFav(res)); - } - }, [user, fb, mealItem?.idMeal, isAuthenticated]); - // other logic - const handleFavChange = () => { - if (isAuthenticated) { - setIsFav(!isFav); - // Send !isFav because state is not yet updated - fb.addToFavs( - user?.email, - mealItem?.idMeal, - mealItem?.strMeal, - mealItem?.strMealThumb, - !isFav - ); - } else { - window.alert("You must be authenticated to add to favourites."); - } - }; - - const item = buildMealProps(mealItem, isFav!); + const item = buildMealProps(mealItem); const ingredients = buildIngredientList(mealItem); return !!state.meals ? ( @@ -55,7 +26,6 @@ export const Meal = () => { meal={item} ingredients={ingredients} recipe={mealItem?.strInstructions} - handleFavChange={handleFavChange} /> ) : ( diff --git a/src/containers/Meal/service.ts b/src/containers/Meal/service.ts index e76262e..bdaeda4 100644 --- a/src/containers/Meal/service.ts +++ b/src/containers/Meal/service.ts @@ -14,11 +14,10 @@ export const buildIngredientList = (mealItem: MealApi): string[][] => { return ingredients; }; -export const buildMealProps = (mealItem: MealApi, isFav: boolean) => ({ +export const buildMealProps = (mealItem: MealApi) => ({ mealName: mealItem?.strMeal, imgAddress: mealItem?.strMealThumb, videoAddress: mealItem?.strYoutube, mealCategory: mealItem?.strCategory, mealArea: mealItem?.strArea, - isFav, }); diff --git a/src/containers/Profile/components/ProfilePage.tsx b/src/containers/Profile/components/ProfilePage.tsx deleted file mode 100644 index 82aab55..0000000 --- a/src/containers/Profile/components/ProfilePage.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { CardEntry } from "../../../components/CardEntry"; -import { MealSummary } from "../../../types/meal"; - -type Props = { - user: any; - meals: MealSummary[]; -}; - -export const ProfilePage = ({ user, meals }: Props) => ( -
-
- Avatar -

{user.name}

-
-
- Email: - {user.email} -

Favourites meals

-
    - {meals?.map((meal) => ( - - ))} -
-
-
-); diff --git a/src/containers/Profile/index.tsx b/src/containers/Profile/index.tsx deleted file mode 100644 index 5d6df0b..0000000 --- a/src/containers/Profile/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useEffect, useState } from "react"; -import { PreLoader } from "../../components/PreLoader"; -import { useFirebase } from "../../services/Firebase"; -import { MealSummary } from "../../types/meal"; -import { useAuth0 } from "../../utils/auth0-spa"; -import { ProfilePage } from "./components/ProfilePage"; - -export const Profile = () => { - const { loading, user } = useAuth0(); - const [favs, setFavs] = useState([] as MealSummary[]); - const db = useFirebase(); - - useEffect(() => { - db.getByEmail(user.email).then((res) => { - setFavs(res.favs); - }); - }, [db, user.email]); - - return loading || !user ? ( // is caught by PrivateRoute -
- -
- ) : ( - - ); -}; diff --git a/src/index.jsx b/src/index.jsx index 126a756..92bcfc6 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -3,33 +3,12 @@ import ReactDOM from "react-dom"; import "./index.css"; import { App } from "./App"; import * as serviceWorker from "./serviceWorker"; -import { Auth0Provider } from "./utils/auth0-spa"; -import history from "./utils/history"; -import { FirebaseContext } from "./services/Firebase"; import { AppProvider } from "./store/meal"; -const onRedirectCallBack = (appState) => { - history.push( - appState && appState.targetUrl - ? appState.targetUrl - : window.location.pathname - ); -}; - ReactDOM.render( - - {/* todo fix Firebase app*/} - - - - - - , + + + , document.getElementById("root") ); diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index a7e6b8b..89bc010 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -6,9 +6,7 @@ import { Contact } from "../containers/Contact"; import { Home } from "../containers/Home"; import { Meal } from "../containers/Meal"; import { NotFound } from "../containers/NotFound"; -import { Profile } from "../containers/Profile"; import { Search } from "../containers/Search"; -import { PrivateRoute } from "./PrivateRoute"; export const AppRouter = () => ( @@ -16,8 +14,6 @@ export const AppRouter = () => ( - - diff --git a/src/router/PrivateRoute.tsx b/src/router/PrivateRoute.tsx deleted file mode 100644 index e648107..0000000 --- a/src/router/PrivateRoute.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { FC, useEffect } from "react"; -import { Route, RouteProps } from "react-router-dom"; -import { useAuth0 } from "../utils/auth0-spa"; - -type Props = { component: FC } & RouteProps; - -export const PrivateRoute = ({ component: Component, path, ...rest }: Props) => { - const { loading, isAuthenticated, loginWithRedirect } = useAuth0(); - - useEffect(() => { - // catches infinite loading when no user is logged in - if (loading || isAuthenticated) { - return; - } - const fn = async () => await loginWithRedirect({ appState: { targetUrl: path } }); - fn(); - }, [loading, isAuthenticated, loginWithRedirect, path]); - - const render = (props: any) => (isAuthenticated ? : null); - - return ; -}; diff --git a/src/services/Firebase/context.ts b/src/services/Firebase/context.ts deleted file mode 100644 index f7cdbeb..0000000 --- a/src/services/Firebase/context.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createContext, useContext } from "react"; -import Firebase from "./firebase"; - -// create a Firebase context to make state available anywhere in the App. -const FirebaseContext = createContext(new Firebase()); - -export const useFirebase = () => useContext(FirebaseContext); -export default FirebaseContext; diff --git a/src/services/Firebase/firebase.ts b/src/services/Firebase/firebase.ts deleted file mode 100644 index bbc956d..0000000 --- a/src/services/Firebase/firebase.ts +++ /dev/null @@ -1,96 +0,0 @@ -import app from "firebase/app"; -import "firebase/firestore"; - -const CONFIG = { - apiKey: process.env.REACT_APP_API_KEY, - authDomain: process.env.REACT_APP_AUTH_DOMAIN, - databaseURL: process.env.REACT_APP_DB_URL, - projectId: process.env.REACT_APP_PROJECT_ID, - storageBucket: process.env.REACT_APP_STORAGE_BUCKET, - messagingSenderId: process.env.REACT_APP_MSG_SENDER_ID, - appId: process.env.REACT_APP_APP_ID, - measurementId: process.env.REACT_APP_MEASUREMENT_ID, -}; - -const FAVS = "favs"; - -/** - * Firebase initializes the Application and provides method to interact with - * Firebase services as auth and firestore. - */ -export default class Firebase { - #db: any; - #collection: any; - - constructor() { - app.initializeApp(CONFIG); - this.#db = app.firestore(); - this.#collection = this.#db.collection("mealPlannerUsers"); - } - - /** - * Get infos for user 'email'. - */ - getByEmail = async (email: string) => { - const infos = await this.#collection - .where("email", "==", email) - .limit(1) - .get(); - - const favs = await this.getFavsByEmail(email); - - return { infos, favs }; - }; - - /** - * Get user's favourite recipes - * */ - getFavsByEmail = async (email: string) => { - let favs = [] as any[]; - const query = await this.#collection - .doc(email) - .collection(FAVS) - .where("isFav", "==", true) - .limit(10) - .get(); - - query.forEach((doc: any) => favs.push(doc.data())); - - return favs; - }; - - isFav = async (email: string, idMeal: string) => { - const query = await this.#collection - .doc(email) - .collection(FAVS) - .doc(idMeal) - .get(); - - const obj = query.data(); - return obj?.isFav; - }; - - /** - * Create or update favourite status for an authenticated user. - */ - addToFavs = async ( - email: string, - idMeal: string, - strMeal: string, - strMealThumb: string, - isFav: boolean - ) => { - this.#collection - .doc(email) - .collection(FAVS) - .doc(idMeal) - .set({ - email, - idMeal, - strMeal, - strMealThumb, - isFav, - }) - .catch((err: any) => console.error("Error adding favs to database", err)); - }; -} diff --git a/src/services/Firebase/index.ts b/src/services/Firebase/index.ts deleted file mode 100644 index 6682c79..0000000 --- a/src/services/Firebase/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -// This file centralizes all Firebase related exports - -import Firebase from "./firebase"; -import FirebaseContext, { useFirebase } from "./context"; - -export default Firebase; -export { FirebaseContext, useFirebase }; diff --git a/src/utils/auth0-spa.js b/src/utils/auth0-spa.js deleted file mode 100644 index dd45c17..0000000 --- a/src/utils/auth0-spa.js +++ /dev/null @@ -1,93 +0,0 @@ -// adapted from: https://auth0.com/docs/quickstart/spa/react -import React, { useContext, useState, useEffect } from "react"; -import createAuth0Client from "@auth0/auth0-spa-js"; - -const DEFAULT_REDIRECT_CALLBACK = () => { - window.history.replaceState({}, document.title, window.location.pathname); -}; - -export const Auth0Context = React.createContext(); -export const useAuth0 = () => useContext(Auth0Context); - -export const Auth0Provider = ({ - children, - onRedirectCallBack = DEFAULT_REDIRECT_CALLBACK, - ...initOptions -}) => { - const [isAuthenticated, setIsAuthenticated] = useState(); - const [user, setUser] = useState(); - const [auth0Client, setAuth0] = useState(); - const [loading, setLoading] = useState(true); - const [popUpOpen, setPopUpOpen] = useState(false); - - useEffect(() => { - const initAuth0 = async () => { - const auth0FromHook = await createAuth0Client(initOptions); - setAuth0(auth0FromHook); - - if ( - window.location.search.includes("code=") && - window.location.search.includes("state=") - ) { - const { appState } = await auth0FromHook.handleRedirectCallback(); - onRedirectCallBack(appState); - } - - const isAuthenticated = await auth0FromHook.isAuthenticated(); - setIsAuthenticated(isAuthenticated); - - if (isAuthenticated) { - const user = await auth0FromHook.getUser(); - setUser(user); - } - - setLoading(false); - }; - initAuth0(); - // eslint-disable-next-line - }, []); - - const loginWithPopUp = async (params = {}) => { - setPopUpOpen(true); - try { - await auth0Client.loginWithPopUp(params); - } catch (error) { - console.error(error); - } finally { - setPopUpOpen(false); - } - const user = auth0Client.getUser(); - setUser(user); - setIsAuthenticated(true); - }; - - const handleRedirectCallback = async () => { - setLoading(true); - await auth0Client.handleRedirectCallback(); - const user = auth0Client.getUser(); - setLoading(false); - setIsAuthenticated(true); - setUser(user); - }; - - return ( - auth0Client.getIdTokenClaims(...props), - loginWithRedirect: (...props) => - auth0Client.loginWithRedirect(...props), - getTokenWithPopUp: (...props) => - auth0Client.getTokenWithPopUp(...props), - logout: (...props) => auth0Client.logout(...props) - }} - > - {children} - - ); -};