refactor meal client

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"];

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

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 ? (

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

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

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