From 2e252e69779dcf774e13dbf00526a4ae79f2374d Mon Sep 17 00:00:00 2001 From: AdityaKoche01 Date: Sat, 24 Feb 2024 21:55:19 +0530 Subject: [PATCH 1/2] done --- package-lock.json | 72 +++++++++++++++++++++++++++++++ package.json | 2 + src/App.js | 39 +++++++++-------- src/Header.css | 21 +++++++++ src/Home.css | 4 ++ src/assets/home.png | Bin 0 -> 8020 bytes src/components/Beers.js | 69 +++++++++++++++++++++++++++++ src/components/Header.js | 24 +++++++++++ src/components/Home.js | 28 ++++++++++++ src/components/NewBeer.js | 79 ++++++++++++++++++++++++++++++++++ src/components/SingleBeer.js | 46 ++++++++++++++++++++ src/components/random-beer.js | 44 +++++++++++++++++++ src/index.css | 1 + src/index.js | 1 + 14 files changed, 413 insertions(+), 17 deletions(-) create mode 100644 src/Header.css create mode 100644 src/Home.css create mode 100644 src/assets/home.png create mode 100644 src/components/Beers.js create mode 100644 src/components/Header.js create mode 100644 src/components/Home.js create mode 100644 src/components/NewBeer.js create mode 100644 src/components/SingleBeer.js create mode 100644 src/components/random-beer.js diff --git a/package-lock.json b/package-lock.json index 3c65e57..695ea7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,9 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", + "switch": "^0.0.0", "web-vitals": "^2.1.4" } }, @@ -3085,6 +3087,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz", + "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -13971,6 +13981,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz", + "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==", + "dependencies": { + "@remix-run/router": "1.15.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz", + "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==", + "dependencies": { + "@remix-run/router": "1.15.1", + "react-router": "6.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -15286,6 +15326,11 @@ "boolbase": "~1.0.0" } }, + "node_modules/switch": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/switch/-/switch-0.0.0.tgz", + "integrity": "sha512-Pvi4hlAXWHEIT+4XlQEPPIQ02hRzvn38K/cnZ5sZeM11FsDPoXvBD6i/zyVxFK6cgqSlS8sA5/sIwUGp9+ZMhw==" + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -18835,6 +18880,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz", + "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -26585,6 +26635,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz", + "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==", + "requires": { + "@remix-run/router": "1.15.1" + } + }, + "react-router-dom": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz", + "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==", + "requires": { + "@remix-run/router": "1.15.1", + "react-router": "6.22.1" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -27562,6 +27629,11 @@ } } }, + "switch": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/switch/-/switch-0.0.0.tgz", + "integrity": "sha512-Pvi4hlAXWHEIT+4XlQEPPIQ02hRzvn38K/cnZ5sZeM11FsDPoXvBD6i/zyVxFK6cgqSlS8sA5/sIwUGp9+ZMhw==" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 022d9bf..11a0ea8 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", + "switch": "^0.0.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index 3784575..c1f6563 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,29 @@ -import logo from './logo.svg'; +// src/App.js + +import React from 'react'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import './App.css'; +import Home from './components/Home'; +import Beers from './components/Beers'; +import RandomBeer from './components/random-beer'; +import NewBeer from './components/NewBeer'; +import Header from './components/Header'; function App() { return ( -
-
- logo -

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

- - Learn React - -
-
+ +
+
+ + + + + + + + +
+ ); } diff --git a/src/Header.css b/src/Header.css new file mode 100644 index 0000000..1281767 --- /dev/null +++ b/src/Header.css @@ -0,0 +1,21 @@ +nav{ + padding:50px; + background-color: aqua; + border: 2px solid rgb(40, 45, 47); + +} + +link{ + text-decoration: none; + +} + +.Home{ + text-decoration:none; + display: flex; + justify-content: center; +} +.Home img{ + width:50px; + +} \ No newline at end of file diff --git a/src/Home.css b/src/Home.css new file mode 100644 index 0000000..973668c --- /dev/null +++ b/src/Home.css @@ -0,0 +1,4 @@ +.Home-contents{ + justify-content: center; + display:inline; +} \ No newline at end of file diff --git a/src/assets/home.png b/src/assets/home.png new file mode 100644 index 0000000000000000000000000000000000000000..95eae8b11cc0df701f224f3acbfd2bcf37a4a0aa GIT binary patch literal 8020 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 { + const fetchBeers = async () => { + try { + const response = await fetch(`https://ih-beers-api2.herokuapp.com/beers/search?q=${searchQuery}`); + if (response.ok) { + const data = await response.json(); + setBeers(data); + setIsLoading(false); + } else { + console.error('Failed to fetch filtered beers'); + } + } catch (error) { + console.error('Error fetching filtered beers:', error); + } + }; + + if (searchQuery) { + fetchBeers(); + } + + return () => { + + setIsLoading(true); + }; + }, [searchQuery]); + + const handleChange = (e) => { + setSearchQuery(e.target.value); + }; + + return ( +
+

All Beers

+ + {isLoading ? ( +
Loading...
+ ) : ( +
+ {beers.length === 0 ? ( +
No beers found
+ ) : ( +
+ {beers.map((beer) => ( +
+ {beer.name} +

Name: {beer.name}

+

Tagline: {beer.tagline}

+

Contributed by: {beer.contributed_by}

+
+
+ ))} +
+ )} +
+ )} +
+ ); +} + +export default Beers; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..955c677 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,24 @@ +// src/components/Header.js + +import React from 'react'; +import { Link } from 'react-router-dom'; +import "../Header.css" + +function Header() { + return ( +
+ +
+ ); +} + +export default Header; diff --git a/src/components/Home.js b/src/components/Home.js new file mode 100644 index 0000000..00d6e6a --- /dev/null +++ b/src/components/Home.js @@ -0,0 +1,28 @@ +// src/components/Home.js + +import React from 'react'; +import { Link } from 'react-router-dom'; + +function Home() { + return ( +
+

Welcome to RootBeers!

+
+ + beer.png + + + + random + + + + new + + +
+
+ ); +} + +export default Home; diff --git a/src/components/NewBeer.js b/src/components/NewBeer.js new file mode 100644 index 0000000..477f943 --- /dev/null +++ b/src/components/NewBeer.js @@ -0,0 +1,79 @@ +// src/components/NewBeer.js + +import React, { useState } from 'react'; + +function NewBeer() { + const [formData, setFormData] = useState({ + name: '', + tagline: '', + description: '', + first_brewed: '', + brewers_tips: '', + attenuation_level: '', + contributed_by: '' + }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + const response = await fetch('https://ih-beers-api2.herokuapp.com/beers/new', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(formData) + }); + if (response.ok) { + console.log('New beer successfully created!'); + } else { + console.error('Failed to create new beer'); + } + } catch (error) { + console.error('Error creating new beer:', error); + } + }; + + return ( +
+

Create a New Beer

+
+ + + + + + + + +
+
+ ); +} + +export default NewBeer; diff --git a/src/components/SingleBeer.js b/src/components/SingleBeer.js new file mode 100644 index 0000000..c6cc283 --- /dev/null +++ b/src/components/SingleBeer.js @@ -0,0 +1,46 @@ +// src/components/SingleBeer.js + +import React, { useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; + +function SingleBeer() { + const { beerId } = useParams(); + const [beer, setBeer] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + fetch(`https://ih-beers-api2.herokuapp.com/beers/${beerId}`) + .then(response => response.json()) + .then(data => { + setBeer(data); + setIsLoading(false); + }) + .catch(error => { + console.error('Error fetching beer details:', error); + setIsLoading(false); + }); + }, [beerId]); + + if (isLoading) { + return
Loading...
; + } + + if (!beer) { + return
Beer not found
; + } + + return ( +
+

Beer Details

+ {beer.name} +

Name: {beer.name}

+

Tagline: {beer.tagline}

+

First Brewed: {beer.first_brewed}

+

Attenuation Level: {beer.attenuation_level}

+

Description: {beer.description}

+

Contributed by: {beer.contributed_by}

+
+ ); +} + +export default SingleBeer; diff --git a/src/components/random-beer.js b/src/components/random-beer.js new file mode 100644 index 0000000..7b02b7e --- /dev/null +++ b/src/components/random-beer.js @@ -0,0 +1,44 @@ +// src/components/RandomBeer.js + +import React, { useState, useEffect } from 'react'; + +function RandomBeer() { + const [randomBeer, setRandomBeer] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + fetch('https://ih-beers-api2.herokuapp.com/beers/random') + .then(response => response.json()) + .then(data => { + setRandomBeer(data); + setIsLoading(false); + }) + .catch(error => { + console.error('Error fetching random beer:', error); + setIsLoading(false); + }); + }, []); + + if (isLoading) { + return
Loading...
; + } + + if (!randomBeer) { + return
Random beer not found
; + } + + return ( +
+

Random Beer

+ {randomBeer.name} +

Name: {randomBeer.name}

+

Tagline: {randomBeer.tagline}

+

First Brewed: {randomBeer.first_brewed}

+

Attenuation Level: {randomBeer.attenuation_level}

+

Description: {randomBeer.description}

+

Contributed by: {randomBeer.contributed_by}

+
+ ); +} + +export default RandomBeer; diff --git a/src/index.css b/src/index.css index ec2585e..18f0e46 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,7 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + } code { diff --git a/src/index.js b/src/index.js index d563c0f..5a3d73d 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render( + ); From 32e79e79da706df0e44a5ec7836fa28058c20945 Mon Sep 17 00:00:00 2001 From: Aditya Koche <130300872+AdityaKoche01@users.noreply.github.com> Date: Sun, 25 Feb 2024 19:40:39 +0530 Subject: [PATCH 2/2] Update App.js --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index c1f6563..34e6202 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -// src/App.js + import React from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';