Chef's Online Cookbook
-
- {}} />
+
diff --git a/src/containers/Search/components/SearchPage.tsx b/src/containers/Search/components/SearchPage.tsx
index d9f4386..3c460f9 100644
--- a/src/containers/Search/components/SearchPage.tsx
+++ b/src/containers/Search/components/SearchPage.tsx
@@ -6,29 +6,26 @@ import { SearchResult } from "./SearchResult";
type Props = {
searchString: string;
- searchResults: { meals: MealSummary[] };
+ searchResults: MealSummary[];
};
-export const SearchPage: FC
- 
-
- ) : (
- - No results to display, instead there is a picture of my breakfast. -
-
-
- )}
- -
- {meals.map((meal, i) => (
-
+
+
+ ) : (
+ + No results to display, instead there is a picture of my breakfast. +
+
+
+ )}
+ -
+ {searchResults.map((meal, i) => (
+
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 9061ea5..260a676 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -3,20 +3,15 @@ import { Redirect, Route, Switch } from "react-router-dom";
import { buttonURL } from "../constants";
import { Categories } from "../containers/Categories";
import { Category } from "../containers/Category";
+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 { Contact } from "../containers/Contact";
-import { NotFound } from "../containers/NotFound";
-import { MealSummary } from "../types/meal";
import { PrivateRoute } from "./PrivateRoute";
-type Props = {
- searchString: string;
- searchResults: { meals: MealSummary[] };
-};
-const AppRouter: FC = ({ searchString, searchResults }) => (
+const AppRouter: FC = () => (
= ({ searchString, searchResults }) => (
-
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>,
- 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
new file mode 100644
index 0000000..ab67f91
--- /dev/null
+++ b/src/store/meal/async.ts
@@ -0,0 +1,23 @@
+import { getData } from "../../services/api";
+import { Dispatch } from "./reducer";
+
+export const fetchRandomMeal = async (dispatch: Dispatch) => {
+ const meal = await getData("random");
+ dispatch({ type: "setMeal", payload: meal?.meals });
+};
+
+export const fetchMeal = async (dispatch: Dispatch, id: string) => {
+ const meal = await getData(id, "lookup");
+ dispatch({ type: "setMeal", payload: meal?.meals });
+};
+
+export const fetchSearchResults = async (
+ dispatch: Dispatch,
+ searchString: string
+) => {
+ const meals = await getData(searchString, "search");
+ dispatch({
+ type: "setSearchResults",
+ payload: { search: meals?.meals, searchString },
+ });
+};
diff --git a/src/store/meal/index.tsx b/src/store/meal/index.tsx
new file mode 100644
index 0000000..9e2a068
--- /dev/null
+++ b/src/store/meal/index.tsx
@@ -0,0 +1,35 @@
+//https://kentcdodds.com/blog/how-to-use-react-context-effectively
+
+import { createContext, FC, useContext, useReducer } from "react";
+import { MealApi, MealSummary } from "../../types/meal";
+import { appReducer, Dispatch } from "./reducer";
+
+export type AppState = {
+ meals: MealApi[];
+ search: MealSummary[];
+ searchString: string;
+};
+
+const initState = {
+ meals: [] as MealApi[],
+ search: [] as MealSummary[],
+ searchString: "",
+};
+
+type ContextType = { state: AppState; dispatch: Dispatch } | undefined;
+
+const AppContext = createContext(undefined);
+
+export const useMeal = () => {
+ const context = useContext(AppContext);
+ if (!context) {
+ throw new Error("useMeal must be used within a AppProvider");
+ }
+ return context;
+};
+
+export const AppProvider: FC = ({ children }) => {
+ const [state, dispatch] = useReducer(appReducer, initState);
+ const value = { state, dispatch };
+ return {children} ;
+};
diff --git a/src/store/meal/reducer.ts b/src/store/meal/reducer.ts
new file mode 100644
index 0000000..84d850c
--- /dev/null
+++ b/src/store/meal/reducer.ts
@@ -0,0 +1,27 @@
+import { MealSummary } from "../../types/meal";
+import { AppState } from "./index";
+
+export const appReducer = (state: AppState, action: Action) => {
+ switch (action.type) {
+ case "setMeal":
+ return { ...state, meals: action.payload };
+ case "setSearchResults":
+ return {
+ ...state,
+ search: action.payload.search,
+ searchString: action.payload.searchString,
+ };
+ case "clearSearchResults":
+ return { ...state, search: [] as MealSummary[] };
+ default: {
+ throw new Error(`Unhandled action type: ${action.type}`);
+ }
+ }
+};
+
+export type Action = {
+ payload?: any;
+ type: "setMeal" | "setSearchResults" | "clearSearchResults";
+};
+
+export type Dispatch = (action: Action) => void;