From bc39c9b96f051edf7f24589137d4b940969a8a7c Mon Sep 17 00:00:00 2001 From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com> Date: Tue, 31 Dec 2024 18:23:15 +0530 Subject: [PATCH] Iterations done --- package-lock.json | 103 ++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.css | 38 ------------- src/App.js | 47 +++++++++------- src/components/Header.js | 12 +++++ src/pages/BeersPage.js | 36 +++++++++++++ src/pages/HomePage.js | 26 +++++++++ src/pages/NewBeerPage.js | 52 ++++++++++++++++++ src/pages/RandomBeerPage.js | 32 +++++++++++ src/pages/SingleBeerPage.js | 0 10 files changed, 289 insertions(+), 58 deletions(-) create mode 100644 src/components/Header.js create mode 100644 src/pages/BeersPage.js create mode 100644 src/pages/HomePage.js create mode 100644 src/pages/NewBeerPage.js create mode 100644 src/pages/RandomBeerPage.js create mode 100644 src/pages/SingleBeerPage.js diff --git a/package-lock.json b/package-lock.json index 3c65e57..1d25bfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^7.1.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3707,6 +3708,11 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "node_modules/@types/eslint": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.7.tgz", @@ -13971,6 +13977,52 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz", + "integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==", + "dependencies": { + "react-router": "7.1.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/react-router/node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "engines": { + "node": ">=18" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -14754,6 +14806,11 @@ "node": ">= 0.8.0" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" + }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -15601,6 +15658,11 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -19264,6 +19326,11 @@ "@types/node": "*" } }, + "@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "@types/eslint": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.7.tgz", @@ -26585,6 +26652,32 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", + "requires": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "dependencies": { + "cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==" + } + } + }, + "react-router-dom": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz", + "integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==", + "requires": { + "react-router": "7.1.1" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -27150,6 +27243,11 @@ "send": "0.18.0" } }, + "set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" + }, "setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -27795,6 +27893,11 @@ } } }, + "turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 022d9bf..4c819a0 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^7.1.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 74b5e05..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +0,0 @@ -.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/src/App.js b/src/App.js index 3784575..b64d5bd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,32 @@ -import logo from './logo.svg'; -import './App.css'; +import React from "react"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import HomePage from "./pages/HomePage"; +import BeersPage from "./pages/BeersPage"; +import SingleBeerPage from "./pages/SingleBeerPage"; +import RandomBeerPage from "./pages/RandomBeerPage"; +import NewBeerPage from "./pages/NewBeerPage"; -function App() { +const App = () => { return ( -
-
- logo -

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

- - Learn React - -
-
+ + + {/* Home Page */} + } /> + + {/* List All Beers */} + } /> + + {/* Single Beer */} + } /> + + {/* Random Beer */} + } /> + + {/* New Beer */} + } /> + + ); -} +}; export default App; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..9c0759b --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,12 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +const Header = () => { + return ( +
+ 🏠 Home +
+ ); +}; + +export default Header; diff --git a/src/pages/BeersPage.js b/src/pages/BeersPage.js new file mode 100644 index 0000000..c0d530e --- /dev/null +++ b/src/pages/BeersPage.js @@ -0,0 +1,36 @@ +import React from "react"; +import Header from "../components/Header"; + +import { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +; + +const BeersPage = () => { + const [beers, setBeers] = useState([]); + + useEffect(() => { + fetch("https://ih-beers-api2.herokuapp.com/beers") + .then((res) => res.json()) + .then((data) => setBeers(data)) + .catch((err) => console.error(err)); + }, []); + + return ( + <> +
+
+ {beers.map((beer) => ( +
+ {beer.name} +

{beer.name}

+

{beer.tagline}

+ Contributed by: {beer.contributed_by} + View Details +
+ ))} +
+ + ); +}; + +export default BeersPage; diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js new file mode 100644 index 0000000..0ced297 --- /dev/null +++ b/src/pages/HomePage.js @@ -0,0 +1,26 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import beersImg from "../assets/beers.png"; +import randomBeerImg from "../assets/random-beer.png"; +import newBeerImg from "../assets/new-beer.png"; + +const HomePage = () => { + return ( +
+ + All Beers +

All Beers

+ + + Random Beer +

Random Beer

+ + + New Beer +

New Beer

+ +
+ ); +}; + +export default HomePage; diff --git a/src/pages/NewBeerPage.js b/src/pages/NewBeerPage.js new file mode 100644 index 0000000..5ea070c --- /dev/null +++ b/src/pages/NewBeerPage.js @@ -0,0 +1,52 @@ +import React, { useState } from "react"; +import Header from "../components/Header"; + +const NewBeerPage = () => { + 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({ ...formData, [name]: value }); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + + fetch("https://ih-beers-api2.herokuapp.com/beers/new", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(formData), + }) + .then((res) => res.json()) + .then((data) => alert("Beer created successfully!")) + .catch((err) => console.error(err)); + }; + + return ( + <> +
+
+
+ + +