completed lab Dillan Patel

src/App.jsx

@@ -6,14 +6,16 @@ import AllBeersPage from "./pages/AllBeersPage";
 import RandomBeerPage from "./pages/RandomBeerPage";
 import AddBeerPage from "./pages/AddBeerPage";
 import BeerDetailsPage from "./pages/BeerDetailsPage";
+import { useState } from "react";
 
 function App() {
+  const [q,setQ]=useState("")
   return (
     <div className="App">
     <Navbar />
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="/beers" element={<AllBeersPage />} />
+        <Route path="/beers" element={<AllBeersPage q={q} setQ={setQ}/>} />
         <Route path="/random-beer" element={<RandomBeerPage />} />
         <Route path="/new-beer" element={<AddBeerPage />} />
         <Route path="/beers/:beerId" element={<BeerDetailsPage />} />

src/components/Search.jsx

@@ -1,4 +1,9 @@
-function Search() {
+function Search({q,setQ}) {
+  const handleQChange = (e)=>{
+    setQ(e.target.value)
+    console.log(q)
+
+  }
   return (
     <div className="d-inline-flex justify-content-center align-items-center w-100 p-4">
       <div className="input-group mb-2 w-50">
@@ -10,6 +15,8 @@ function Search() {
         <input
           type="text"
           className="form-control search-bar"
+          value={q}
+          onChange={handleQChange}
         />
       </div>
     </div>

src/pages/AddBeerPage.jsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
 
 function AddBeerPage() {
   // State variables to store the values of the form inputs. You can leave these as they are.
@@ -21,13 +23,36 @@ function AddBeerPage() {
   const handleAttenuationLevel = (e) => setAttenuationLevel(e.target.value);
   const handleContributedBy = (e) => setContributedBy(e.target.value);
 
-
+  const navigate = useNavigate()
 
   // TASK:
   // 1. Create a function to handle the form submission and send the form data to the Beers API to create a new beer.
   // 2. Use axios to make a POST request to the Beers API.
   // 3. Once the beer is created, navigate the user to the page showing the list of all beers.
 
+const handleNewBeerSubmission = (e)=>{
+e.preventDefault()
+
+const requestBody={
+  name,
+  tagline,
+  description,
+  image_url:imageUrl,
+  first_brewed:firstBrewed,
+  attenuation_level:attenuationLevel,
+  contributed_by:contributedBy
+}
+console.log(requestBody)
+
+  axios.post("https://ih-beers-api2.herokuapp.com/beers/new", requestBody)
+  .then((response)=>{
+    console.log(response)
+    navigate("/")
+  })
+  .catch((e)=>console.log(e))
+
+}
+
 
 
   // Structure and the content of the page showing the form for adding a new beer. You can leave this as it is.
@@ -122,7 +147,7 @@ function AddBeerPage() {
             value={contributedBy}
             onChange={handleContributedBy}
           />
-          <button className="btn btn-primary btn-round">Add Beer</button>
+          <button className="btn btn-primary btn-round" onClick={handleNewBeerSubmission}>Add Beer</button>
         </form>
       </div>
     </>

src/pages/AllBeersPage.jsx

@@ -1,42 +1,56 @@
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Search from "../components/Search";
 import beersJSON from "./../assets/beers.json";
+import axios from "axios";
 
-
-
-function AllBeersPage() {
+function AllBeersPage({q,setQ}) {
   // Mock initial state, to be replaced by data from the API. Once you retrieve the list of beers from the Beers API store it in this state variable.
   const [beers, setBeers] = useState(beersJSON);
 
-
-
   // TASKS:
   // 1. Set up an effect hook to make a request to the Beers API and get a list with all the beers.
   // 2. Use axios to make a HTTP request.
   // 3. Use the response data from the Beers API to update the state variable.
 
+  const getBeers = async () => {
+
+    try {
+      const response = await axios.get(`https://ih-beers-api2.herokuapp.com/beers/search?q=${q}`);
+      setBeers(response.data)
+    } catch (e) {
+      console.log(e);
+    }
+  };
 
+  useEffect(() => {
+    getBeers();
+  }, [q]);
 
   // The logic and the structure for the page showing the list of beers. You can leave this as it is for now.
   return (
     <>
-      <Search />
+      <Search q={q} setQ={setQ}/>
 
       <div className="d-inline-flex flex-wrap justify-content-center align-items-center w-100 p-4">
         {beers &&
           beers.map((beer, i) => {
             return (
               <div key={i}>
                 <Link to={"/beers/" + beer._id}>
-                  <div className="card m-2 p-2 text-center" style={{ width: "24rem", height: "18rem" }}>
+                  <div
+                    className="card m-2 p-2 text-center"
+                    style={{ width: "24rem", height: "18rem" }}
+                  >
                     <div className="card-body">
                       <img
                         src={beer.image_url}
                         style={{ height: "6rem" }}
                         alt={"image of" + beer.name}
                       />
-                      <h5 className="card-title text-truncate mt-2">{beer.name}</h5>
+                      <h5 className="card-title text-truncate mt-2">
+                        {beer.name}
+                      </h5>
                       <h6 className="card-subtitle mb-3 text-muted">
                         <em>{beer.tagline}</em>
                       </h6>

src/pages/BeerDetailsPage.jsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import beersJSON from "./../assets/beers.json";
+import axios from "axios";
 
 
 function BeerDetailsPage() {
@@ -9,7 +10,22 @@ function BeerDetailsPage() {
 
   // React Router hook for navigation. We use it for the back button. You can leave this as it is.
   const navigate = useNavigate();
+  const params=useParams()
 
+  const getBeerData = ()=>{
+    console.log(params.beerId)
+
+    axios
+    .get(`https://ih-beers-api2.herokuapp.com/beers/${params.beerId}`)
+    .then((response)=>setBeer(response.data))
+    .catch((error)=> console.log(error))
+
+  }
+
+  useEffect(()=>{
+    getBeerData()
+
+  },[])
 
 
   // TASKS: