Utils

wellnessproject/package.json → wellnessproject/client/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

wellnessproject/src/App.js → wellnessproject/client/src/App.js

@@ -1,8 +1,11 @@
 import React from "react";
+import IndexPage from "./components";
+
 
 function App() {
   return (
     <div className="App">
+      <IndexPage/>
 
     </div>
   );

wellnessproject/client/src/components/SearchForm.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+function SearchForm(props) {
+  return (
+    <form className="search">
+      <div className="form-group">
+        <label htmlFor="language">Search Term:</label>
+        <input
+          value={props.search}
+          onChange={props.handleInputChange}
+          name="term"
+          type="term"
+          className="form-control"
+          placeholder="Search for Data"
+          id="search"
+        />
+      </div>
+    </form>
+  );
+}
+
+export default SearchForm;

wellnessproject/client/src/components/SearchResults.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+function SearchResults(props){    
+    console.log(props.items)
+    //const myItems = props.items
+    //console.log(myItems)
+    return(
+        <ul className="list-group">
+            {props.items.map(item => (
+                <li className="list-group-item" key={item.fdcId}>
+                    {item.description}
+                </li>
+
+            ))}
+        </ul>
+    );
+}
+
+export default SearchResults;

wellnessproject/client/src/components/index.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import SearchForm from "./SearchForm";
+import SearchResults from "./SearchResults";
+import API from "../utils/API";
+
+const IndexPage = () => {
+    const [search, setSearch] = useState("");
+    const [items, setItems] = useState([]);
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        if(!search){
+            return;
+        }
+
+        API.getData(search)
+        .then((res)=> {
+            // console.log(res.data[1].foodNutrients)
+            // console.log(res.data)
+
+            setItems(res.data)
+
+        })       
+
+        .catch(err=> setError(err));
+    }, [search]);
+
+
+
+    const handleInputChange = event => {
+        setSearch(event.target.value);
+        console.log(event.target.value);
+    }
+
+
+    return (
+        <div>
+            <SearchForm
+            handleInputChange={handleInputChange}
+            results={search}
+            />
+            <SearchResults
+            items={items}
+            />
+        </div>
+
+    );
+
+}
+
+
+export default IndexPage;

wellnessproject/client/src/utils/API.js

@@ -0,0 +1,75 @@
+import axios from "axios";
+
+// API for USDA
+
+const BASEURL = "https://api.nal.usda.gov/fdc/v1/foods/list";
+const APIKEY = "?api_key=";
+const query = "&query="
+
+
+export default {
+    getData: (search) => 
+        axios({
+            'method':'GET',
+            'url': BASEURL+APIKEY+query+search,
+        })
+
+}
+
+
+
+// RapidAPI Nutrionix
+
+// const BASEURL="https://nutritionix-api.p.rapidapi.com/v1_1/search/"
+
+// export default {
+//     getData: (search) =>
+
+//         axios({
+//             'method':'GET',
+//             'url': BASEURL+search,
+//             'headers': {
+//                 'x-rapidapi-key':'',
+//                 'x-rapidapi-host':'nutritionix-api.p.rapidapi.com'
+//             },
+//             'params': {'fields': 'item_name,item_id,brand_name,nf_calories,nf_total_fat'},
+
+
+//         })
+// }
+
+// //RapidAPI Edaman 
+
+// export default {
+//     getData: () => 
+//         axios({
+//             'method':'GET',
+//             'url':'https://edamam-food-and-grocery-database.p.rapidapi.com/parser',
+//             'headers': {
+//                 'x-rapidapi-key':'',
+//                 'x-rapidapi-host':'edamam-food-and-grocery-database.p.rapidapi.com'
+//             },
+//             'params': {'ingr': 'chicken'},
+
+
+//         })
+// }
+
+//RAPIDAPI Calories Ninja
+
+
+// export default {
+//     getData: () => 
+//         axios({
+//             'method':'GET',
+//             'url':'https://calorieninjas.p.rapidapi.com/v1/nutrition',
+//             'headers': {
+//                 'x-rapidapi-key':'',
+//                 'x-rapidapi-host':'calorieninjas.p.rapidapi.com'
+//             },
+//             'params': {'query': 'chicken'},
+
+
+//         })
+// }
+