From 2852aa94f5d770c75e5438db8f133cb9ec7d21b3 Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Mon, 5 Apr 2021 11:55:08 +0200
Subject: [PATCH] refactor meal client

---
 src/constants.ts                    |  1 +
 src/containers/Categories/index.tsx |  2 +-
 src/containers/Category/index.tsx   |  4 ++--
 src/services/api.ts                 | 26 ++++++++++-------------
 src/store/meal/async.ts             | 33 ++++++-----------------------
 src/store/meal/reducer.ts           |  3 ++-
 6 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index 1ab5cfb..ec872f8 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,2 +1,3 @@
+export const apiRoot = "https://www.themealdb.com/api/json/v1/1/";
 export const buttonURL = "/random";
 export const links = ["categories", "contact"];
diff --git a/src/containers/Categories/index.tsx b/src/containers/Categories/index.tsx
index 5719e81..10bc2f6 100644
--- a/src/containers/Categories/index.tsx
+++ b/src/containers/Categories/index.tsx
@@ -7,7 +7,7 @@ export const Categories = () => {
   const [categories, setCategories] = useState({ categories: [] });
 
   const getCategories = () => {
-    getData("categories", setCategories);
+    getData("categories").then((data) => setCategories(data));
   };
 
   useEffect(() => {
diff --git a/src/containers/Category/index.tsx b/src/containers/Category/index.tsx
index f86e781..fd64c84 100644
--- a/src/containers/Category/index.tsx
+++ b/src/containers/Category/index.tsx
@@ -8,8 +8,8 @@ export const Category: FC = () => {
   const [meals, setMeals] = useState({ meals: [] });
 
   useEffect(() => {
-    const getMeals = () => getData(strCategory, setMeals, "filter");
-    getMeals();
+    const getMeals = () => getData(strCategory, "filter");
+    getMeals().then((data) => setMeals(data));
   }, [strCategory]);
 
   return !meals.meals ? (
diff --git a/src/services/api.ts b/src/services/api.ts
index 8bf47ea..b8137da 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,20 +1,21 @@
-import React from "react";
+import { apiRoot } from "../constants";
 
-export const createURI = (keyword: string, option?: string) => {
-  const ROOT = "https://www.themealdb.com/api/json/v1/1/";
+type Option = "filter" | "lookup" | "search";
+
+const createURI = (keyword: string, option?: Option) => {
   if (!option) {
-    return `${ROOT}${keyword}.php`;
+    return `${apiRoot}${keyword}.php`;
   }
 
   switch (option) {
     case "filter": {
-      return `${ROOT}${option}.php?c=${keyword}`;
+      return `${apiRoot}${option}.php?c=${keyword}`;
     }
     case "lookup": {
-      return `${ROOT}${option}.php?i=${keyword}`;
+      return `${apiRoot}${option}.php?i=${keyword}`;
     }
     case "search": {
-      return `${ROOT}${option}.php?s=${keyword}`;
+      return `${apiRoot}${option}.php?s=${keyword}`;
     }
     default: {
       throw Error("Unexpected URI");
@@ -22,15 +23,10 @@ export const createURI = (keyword: string, option?: string) => {
   }
 };
 
-export const getData = (
-  keyword: string,
-  set: React.Dispatch<React.SetStateAction<any>>,
-  option?: string
-) => {
+export const getData = (keyword: string, option?: Option) => {
   const URI = createURI(keyword, option);
 
-  fetch(URI)
+  return fetch(URI)
     .then((response) => response.json())
-    .catch((error) => console.warn(error + "url:" + URI))
-    .then((data) => set(data));
+    .catch((error) => console.warn(error + "url:" + URI));
 };
diff --git a/src/store/meal/async.ts b/src/store/meal/async.ts
index c1c7727..ab67f91 100644
--- a/src/store/meal/async.ts
+++ b/src/store/meal/async.ts
@@ -1,42 +1,23 @@
-import { createURI } from "../../services/api";
+import { getData } 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 });
+  const meal = await getData("random");
+  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 });
+  const meal = await getData(id, "lookup");
+  dispatch({ type: "setMeal", payload: meal?.meals });
 };
 
 export const fetchSearchResults = async (
   dispatch: Dispatch,
   searchString: string
 ) => {
-  //TODO: refactor to use Meal client
-  const URI = createURI(searchString, "search");
-
-  const meals = await fetch(URI)
-    .then((response) => response.json())
-    .catch((error) => console.warn(error + "url:" + URI));
-
+  const meals = await getData(searchString, "search");
   dispatch({
     type: "setSearchResults",
-    payload: { search: meals.meals, searchString },
+    payload: { search: meals?.meals, searchString },
   });
 };
diff --git a/src/store/meal/reducer.ts b/src/store/meal/reducer.ts
index f21c8d9..84d850c 100644
--- a/src/store/meal/reducer.ts
+++ b/src/store/meal/reducer.ts
@@ -1,3 +1,4 @@
+import { MealSummary } from "../../types/meal";
 import { AppState } from "./index";
 
 export const appReducer = (state: AppState, action: Action) => {
@@ -11,7 +12,7 @@ export const appReducer = (state: AppState, action: Action) => {
         searchString: action.payload.searchString,
       };
     case "clearSearchResults":
-      return { ...state, search: [] };
+      return { ...state, search: [] as MealSummary[] };
     default: {
       throw new Error(`Unhandled action type: ${action.type}`);
     }