get meal with context

src/containers/Meal/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { getData } from "../../services/api";
 import { useFirebase } from "../../services/Firebase";
-import { MealApi as MealType } from "../../types/meal";
+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";
@@ -12,31 +12,18 @@ export const Meal: FC = () => {
   // hooks
   const { user, isAuthenticated } = useAuth0();
   const { id } = useParams<{ id: string }>();
+  const { state, dispatch } = useMeal();
   const fb = useFirebase();
   // local state
-  const [meal, setMeal] = useState({ meals: [] as MealType[] });
   const [isFav, setIsFav] = useState<boolean>();
   // variables
-  const mealItem = meal?.meals?.[0];
-
-  const getMeal = (
-    id: string,
-    setMeal: React.Dispatch<React.SetStateAction<{ meals: MealType[] }>>
-  ) => {
-    getData(id, setMeal, "lookup");
-  };
-
-  const getRandomMeal = (
-    setMeal: React.Dispatch<React.SetStateAction<{ meals: MealType[] }>>
-  ) => {
-    getData("random", setMeal);
-  };
-
+  const mealItem = state.meals?.[0];
   // effects
   /** Fetch meal from db */
   useEffect(() => {
-    !id ? getRandomMeal(setMeal) : getMeal(id, setMeal);
-  }, [id]);
+    !id ? fetchRandomMeal(dispatch) : fetchMeal(dispatch, id);
+  }, [id, dispatch]);
+
   /** Updates fav status in db */
   useEffect(() => {
     if (isAuthenticated) {
@@ -63,7 +50,7 @@ export const Meal: FC = () => {
   const item = buildMealProps(mealItem, isFav!);
   const ingredients = buildIngredientList(mealItem);
 
-  return !!meal?.meals ? (
+  return !!state.meals ? (
     <MealPage
       meal={item}
       ingredients={ingredients}

src/store/meal/async.ts

@@ -0,0 +1,25 @@
+import { createURI } from "../../services/api";
+import { Dispatch } from "./reducer";
+
+export const fetchRandomMeal = async (dispatch: Dispatch) => {
+  // const meal = await getData("random")
+  //TODO: refactor to use Meal client
+  const URI = createURI("random");
+
+  const meal = await fetch(URI)
+    .then((response) => response.json())
+    .catch((error) => console.warn(error + "url:" + URI));
+
+  dispatch({ type: "setMeal", payload: meal.meals });
+};
+
+export const fetchMeal = async (dispatch: Dispatch, id: string) => {
+  //TODO: refactor to use Meal client
+  const URI = createURI(id, "lookup");
+
+  const meal = await fetch(URI)
+    .then((response) => response.json())
+    .catch((error) => console.warn(error + "url:" + URI));
+
+  dispatch({ type: "setMeal", payload: meal.meals });
+};

src/store/meal/reducer.ts

@@ -2,6 +2,8 @@ import { AppState } from "./index";
 
 export const appReducer = (state: AppState, action: Action) => {
   switch (action.type) {
+    case "setMeal":
+      return { meals: action.payload };
     case "fetchMeal":
       return { meals: state.meals };
     case "fetchRandomMeal":
@@ -14,5 +16,8 @@ export const appReducer = (state: AppState, action: Action) => {
   }
 };
 
-export type Action = { type: "fetchMeal" | "fetchRandomMeal" | "toggleFav" };
+export type Action = {
+  payload?: any;
+  type: "setMeal" | "fetchMeal" | "fetchRandomMeal" | "toggleFav";
+};
 export type Dispatch = (action: Action) => void;