done

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,25 +1,27 @@
-import logo from './logo.svg';
-import './App.css';
+// App.js
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import BeerList from './beerList';
+import BeerDetails from './beerDetails';
+import RandomBeer from './randomBeer';
+import NewBeerForm from './newBeerForm';
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <nav>
+        <Link to="/beers">All Beers</Link>
+        <Link to="/random-beer">Random Beer</Link>
+        <Link to="/new-beer">New Beer</Link>
+      </nav>
+      <Routes>
+        <Route path="/beers" element={<BeerList />} />
+        <Route path="/beers/:beerId" element={<BeerDetails />} />
+        <Route path="/random-beer" element={<RandomBeer />} />
+        <Route path="/new-beer" element={<NewBeerForm />} />
+      </Routes>
+    </Router>
   );
-}
+};
 
-export default App;
+export default App;

src/beerDetails.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+const BeerDetails = () => {
+  const { beerId } = useParams();
+  const [beer, setBeer] = useState(null);
+
+  useEffect(() => {
+    // Fetch data for the selected beer
+    fetch(`https://ih-beers-api2.herokuapp.com/beers/${beerId}`)
+      .then((response) => response.json())
+      .then((data) => setBeer(data))
+      .catch((error) => console.error('Error fetching beer details:', error));
+  }, [beerId]);
+
+  if (!beer) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h2>{beer.name}</h2>
+      <img src={beer.image_url} alt={beer.name} style={{ maxWidth: '100px' }} />
+      <p>{beer.tagline}</p>
+      <p>First Brewed: {beer.first_brewed}</p>
+      <p>Attenuation Level: {beer.attenuation_level}</p>
+      <p>Description: {beer.description}</p>
+      <p>Contributed by: {beer.contributed_by}</p>
+    </div>
+  );
+};
+
+export default BeerDetails;

src/newBeerForm.js

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+const NewBeerForm = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    tagline: '',
+    description: '',
+    first_brewed: '',
+    brewers_tips: '',
+    attenuation_level: '',
+    contributed_by: '',
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Perform POST request to create a new beer
+    fetch('https://ih-beers-api2.herokuapp.com/beers/new', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(formData),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log('New beer created successfully:', data);
+        // Optionally, you can redirect to another page or update the UI
+      })
+      .catch((error) => console.error('Error creating new beer:', error));
+  };
+
+  return (
+    <form className="new-beer-form" onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" name="name" value={formData.name} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Tagline:
+        <input type="text" name="tagline" value={formData.tagline} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Description:
+        <input type="text" name="description" value={formData.description} onChange={handleInputChange} required />
+      </label>
+      <label>
+        First Brewed:
+        <input type="text" name="first_brewed" value={formData.first_brewed} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Brewers Tips:
+        <input type="text" name="brewers_tips" value={formData.brewers_tips} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Attenuation Level:
+        <input type="number" name="attenuation_level" value={formData.attenuation_level} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Contributed By:
+        <input type="text" name="contributed_by" value={formData.contributed_by} onChange={handleInputChange} required />
+      </label>
+      <button type="submit">Create Beer</button>
+    </form>
+  );
+};
+
+export default NewBeerForm;

src/randomBeer.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+const RandomBeer = () => {
+  const [randomBeer, setRandomBeer] = useState(null);
+
+  useEffect(() => {
+    // Fetch data for a random beer
+    fetch('https://ih-beers-api2.herokuapp.com/beers/random')
+      .then((response) => response.json())
+      .then((data) => setRandomBeer(data))
+      .catch((error) => console.error('Error fetching random beer details:', error));
+  }, []);
+
+  if (!randomBeer) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h2>{randomBeer.name}</h2>
+      <img src={randomBeer.image_url} alt={randomBeer.name} style={{ maxWidth: '100px' }} />
+      <p>{randomBeer.tagline}</p>
+      <p>First Brewed: {randomBeer.first_brewed}</p>
+      <p>Attenuation Level: {randomBeer.attenuation_level}</p>
+      <p>Description: {randomBeer.description}</p>
+      <p>Contributed by: {randomBeer.contributed_by}</p>
+    </div>
+  );
+};
+
+export default RandomBeer;