Basic search with API working

[issue-30] Rebased off main to get changes

src/services/spoonacular-service.js

@@ -79,4 +79,4 @@ export const API = {
   findRecipeById,
   getRecipeIntructions,
   findSimilarRecipeById,
-};
+};

src/stories/pages/SearchPage/SearchPage.js

@@ -1,9 +1,11 @@
 import './styles.scss';
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Footer } from '../../components/Footer/Footer';
+// import { Footer } from '../../components/Footer/Footer';
+import { Teaser } from '../../components/Teaser/Teaser';
+import spoonService from '../../../services/spoonacular-service';
 
 /**
  * Component for SearchPage.
@@ -15,10 +17,42 @@ import { Footer } from '../../components/Footer/Footer';
  * )
  */
 export const SearchPage = ({ test }) => {
-  // const helloWorld = 'Hello World!';
+  const [listItems, setListItems] = useState(['a', 'b', 'c', 'd']);
+  const [searchTerms, setSearchTerms] = useState('');
+
+  const updateTermAndSearchApi = () => {
+    alert('clicked button');
+    setListItems([]);
+    // const tempList = [];
+    spoonService.findRecipesByKeywords(listItems)
+      .then((theRecipes) => alert(theRecipes.length));
+    // .then((theRecipes) => theRecipes.map( (recipe) => {
+    //   tempList.push( recipe );
+    // }));
+    // alert(tempList);
+    // alert(listItems);
+  };
+
   return (
     <>
       <h2>SEARCH_PAGE:_{test}</h2>
+      <h4>SEARCH_TERMS:_{searchTerms}</h4>
+      <input
+        onChange={(e) => setSearchTerms(e.target.value)}
+        value={searchTerms}></input>
+      <div><button
+        onClick={() => updateTermAndSearchApi()}>Search</button></div>
+      {listItems}
+      {/* <ul>
+        <li>ahhh</li>
+        <li>{listItems}</li>
+        {
+          listItems.map((item) =>
+            <li key={item}>Ahhh{item}</li>,
+          )
+        }
+      </ul> */}
+      <Teaser />
       {/* <Footer /> */}
     </>
   );