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) => (
-
-
-

-
{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}
-
- );
-};