web-dev-open · Hking0o1 · May 2, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,24 @@
-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 Beers from './components/Beer';
+import SingleBeer from './components/SingleBeer';
+import RandomBeer from './components/RandomBeer';
+import NewBeerForm from './components/NewBeerForm';
+// Import other components
 
 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>
-  );
-}
+    return ( 
+        <Router>
+            <Routes>
+              <Route path = "/" element = { < HomePage / > }/>
+              <Route path = "/beers" element = { <Beers />} />
+              <Route path="/beers/:beerId" element={ <SingleBeer />} />
+              <Route path="/random-beer" element={ <RandomBeer />} />
+              <Route path="/new-beer" element={ <NewBeerForm />} />
+            </Routes>
+        </Router>
+        );
+    }
 
-export default App;
+    export default App;
diff --git a/src/components/Beer.js b/src/components/Beer.js
@@ -0,0 +1,81 @@
+
+import './Beers.css';
+import Header from './Header';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+// Styled components
+const Container = styled.div`
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+const SearchInput = styled.input`
+    padding: 10px;
+    margin: 20px 0;
+    width: 300px;
+    font-size: 16px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+`;
+
+const BeerList = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+`;
+
+const BeerItem = styled.div`
+    background: #f0f0f0;
+    border-radius: 8px;
+    padding: 10px;
+    margin: 10px 0;
+    width: 80%;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+`;
+
+function Beers() {
+    const [query, setQuery] = useState('');
+    const [beers, setBeers] = useState([]);
+
+    useEffect(() => {
+        if (query.length > 0) {
+            fetch(`https://ih-beers-api2.herokuapp.com/beers/search?q=${query}`)
+                .then(response => response.json())
+                .then(data => setBeers(data))
+                .catch(error => console.error('Error fetching data: ', error));
+        }
+    }, [query]);
+
+    return (
+        <Container>
+            <Header />
+            <SearchInput
+                type="text"
+                placeholder="Search beers..."
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+            />
+            <BeerList>
+                {beers.map(beer => (
+                    <BeerItem key={beer._id}>
+                        <div className="beerDetails">
+                            <h2 className="beerName">{beer.name}</h2>
+                            <p className="beerTagline">{beer.tagline}</p>
+                            <p className="beerContributor">Contributed by: {beer.contributed_by}</p>
+                            <a href={`/beers/${beer._id}`} className="beerLink">View Details</a>
+                        </div>
+                        <div key={beer._id} className="beerItem">
+                            <img src={beer.image_url} alt={beer.name} className="beerImage" />
+                        </div>
+                    </BeerItem>
+                ))}
+            </BeerList>
+        </Container>
+    );
+}
+
+export default Beers;
diff --git a/src/components/Beers.css b/src/components/Beers.css
@@ -0,0 +1,43 @@
+.beersContainer {
+    padding: 20px;
+  }
+
+  .beerItem {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 8px;
+  }
+
+  .beerImage {
+    height: 150px;
+    margin-right: 20px;
+    border-radius: 4px;
+  }
+
+  .beerDetails {
+    flex: 1;
+  }
+
+  .beerName {
+    margin: 0 0 10px 0;
+  }
+
+  .beerTagline {
+    margin: 0 0 10px 0;
+    font-style: italic;
+  }
+
+  .beerContributor {
+    margin: 0;
+  }
+
+  .beerLink {
+    margin-top: 10px;
+    display: inline-block;
+    text-decoration: none;
+    color: #007BFF;
+    font-weight: bold;
+  }
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function Header() {
+    return (
+        <header style={{ display: 'flex', justifyContent: 'center', height: '90px' }}>
+            <Link to="/">
+                <img src="https://user-images.githubusercontent.com/23629340/40707029-cb2fce12-63ef-11e8-939c-f673ff3b965d.png" alt="Home" />
+            </Link>
+        </header>
+    );
+}
+
+export default Header;
diff --git a/src/components/HomePage.css b/src/components/HomePage.css
@@ -0,0 +1,92 @@
+.home-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    padding: 20px;
+    gap: 20px; /* Ensures spacing between items */
+}
+
+.beer-item {
+    flex: 1 1 300px; /* Flex grow, flex shrink, flex basis */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background-color: #f9f9f9; /* Light grey background */
+    border-radius: 8px; /* Rounded corners for the beer items */
+    padding: 20px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
+}
+
+.beer-image {
+    width: 50vw; 
+    height: auto; 
+    margin-bottom: 10px;
+}
+
+.beer-item p {
+    margin: 10px 0;
+    color: #333; /* Dark grey text */
+    font-size: 16px; /* Readable font size */
+}
+
+.beer-item a {
+    text-decoration: none;
+    color: #0077cc; /* Link color */
+    font-weight: bold;
+    padding: 10px 20px;
+    border: 2px solid #0077cc; /* Border matching the text color */
+    border-radius: 5px; /* Rounded corners for the link */
+    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
+}
+
+.beer-item a:hover {
+    background-color: #0077cc; /* Background color on hover */
+    color: white; /* Text color on hover */
+}
+
+@media (max-width: 768px) {
+    .home-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .beer-item {
+        width: 90%; /* Full width on smaller screens */
+    }
+}
+.NewBeerForm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+}
+
+.NewBeerForm input[type="text"],
+.NewBeerForm input[type="number"] {
+    width: 80%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.NewBeerForm button {
+    width: 50%;
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.NewBeerForm button:hover {
+    background-color: #45a049;
+}
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import beerImage1 from '../assets/beers.png';
+import beerImage2 from '../assets/new-beer.png';
+import beerImage3 from '../assets/random-beer.png';
+import './HomePage.css';
+
+function HomePage() {
+    return (
+        <div className="home-container">
+            <header style={{ textAlign: 'center', marginBottom: '30px' }}>
+                <h1 style={{ fontSize: '48px', color: '#333' }}>Our Beers</h1>
+                <p style={{ fontSize: '26px', color: '#666' }}>Explore a wide variety of beers from around the world.</p>
+            </header>
+            <div className="beer-item">
+                <img src={beerImage1} alt="Beer 1" className="beer-image" />
+                <p>Discover our finest selection of craft beers.</p>
+                <Link to="/beers">Explore All Beers</Link>
+            </div>
+            <div className="beer-item">
+                <img src={beerImage2} alt="Beer 2" className="beer-image" />
+                <p>Feeling adventurous? Try a random beer!</p>
+                <Link to="/random-beer">Get a Random Beer</Link>
+            </div>
+            <div className="beer-item">
+                <img src={beerImage3} alt="Beer 3" className="beer-image" />
+                <p>Have a unique recipe? Add your own beer to our collection.</p>
+                <Link to="/new-beer">Create New Beer</Link>
+            </div>
+        </div>
+    );
+}
+
+export default HomePage;
diff --git a/src/components/NewBeerForm.js b/src/components/NewBeerForm.js
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import './HomePage.css'
+function NewBeerForm() {
+    const [formData, setFormData] = useState({
+        name: '',
+        tagline: '',
+        description: '',
+        first_brewed: '',
+        brewers_tips: '',
+        attenuation_level: 0,
+        contributed_by: ''
+    });
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prevState => ({
+            ...prevState,
+            [name]: name === 'attenuation_level' ? Number(value) : value
+        }));
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await axios.post('https://ih-beers-api2.herokuapp.com/beers/new', formData);
+            if (response.status === 200) {
+                alert('New beer successfully saved to database!');
+                setFormData({
+                    name: '',
+                    tagline: '',
+                    description: '',
+                    first_brewed: '',
+                    brewers_tips: '',
+                    attenuation_level: 0,
+                    contributed_by: ''
+                });
+            }
+        } catch (error) {
+            alert('Failed to save the beer. Error: ' + error.response.data.message);
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className='NewBeerForm'>
+            <h1>Add a new Beer</h1>
+            <input type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Name" />
+            <input type="text" name="tagline" value={formData.tagline} onChange={handleChange} placeholder="Tagline" />
+            <input type="text" name="description" value={formData.description} onChange={handleChange} placeholder="Description" />
+            <input type="text" name="first_brewed" value={formData.first_brewed} onChange={handleChange} placeholder="First Brewed" />
+            <input type="text" name="brewers_tips" value={formData.brewers_tips} onChange={handleChange} placeholder="Brewers Tips" />
+            <input type="number" name="attenuation_level" value={formData.attenuation_level} onChange={handleChange} placeholder="Attenuation Level" />
+            <input type="text" name="contributed_by" value={formData.contributed_by} onChange={handleChange} placeholder="Contributed By" />
+            <button type="submit">Create Beer</button>
+        </form>
+    );
+}
+
+export default NewBeerForm;