fullstack drinks

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
     "react": "^18.2.0",
+    "react-devtools": "^5.0.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,38 +1,115 @@
-.App {
+/* src/styles.css */
+
+/* Header */
+
+
+header {
+  background-color: #2e65e6;
+  color: #fff;
+  padding: 10px 0;
+  text-align: center;
+}
+
+header nav a {
+  color: #ffffff;
+  text-decoration: none;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: larger;
+  margin: 0 10px;
+}
+
+/* Home Page */
+.home-page {
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.home-page h1 {
+  margin-top: 50px;
+}
+
+.home-page a {
+  display: block;
+  margin: 20px auto;
+  width: 200px;
+  padding: 10px;
+  background-color: #333;
+  color: #fff;
+  text-decoration: none;
+}
+
+/* Beer List */
+.beer-list {
+  margin-top: 20px;
+}
+
+.beer-list input[type="text"] {
+  margin-bottom: 20px;
+  padding: 8px;
+  width: 100%;
+}
+
+.beer-list ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.beer-list li {
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+
+.beer-list img {
+  width: 50px;
+  border-radius: 3px;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+
+/* Beer Detail */
+.beer-detail {
+  margin-top: 20px;
+}
+
+.beer-detail img {
+  margin-bottom: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+/* Random Beer */
+.random-beer {
+  margin-top: 20px;
+}
+
+.random-beer img {
+  margin-bottom: 10px;
+  display: block;
+  margin: 0 auto;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* New Beer Form */
+.new-beer-form {
+  margin-top: 20px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.new-beer-form input[type="text"],
+.new-beer-form input[type="number"],
+.new-beer-form textarea,
+.new-beer-form button {
+  margin-bottom: 10px;
+  padding: 8px;
+  width: 100%;
 }
 
-.App-link {
-  color: #61dafb;
+.new-beer-form button {
+  background-color: #333;
+  color: #fff;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.new-beer-form button:hover {
+  background-color: #555;
 }

src/App.js

@@ -1,24 +1,27 @@
-import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import HomePage from './components/HomePage';
+import Header from './components/Header';
+import BeerList from './components/BeerList';
+import BeerDetail from './components/BeerDetail';
+import RandomBeer from './components/RandomBeer';
+import NewBeerForm from './components/NewBeerForm';
 
 function 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>
+        <div>
+          <Header  />
+          <Routes>
+            <Route path="/" exact Component={HomePage} />
+            <Route path="/beers" exact Component={BeerList} />
+            <Route path="/beers/:id" Component={BeerDetail} />
+            <Route path="/random-beer" Component={RandomBeer} />
+            <Route path="/new-beer" Component={NewBeerForm} />
+          </Routes>
+        </div>
+      </Router>
   );
 }
 

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/components/BeerDetail.css

@@ -0,0 +1,36 @@
+.beer-detail-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.beer-detail {
+    text-align: center;
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.beer-detail img {
+    display: block;
+    margin: 0 auto;
+    width: 150px;
+    max-width: 300px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+.beer-detail h2 {
+    margin-top: 20px;
+    font-size: 24px;
+}
+
+.beer-detail p {
+    margin: 10px 0;
+    line-height: 1.5;
+}
+
+.beer-detail p strong {
+    font-weight: bold;
+}
+

src/components/BeerDetail.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+import "./BeerDetail.css";
+
+const BeerDetail = () => {
+  const [beer, setBeer] = useState(null);
+  const { id } = useParams();
+
+  useEffect(() => {
+    const fetchBeer = async () => {
+      try {
+        const response = await axios.get(`https://ih-beers-api2.herokuapp.com/beers/${id}`);
+        setBeer(response.data);
+      } catch (error) {
+        console.error('Error fetching beer:', error);
+      }
+    };
+
+    fetchBeer();
+  }, [id]);
+
+  return (
+    <div className="beer-detail-container">
+      {beer && (
+        <div className="beer-detail">
+          <img src={beer.image_url} alt={beer.name} style={{ width: '150px' }} />
+          <h2>{beer.name}</h2>
+          <p>{beer.tagline}</p>
+          <p><strong>First Brewed:</strong> {beer.first_brewed}</p>
+          <p><strong>Attenuation Level:</strong> {beer.attenuation_level}</p>
+          <p><strong>Description:</strong> {beer.description}</p>
+          <p><strong>Contributed by:</strong> {beer.contributed_by}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default BeerDetail;

src/components/BeerList.css

@@ -0,0 +1,59 @@
+.beer-list-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+li {
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    overflow: hidden;
+}
+
+li a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #333;
+}
+
+li a:hover {
+    background-color: #f9f9f9;
+}
+
+li img {
+    width: 50px;
+    margin: 20px 20px 20px 20px;
+}
+
+li div {
+    flex-grow: 1;
+}
+
+li h3 {
+    margin: 0;
+}
+
+li p {
+    margin: 5px 0;
+    color: #666;
+}