Added logic to change text with API response

nooobcoder · nooobcoder · commit ec40d0b540bb · 2021-07-07T13:18:55.000+05:30
diff --git a/RecipeFinder/.env b/RecipeFinder/.env
@@ -1,2 +1,3 @@
 PORT = 1035
-HOST = 0.0.0.0
+HOST = 0.0.0.0
+REACT_APP_MEALDB_API = https://www.themealdb.com/
diff --git a/RecipeFinder/src/components/Header.jsx b/RecipeFinder/src/components/Header.jsx
@@ -1,17 +1,48 @@
-import { Fragment } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 
 import { setLoading } from "../store/";
+import { setSearchResult } from "../store/searchSlice";
 import styles from "../styles/Header.module.css";
+import { fetchMealByName } from "../thunk/fetchMealByName";
+
+const DEFAULT_STATUS_TEXT = `Type a Dish Name to Search for it's ingredient`;
 
 const Header = () => {
-	const loading = useSelector(({ app }) => app);
+	const { loading } = useSelector(({ app }) => app);
+	const [statusText, setStatusText] = useState(null);
+
+	useEffect(() => {
+		setStatusText(DEFAULT_STATUS_TEXT);
+	}, []);
+
+	useEffect(() => {
+		setStatusText((prevState) => (loading ? "Loading" : prevState));
+	}, [loading]);
+
+	const searchInput = useRef();
 	const actionDispatcher = useDispatch();
 
 	const setLoadingTo = (status) => {
 		if (typeof status === "boolean") actionDispatcher(setLoading(status));
 	};
 
+	const searchMealAPI = async () => {
+		try {
+			if (searchInput.current.value.trim().length !== 0) {
+				setLoadingTo(true);
+				const searchResult = await fetchMealByName(searchInput.current.value);
+				if (searchResult !== null) {
+					actionDispatcher(setSearchResult(searchResult));
+					setStatusText("");
+				} else setStatusText("No data has been recieved");
+			}
+		} catch (error) {
+			console.error(error);
+		} finally {
+			setLoadingTo(false);
+		}
+	};
 	return (
 		<Fragment>
 			<h1 className={styles.app_heading}>Recipe Finder</h1>
@@ -20,11 +51,17 @@ const Header = () => {
 					type="text"
 					placeholder="Enter the Name of the Dish"
 					className={styles.input_recipe}
+					ref={searchInput}
 				/>
-				<button onClick={() => setLoadingTo(true)}>Get Ingredients</button>
-				<p className={styles.search_comment}>
-					Type a Dish Name to Search for it's ingredient
-				</p>
+				<button
+					onClick={() => {
+						setLoadingTo(true);
+						searchMealAPI();
+					}}
+				>
+					Get Ingredients
+				</button>
+				<p className={styles.search_comment}>{statusText}</p>
 			</span>
 		</Fragment>
 	);
diff --git a/RecipeFinder/src/store/searchSlice.js b/RecipeFinder/src/store/searchSlice.js
@@ -5,7 +5,14 @@ const initialState = { searchResult: null };
 const searchSlice = createSlice({
 	name: "search",
 	initialState,
-	reducers: { setSearchResult: async (prevState, action) => {} },
+	reducers: {
+		setSearchResult: (prevState, { payload }) => {
+			return {
+				...prevState,
+				searchResult: payload,
+			};
+		},
+	},
 });
 
 export const { setSearchResult } = searchSlice.actions;
diff --git a/RecipeFinder/src/thunk/fetchMealByName.js b/RecipeFinder/src/thunk/fetchMealByName.js
@@ -0,0 +1,14 @@
+/**
+ * Makes a GET request to https://www.themealdb.com/api/json/v1/1/search.php?s={searchQuery} to fetch the recipe.
+ * @param {string} searchQuery
+ */
+
+const fetchMealByName = async (searchQuery) => {
+	const API_STRING = `${process.env.REACT_APP_MEALDB_API}api/json/v1/1/search.php?s=${searchQuery}`;
+	const raw_request = await fetch(API_STRING, { method: "GET" });
+
+	const { meals } = await raw_request.json();
+	return meals;
+};
+
+export { fetchMealByName };
