diff --git a/public/index.html b/public/index.html index aa069f2..b2d4f44 100644 --- a/public/index.html +++ b/public/index.html @@ -2,42 +2,33 @@ - + - + + - - + - + React App - +
- - You can add webfonts, meta tags, or analytics to this file. - The build step will place the bundled scripts into the tag. - To begin the development, run `npm start` or `yarn start`. - To create a production bundle, use `npm run build` or `yarn build`. - --> + diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..faba483 --- /dev/null +++ b/public/style.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/src/App.js b/src/App.js index 3784575..b4db3cd 100644 --- a/src/App.js +++ b/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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ + + + } /> + } /> + } /> + } /> + + ); -} +}; export default App; diff --git a/src/BeerDetails.js b/src/BeerDetails.js new file mode 100644 index 0000000..16f775c --- /dev/null +++ b/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
Loading...
; + } + + return ( +
+

{beer.name}

+ {beer.name} +

{beer.tagline}

+

First Brewed: {beer.first_brewed}

+

Attenuation Level: {beer.attenuation_level}

+

Description: {beer.description}

+

Contributed by: {beer.contributed_by}

+
+ ); +}; + +export default BeerDetails; diff --git a/src/BeerList.js b/src/BeerList.js new file mode 100644 index 0000000..5acf679 --- /dev/null +++ b/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 ( +
+

All Beers

+ + +
+ ); +}; + +export default BeerList; diff --git a/src/NewBeerForm.js b/src/NewBeerForm.js new file mode 100644 index 0000000..9c7f082 --- /dev/null +++ b/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 ( +
+ + + + + + + + +
+ ); +}; + +export default NewBeerForm; diff --git a/src/RandomBeer.js b/src/RandomBeer.js new file mode 100644 index 0000000..ae44889 --- /dev/null +++ b/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
Loading...
; + } + + return ( +
+

{randomBeer.name}

+ {randomBeer.name} +

{randomBeer.tagline}

+

First Brewed: {randomBeer.first_brewed}

+

Attenuation Level: {randomBeer.attenuation_level}

+

Description: {randomBeer.description}

+

Contributed by: {randomBeer.contributed_by}

+
+ ); +}; + +export default RandomBeer;