web-dev-open · Prashanthg300 · Jan 22, 2024
diff --git a/reactive-beerjs/package-lock.json b/reactive-beerjs/package-lock.json
diff --git a/reactive-beerjs/package.json b/reactive-beerjs/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "reactive-beerjs",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.2",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/reactive-beerjs/public/favicon.ico b/reactive-beerjs/public/favicon.ico
diff --git a/reactive-beerjs/public/index.html b/reactive-beerjs/public/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="./styles.css">
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <title>React App</title>
+  </head>
+  <body>
+
+    <div id="root"></div>
+
+    <!-- <nav>
+      <a href="#home">Home</a>
+      <a href="#beers" onclick="window.location.href='/beers'">All Beers</a>> 
+      <a href="#Random Beers">Random Beers</a>
+      <a href="#New Beer">New Beer</a>
+      <a href="#Random Beer" onclick="window.location.href='/random-beer'">Random Beer</a>
+
+    </nav> -->
+
+
+      <script src="index.js"></script>
+  </body>
+</html>
diff --git a/reactive-beerjs/public/logo192.png b/reactive-beerjs/public/logo192.png
diff --git a/reactive-beerjs/public/logo512.png b/reactive-beerjs/public/logo512.png
diff --git a/reactive-beerjs/public/manifest.json b/reactive-beerjs/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/reactive-beerjs/public/robots.txt b/reactive-beerjs/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/reactive-beerjs/public/styles.css b/reactive-beerjs/public/styles.css
@@ -0,0 +1,56 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+nav {
+    background-color: #333;
+    overflow: hidden;
+}
+
+nav a {
+    float: left;
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+nav a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+/* styles.css */
+/* Existing styles ... */
+
+.new-beer-form-container {
+    padding: 20px;
+  }
+
+  .new-beer-form {
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  .new-beer-form label {
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  .new-beer-form input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+  }
+
+  .new-beer-form button {
+    background-color: #007bff;
+    color: #fff;
+    padding: 10px 15px;
+    border: none;
+    cursor: pointer;
+  }
+
diff --git a/reactive-beerjs/src/App.css b/reactive-beerjs/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.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;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/reactive-beerjs/src/App.js b/reactive-beerjs/src/App.js
@@ -0,0 +1,27 @@
+// 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';
+
+const App = () => {
+  return (
+    <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;
diff --git a/reactive-beerjs/src/App.test.js b/reactive-beerjs/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/reactive-beerjs/src/BeerDetails.js b/reactive-beerjs/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;
diff --git a/reactive-beerjs/src/BeerList.js b/reactive-beerjs/src/BeerList.js
@@ -0,0 +1,41 @@
+// BeerList.js
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+const BeerList = () => {
+  const [beers, setBeers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    // Fetch data from the API
+    fetch(`https://ih-beers-api2.herokuapp.com/beers/search?q=${searchQuery}`)
+      .then((response) => response.json())
+      .then((data) => setBeers(data))
+      .catch((error) => console.error('Error fetching data:', error));
+  }, [searchQuery]);
+
+  const handleSearchChange = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  return (
+    <div>
+      <h2>All Beers</h2>
+      <input type="text" placeholder="Search for beers" value={searchQuery} onChange={handleSearchChange} />
+      <ul>
+        {beers.map((beer) => (
+          <li key={beer.id}>
+            <img src={beer.image_url} alt={beer.name} style={{ maxWidth: '50px' }} />
+            <h3>{beer.name}</h3>
+            <p>{beer.tagline}</p>
+            <p>Contributed by: {beer.contributed_by}</p>
+            {/* Link to beer details */}
+            <Link to={`/beers/${beer.id}`}>Details</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default BeerList;
diff --git a/reactive-beerjs/src/NewBeerForm.js b/reactive-beerjs/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;