diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000000..71d72c140e
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,17 @@
+module.exports = {
+ env: { browser: true, es2020: true, node: true },
+ extends: [
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended",
+ ],
+ parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+ settings: { react: { version: "18.2" } },
+ plugins: ["react-refresh"],
+ rules: {
+ "react-refresh/only-export-components": "warn",
+ "react/prop-types": 0,
+ "no-unused-vars": ["error", { varsIgnorePattern: "^set" }],
+ },
+};
diff --git a/.gitignore b/.gitignore
index 4d29575de8..a547bf36d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
index 7a3385ee2e..2ea98f381d 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,42 @@
-# LAB | React IronBeers
+# LAB | React Iron Brewers
-Since beer is one of the most consumed drinks between Ironhackers 🍻 , our mission here is to create an app to showcase some of the best-handcrafted beers, but not just that - to save some as well so the rest of Ironhack community is informed 😌. Our end goal is creating something like this:
+
+
+
Learning Goals
+
+
+This exercise is designed to help you practice and apply the concepts and techniques taught in class.
+
+
+
+After completing this exercise, you will be able to:
+
+- Set up side effects in React components with the `useEffect` hook.
+- Make `POST` and `GET` HTTP requests from React components using `axios`.
+- Integrate your front-end React app with an API or the backend of your application.
+
+
+
+
+
+
+
+
+
+In this lab, we will be working on an app that caters to brewers, beer enthusiasts, and all those interested in handcrafted beers - the Iron Brewers app. Our mission here is to create an app to showcase some of the best handcrafted beers, but not just that - also make it so that users can contribute by saving their handcrafted beers to the database and sharing them with fellow brewers and the community.
+
+Our final result of the app should resemble something similar to this:
+
+
+
+
+
+
+
+
-
-
-
## Setup
@@ -14,9 +44,9 @@ Since beer is one of the most consumed drinks between Ironhackers 🍻 , our mis
- Clone this repo
```shell
-cd lab-react-ironbeers
+cd lab-react-iron-brewers
npm install
-npm start
+npm run dev
```
## Submission
@@ -29,164 +59,382 @@ npm start
git push origin master
```
-- Create Pull Request so that your TAs can check up your work.
+- Create a Pull Request and submit your assignment.
+
+
+
+## Test Your Code
+
+This lab is equipped with unit tests to provide automated feedback on your progress and help you understand whether your code is working as expected. If you want to check the tests, they are located in the `src/test` folder.
+
+
+
+
+### Iterations and Test Results
+
+During an iteration, if your code seems to work as expected but some tests don't pass, feel free to move on to the next iteration. Once you've completed all the mandatory iterations, you can go back and resolve any remaining failed test
+
+
+
+### Run the Tests
+
+1. To execute the tests, run the following command in the terminal:
+
+ ```shell
+ npm run test
+ ```
+
+2. The above command will execute the tests and open the `@vitest/ui` Test Reporter in the browser.
+
+3. To see the test results, **open** [http://127.0.0.1:51204/\_\_vitest\_\_](http://127.0.0.1:51204/__vitest__) in your browser.
+
+
+
+
## Introduction
-We will be building a React app so the API (server) needs to be built somewhere for us, right? You are completely right, it's deployed on _heroku_ and the root fo the API is:
-**`https://ih-beers-api2.herokuapp.com/beers`**.
+### Beers API (backend)
+
+We will be building a React app, so the API (backend) needs to be built somewhere for us, right? You are completely right, we will be using a public API called Beers API. The base URL of the API is:
+
+**`https://ih-beers-api2.herokuapp.com/beers`**
+
+
+
+The API provides the following endpoints:
+
+| Method | Endpoint | Response (200) | Action |
+| ------ | ------------------- | ------------------------------------------------------ | ------------------------------------------------------------ |
+| `GET` | `/` | [beers] | Get all the beers from the DB |
+| `GET` | `/:id` | { beer } | Get a single/specific beer |
+| `GET` | `/random` | { beer } | Get a random beer from the DB |
+| `POST` | `/new` | { message: "New beer successfully saved to database!"} | Create a new beer (see iteration 7 for fields) |
+| `GET` | `/search?q={query}` | [beers] | Search beers by name containing the specified term. Example: `/search?q=lager` query will return all beers with the word lager in their name. |
+
+
+
+
+
+You can refer to this section any time during the exercise for information about the API endpoints and their usage.
+
+
+
+**Note:** The first time you make a request to the API, it might take a bit longer to respond.
+
+
+
+
+
+
-The available endpoints are the following:
+## Instructions
-| Method | Endpoint | Response (200) | Action |
-| ------ | ------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
-| GET | / | [beers] | Get all the beers from the DB |
-| GET | /:id | { beer } | Get the a single/specific beer |
-| GET | /random | { beer } | Get a random beer from the DB |
-| POST | /new | { message: "New beer successfully saved to database!"} | Create a new beer (the fields are specified in the instructions) |
-| GET | /search?q=`{query}` | [beers] | Get beers from the DB whose name contains the search term. For example `/search?q=lager` searches for all beers with lager in the name. |
+To help you get started quickly, we have provided you with the starter code and all the required page components. This means there's no need for you to create any new components. Instead, your task is to set up effects in the components to make HTTP requests to the API using `axios` to retrieve and send data.
-On each iteration, we will explain which endpoint you should use!
+
-The **IronBeers** project will include the following features:
+The app already includes the following pages:
-- A **Home** page with three different options:
+- A **Home** page with links to 3 different pages:
- _All Beers_
- _Random Beer_
- _New Beer_
-- A **List Beers** page where you should display all the beers
-- A **Single Beer** page to display the details of the beer the user clicked on
-- A **Random Beer** page to display a Random Beer
-- A **New Beer** page to show a form where a user can create new beers
+
+- An **All Beers** page where you should display all the beers
+
+- A **Single Beer** page where you should display the details of the beer the user clicked on
+
+- A **New Beer** page showing a form where you should implement the functionality to create new beer (make a POST request to the API)
+
+- A **Random Beer** page where you should display a random handcrafted beer
-## Instructions
+Take a moment to explore the starter code and familiarize yourself with the components and the structure of the app. To run the app, use the command `npm run dev` in the terminal.
+
+
+
+
+
+
+### Iteration 1 | List all the beers
+
+In this iteration, you will work on the `AllBeersPage` component in the `src/pages/AllBeersPage.jsx`, which is rendered on the `/beers` route.
+
+
+The `AllBeersPage` component already displays a list of beers coming from a static JSON data that is stored in a state variable `beers`. However, the component should display a list of all the beers from the Beers API. Your task is to replace the static data with the data coming from the Beers API.
+
+
+
+
+Your task is to make a `GET` request to the Beers API endpoint `https://ih-beers-api2.herokuapp.com/beers` using `axios`. This API endpoint returns an **array of beers**. Once you get a response from the Beers API, save it in the state variable `beers`.
+
+
+
+
+
+
+
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+----
+
+### Iteration 2 | Display a single beer
+
+In this iteration, you will work on the `BeerDetailsPage` component in the `src/pages/BeerDetailsPage.jsx`.
+
+
+
+When a user clicks on one of the beers in the list on the `AllBeersPage`, they will be redirected to the *Beer Details page*. When the user is redirected, the URL displayed in the browser's address bar will change to `/beers/:beerId`. Here, `:beerId` represents the unique id of the beer that the user selected.
+
+
+
+Your task is to display the details of the selected beer by fetching the data from the Beers API.
+
+
+
+
+
+#### 2.1 | Access URL Parameter
+
+To get the details of a specific beer, you will need the beer id, which you can get from the URL.
+
+The beer id is passed as a URL parameter `:beerId` in the URL. To access the URL parameter, you need to use the `useParams` hook from the `react-router-dom` package.
-:exclamation: At the very beginning we will offer you to shoot for the stars: as a **bonus** focus on **mobile first** design! As we said this is bonus, so it's up to you. :+1:
+Check [this example](https://reactrouter.com/en/6.10.0/hooks/use-params) if you need a reminder of how to set up the useParams hook and access the URL parameters.
+
+
+
+
+
+#### 2.2 | Make a request to the API
+
+To get the details of a specific beer, you need to make a `GET` request to the Beers API endpoint `https://ih-beers-api2.herokuapp.com/beers/:id`, where `:id` should be replaced with the id of the selected beer.
+
+**Example:** [https://ih-beers-api2.herokuapp.com/beers/**5fb6a86265b9c209606e10e2**](https://ih-beers-api2.herokuapp.com/beers/5fb6a86265b9c209606e10e2)
+
+
+
+
+
+#### 2.3 | Save the response in the state
+
+The `BeerDetailsPage` component already has a state variable `beer` and is set up to display the beer details. Once you make the `GET` request to the API, save the response data in the `beer` state variable so that it displays in the component.
+
+
+
+
+
+
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+----
+
+
+### Iteration 3 | Create a new beer
+
+In this iteration, you will work on the `AddBeerPage` component in the `src/pages/AddBeerPage.jsx`, which is rendered on the `/new-beer` route.
+
+
+
+
+
+The `AddBeerPage` component, which is rendered on the `/new-beer` route, already includes a `form` for creating a new beer, together with state variables and handler functions for the form inputs. You will use them as a starting point for implementing the functionality to create a new beer.
+
+
-
+
+Your task is to create a submit handler function that will be called when the user *submits* the form. The handler function should make a `POST` request to the API endpoint `https://ih-beers-api2.herokuapp.com/beers/new` to create a new beer.
-### Iteration 1 | Home Page
+When you send the `POST` request, the **the request `body` fields MUST have the following names**:
+
-Create a **Home Page**. This view should include three links to separate pages:
+| Property Name | Data Type |
+| ------------------------- | ------------ |
+| **`name`** | String |
+| **`tagline`** | String |
+| **`description`** | String |
+| **`image_url`** | String |
+| **`first_brewed`** | String |
+| **`brewers_tips`** | String |
+| ***`attenuation_level`*** | ***Number*** |
+| **`contributed_by`** | String |
-- `/beers`
-- `/random-beer`
-- `/new-beer`
+
-Feel free to design it however you wish, but in case you want to do it the way we did it, you can find the following images in `src/assets` folder:
+:exclamation: **Important**: Take a moment to double-check that the fields in the request `body` match the names shown above. If the names don't match, the API will reject the request.
-
-
-
-### Iteration 2 | Header
+If everything goes well, you will receive a **200** response from the server. :beer:
-On every view (except for the `home`), we should add a **header** with a `link` to the root of the `app`.
+The `attenuation_level` value must be set to the correct data type of `number`. If a `string` is sent instead, the API will respond with a **500** error status code.
-
-
-
-### Iteration 3 | List all the beers
-On the `/beers` route, we should display all the beers from the database. So, in this case, you need to "hit" the API's route `https://ih-beers-api2.herokuapp.com/beers` and the API will return an **array of beers**.
-_Hint_: The array of beers is array of objects. We strongly advise you to **console log the response** from the API so you can see the structure of it.
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
-You should display the following from each of the beers:
-- `image`
-- `name`
-- `tagline`
-- `contributed_by`
-- **Also, add the link to check the details of each beer. The link should navigate to `/beers/:beerId`.**
-
-
-
-The first time you call the API, it might take a bit to respond. It's hosted on Heroku, and it goes to sleep after 30 minutes, you know! :wink:
+
+
+
+
-### Iteration 4 | Display a single beer
+----
+
+### Bonus: Iteration 4 | A random beer
+
+In this iteration, you will work on the `RandomBeerPage` component in the `src/pages/RandomBeerPage.jsx`.
+
+
-When a user click on one of the beers, you should display a detailed view of it, including the following fields:
-- `image`
-- `name`
-- `tagline`
-- `first_brewed`
-- `attenuation_level`
-- `description`
-- `contributed_by`
-Again, we **strongly recommend to console log the response from the API**.
+The `RandomBeerPage` component, which is rendered on the `/random-beer` route, should display a random beer retrieved from the Beers API.
+
+Your task is to make a `GET` request to the endpoint `https://ih-beers-api2.herokuapp.com/beers/random` to get the data of a random beer to display on the page.
-
-
-
-### Iteration 5 | A random beer
-On the `/random-beer` route, we will render a single beer that will be retrieved from the database. The endpoint will do all the job for us, all we need to do is to call `https://ih-beers-api2.herokuapp.com/beers/random`. We should receive an object including all the info about a beer.
-The same way we did with the **Single Beer** view, we should render the following fields:
-- `image`
-- `name`
-- `tagline`
-- `first_brewed`
-- `attenuation_level`
-- `description`
-- `contributed_by`
+The `RandomBeerPage` component already has a state variable `randomBeer` and is set up to display the beer details. Once you make the `GET` request to the API, save the response data in the `randomBeer` state variable so that it displays in the component.
+
+
-
-
-
-### Iteration 6 | Create a new beer
-Finally, on the `/new-beer` route (remember, this is you react route, you're displaying the form on this route), we should render a form where user can create new beers. The `form` should include the following fields:
-- **name** - must be type _text_
-- **tagline** - must be type _text_
-- **description** - must be type _text_
-- **first_brewed** - must be type _text_
-- **brewers_tips** - must be type _text_
-- **attenuation_level** - must be type _number_ **!!!**
-- **contributed_by** - must be type _text_
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+----
+
+### Bonus: Iteration 5 | Filter the beers
-Why we pointed out the type? Well, since we already console log response from the API, we could notice that all the fields are strings but _attenuation_level_, which is number. Using our knowledge from module II, we can make conclusion that in the _beer model_ all the properties are type _String_ except _attenuation_level_, which is type _Number_.
-When you have built the form, you should do a `POST` request to `https://ih-beers-api2.herokuapp.com/beers/new`, passing all the data on the `body` object. If everything went ok, you would receive a **200** response from the server.
+As the final feature, your task is to implement a search functionality where users can filter beers based on keywords.
-Notice that the fields on the `body` should have those specific **names** so the API can create a new beer.
+Your task is to implement the functionality to filter the beers by name. In the `AllBeersPage` component, you will find a `SearchBar` component that is rendered above the list of beers. You should use it as a starting point for implementing the search functionality.
-_What could go wrong?_: You inputted string instead of number in the _attenuation_level_ field and the server sent you **500** error.
-Since we didn't cover how to upload images yet, don't worry about it now - the API will assign a random image to the new beer. :beer:
+Every time the user types a new letter in the search bar, you should make a request to `https://ih-beers-api2.herokuapp.com/beers/search?q={query}`, passing the input value as the `q` param.
-
-
-
-### Iteration 7 | Bonus | Filter the beers
-Yes! One endpoint left! On the `/beers` route, add an `input` where users can search for beers. Every time a new letter is typed, you should call to `https://ih-beers-api2.herokuapp.com/beers/search?q={query}` passing the value of the input in the `q` param.
-**We are done!** :trophy:
+
+
+
+
+ See Expected Result
+
+
+
+
- );
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000000..e18390a307
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,26 @@
+import "./App.css";
+import { Routes, Route } from "react-router-dom";
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import AllBeersPage from "./pages/AllBeersPage";
+import RandomBeerPage from "./pages/RandomBeerPage";
+import AddBeerPage from "./pages/AddBeerPage";
+import BeerDetailsPage from "./pages/BeerDetailsPage";
+
+function App() {
+ return (
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afeece..0000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/assets/beers.json b/src/assets/beers.json
new file mode 100644
index 0000000000..1ad952ac21
--- /dev/null
+++ b/src/assets/beers.json
@@ -0,0 +1,24 @@
+[
+ {
+ "_id": "1111a111111aa11111a1aa11",
+ "name": "Beer One",
+ "tagline": "Beer One Tagline",
+ "description": "Beer one description text...",
+ "image_url": "https://images.punkapi.com/v2/keg.png",
+ "first_brewed": "04/2008",
+ "brewers_tips": "Here are some tips ....",
+ "attenuation_level": 1,
+ "contributed_by": "Ironhacker"
+ },
+ {
+ "_id": "2222a222222aa22222a2aa22",
+ "name": "Beer Two",
+ "tagline": "Beer Two Tagline",
+ "description": "Beer two description text...",
+ "image_url": "https://images.punkapi.com/v2/keg.png",
+ "first_brewed": "04/2008",
+ "brewers_tips": "Here are some tips ....",
+ "attenuation_level": 2,
+ "contributed_by": "Ironhacker"
+ }
+]
diff --git a/src/assets/home-icon.png b/src/assets/home-icon.png
new file mode 100644
index 0000000000..0a7aaf37dc
Binary files /dev/null and b/src/assets/home-icon.png differ
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000000..6c87de9bb3
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000000..135af54a2f
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,18 @@
+import homeIcon from "../assets/home-icon.png";
+import { Link } from "react-router-dom";
+
+function Navbar() {
+ return (
+
+
+
+ );
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
new file mode 100644
index 0000000000..6f713cc384
--- /dev/null
+++ b/src/components/Search.jsx
@@ -0,0 +1,19 @@
+function Search() {
+ return (
+
+
+
+
+ Search
+
+
+
+
+
+ );
+}
+
+export default Search;
diff --git a/src/index.css b/src/index.css
index ec2585e8c0..0c3f327ff0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,13 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ padding: 0;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+a {
+ text-decoration: none !important;
+}
+
+
+.btn-round {
+ margin: 20px;
}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index ddd16428d4..0000000000
--- a/src/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-
-root.render(
-
-
-
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c058c..0000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000000..598f7eaae7
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,12 @@
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { BrowserRouter as Router } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.css";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+
+
+
+);
diff --git a/src/pages/AddBeerPage.jsx b/src/pages/AddBeerPage.jsx
new file mode 100644
index 0000000000..9757fce40f
--- /dev/null
+++ b/src/pages/AddBeerPage.jsx
@@ -0,0 +1,161 @@
+import axios from "axios";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+
+
+function AddBeerPage() {
+ // State variables to store the values of the form inputs. You can leave these as they are.
+ const [name, setName] = useState("");
+ const [tagline, setTagline] = useState("");
+ const [description, setDescription] = useState("");
+ const [imageUrl, setImageUrl] = useState("");
+ const [firstBrewed, setFirstBrewed] = useState("");
+ const [brewersTips, setBrewersTips] = useState("");
+ const [attenuationLevel, setAttenuationLevel] = useState(0);
+ const [contributedBy, setContributedBy] = useState("");
+ const navigate = useNavigate();
+ // Handler functions for the form inputs. You can leave these as they are.
+ const handleName = (e) => setName(e.target.value);
+ const handleTagline = (e) => setTagline(e.target.value);
+ const handleDescription = (e) => setDescription(e.target.value);
+ const handleImageUrl = (e) => setImageUrl(e.target.value);
+ const handleFirstBrewed = (e) => setFirstBrewed(e.target.value);
+ const handleBrewersTips = (e) => setBrewersTips(e.target.value);
+ const handleAttenuationLevel = (e) => setAttenuationLevel(e.target.value);
+ const handleContributedBy = (e) => setContributedBy(e.target.value);
+
+ const API_URL = "https://ih-beers-api2.herokuapp.com/beers";
+const handleSubmit =(e) =>{
+ e.preventDefault();
+
+ const newBeer = {
+
+ name,
+ tagline,
+ description,
+ image_url: imageUrl,
+ first_brewed: firstBrewed,
+ brewers_tips: brewersTips,
+ attenuation_level: attenuationLevel,
+ ontributed_by: contributedBy,
+ };
+
+ axios
+ .post(`${API_URL}/new`, newBeer)
+ .then((response)=>{
+ console.log("new beer added:", response.data);
+ navigate("/beers")
+ })
+ .catch((error)=> console.error("Error adding new beer:",error))
+ }
+
+
+
+ // TASK:
+ // 1. Create a function to handle the form submission and send the form data to the Beers API to create a new beer.
+ // 2. Use axios to make a POST request to the Beers API.
+ // 3. Once the beer is created, navigate the user to the page showing the list of all beers.
+
+
+
+ // Structure and the content of the page showing the form for adding a new beer. You can leave this as it is.
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default AddBeerPage;
diff --git a/src/pages/AllBeersPage.jsx b/src/pages/AllBeersPage.jsx
new file mode 100644
index 0000000000..8595d29d89
--- /dev/null
+++ b/src/pages/AllBeersPage.jsx
@@ -0,0 +1,71 @@
+import { Link } from "react-router-dom";
+import { useState, useEffect} from "react";
+import Search from "../components/Search";
+/* import beersJSON from "./../assets/beers.json"; */
+import axios from "axios";
+
+const API_URL = "https://ih-beers-api2.herokuapp.com/beers";
+
+function AllBeersPage() {
+ // Mock initial state, to be replaced by data from the API. Once you retrieve the list of beers from the Beers API store it in this state variable.
+ const [beers, setBeers] = useState([]);
+ const getAllBeers=()=>{
+ axios
+ .get(`${API_URL}`)
+ .then((response)=> setBeers(response.data))
+ .catch((error)=> console.log(error));
+
+ };
+
+ useEffect(()=>{
+ getAllBeers();
+ },[]);
+
+
+
+
+
+ // TASKS:
+ // 1. Set up an effect hook to make a request to the Beers API and get a list with all the beers.
+ // 2. Use axios to make a HTTP request.
+ // 3. Use the response data from the Beers API to update the state variable.
+
+
+
+ // The logic and the structure for the page showing the list of beers. You can leave this as it is for now.
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default AllBeersPage;
diff --git a/src/pages/BeerDetailsPage.jsx b/src/pages/BeerDetailsPage.jsx
new file mode 100644
index 0000000000..ec7ad51971
--- /dev/null
+++ b/src/pages/BeerDetailsPage.jsx
@@ -0,0 +1,63 @@
+import axios from "axios";
+import { useState, useEffect} from "react";
+import { useNavigate, useParams } from "react-router-dom";
+/* import beersJSON from "./../assets/beers.json"; */
+
+const API_URL = "https://ih-beers-api2.herokuapp.com/beers";
+function BeerDetailsPage() {
+ // Mock initial state, to be replaced by data from the Beers API. Store the beer info retrieved from the Beers API in this state variable.
+ const [beer, setBeer] = useState([]);
+
+ // React Router hook for navigation. We use it for the back button. You can leave this as it is.
+ const navigate = useNavigate();
+ const{beerId} = useParams();
+
+ useEffect(() =>{
+ axios
+ .get(`${API_URL}/${beerId}`)
+ .then((response)=> setBeer(response.data))
+ .catch((error)=> console.error(error));
+ }, [beerId]);
+
+
+
+ // TASKS:
+ // 1. Get the beer ID from the URL, using the useParams hook.
+ // 2. Set up an effect hook to make a request for the beer info from the Beers API.
+ // 3. Use axios to make a HTTP request.
+ // 4. Use the response data from the Beers API to update the state variable.
+
+
+
+ // Structure and the content of the page showing the beer details. You can leave this as it is:
+ return (
+
+ {beer && (
+ <>
+
+
{beer.name}
+
{beer.tagline}
+
Attenuation level: {beer.attenuation_level}
+
Description: {beer.description}
+
Created by: {beer.contributed_by}
+
+
+
+ )}
+
+ );
+}
+
+export default BeerDetailsPage;
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000000..648d0d43f4
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,52 @@
+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";
+
+function HomePage() {
+
+ // The home page showing the links to the 3 main pages of the app. You can leave this as it is.
+ return (
+ <>
+
+
+
+
+
+
All Beers
+
+ Explore a collection of beers crafted by various brewers and breweries.
+
+
+
+
+
+
+
+
+
Random Beer
+
+ Discover unique beers with intriguing details at random, one beer at a time.
+
+
+
+
+
+
+
+
+
New Beer
+
+ Unleash your inner brewmaster and share your latest creation with the brewing community.
+
+
+
+
+
+
+ );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/pages/RandomBeerPage.jsx b/src/pages/RandomBeerPage.jsx
new file mode 100644
index 0000000000..050bdcdcfb
--- /dev/null
+++ b/src/pages/RandomBeerPage.jsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import beersJSON from "./../assets/beers.json";
+
+
+function RandomBeersPage() {
+ // Mock initial state, to be replaced by data from the Beers API. Store the beer info retrieved from the Beers API in this state variable.
+ const [randomBeer, setRandomBeer] = useState(beersJSON[0]);
+
+ // React Router hook for navigation. We use it for the back button. You can leave this as it is.
+ const navigate = useNavigate();
+
+
+
+ // TASKS:
+ // 1. Set up an effect hook to make a request for a random beer from the Beers API.
+ // 2. Use axios to make a HTTP request.
+ // 3. Use the response data from the Beers API to update the state variable.
+
+
+
+ // The logic and the structure for the page showing the random beer. You can leave this as it is.
+ return (
+
+
+
+
-
-
+
-
-
-
+
-
+