Skip to content

Solved tasks from lab iron brewers #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KaterynaSoloviova wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Solved tasks from lab iron brewers #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/components/Search.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
function Search() {
function Search(props) {

const handleChange = (e) => {
props.onChange(e.target.value)
}

return (
<div className="d-inline-flex justify-content-center align-items-center w-100 p-4">
<div className="input-group mb-2 w-50">
Expand All @@ -7,7 +12,7 @@ function Search() {
Search
</span>
</div>
<input
<input onChange={handleChange}
type="text"
className="form-control search-bar"
/>
Expand Down
29 changes: 28 additions & 1 deletion src/pages/AddBeerPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
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.
Expand Down Expand Up @@ -28,13 +30,38 @@ function AddBeerPage() {
// 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.

const navigate = useNavigate()
const BASE_URL = "https://ih-beers-api2.herokuapp.com";

const handleSubmit = (e) => {
e.preventDefault();

const newBeer = {
name: name,
tagline: tagline,
description: description,
image_url: imageUrl,
first_brewed: firstBrewed,
brewers_tips: brewersTips,
attenuation_level: attenuationLevel,
contributed_by: contributedBy,
}

axios
.post(`${BASE_URL}/beers/new`, newBeer)
.then(()=>{
navigate("/beers")
})
.catch((e) => console.log("Error creating a new project...", e));
}



// Structure and the content of the page showing the form for adding a new beer. You can leave this as it is.
return (
<>
<div className="d-inline-flex flex-column w-100 p-4">
<form>
<form onSubmit={handleSubmit}>
<label>Name</label>
<input
className="form-control mb-4"
Expand Down
42 changes: 33 additions & 9 deletions src/pages/AllBeersPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,66 @@
import { Link } from "react-router-dom";
import { useState } from "react";
import { useState, useEffect } from "react";
import Search from "../components/Search";
import beersJSON from "./../assets/beers.json";


import axios from "axios";

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(beersJSON);
const [beers, setBeers] = useState([]);

const BASE_URL = "https://ih-beers-api2.herokuapp.com";

useEffect(() => {
axios
.get(`${BASE_URL}/beers`)
.then((response) => {
setBeers(response.data);
})
.catch((error) =>
console.log("Error getting project details from the API...", error)
);
}, []);

const handleSearch = (query) => {
axios
.get(`${BASE_URL}/beers/search?q=${query}`)
.then((response) => {
setBeers(response.data);
})
.catch((error) =>
console.log("Error getting project details from the API...", error)
);
};

// 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 (
<>
<Search />
<Search onChange={handleSearch} />

<div className="d-inline-flex flex-wrap justify-content-center align-items-center w-100 p-4">
{beers &&
beers.map((beer, i) => {
return (
<div key={i}>
<Link to={"/beers/" + beer._id}>
<div className="card m-2 p-2 text-center" style={{ width: "24rem", height: "18rem" }}>
<div
className="card m-2 p-2 text-center"
style={{ width: "24rem", height: "18rem" }}
>
<div className="card-body">
<img
src={beer.image_url}
style={{ height: "6rem" }}
alt={"image of" + beer.name}
/>
<h5 className="card-title text-truncate mt-2">{beer.name}</h5>
<h5 className="card-title text-truncate mt-2">
{beer.name}
</h5>
<h6 className="card-subtitle mb-3 text-muted">
<em>{beer.tagline}</em>
</h6>
Expand Down
21 changes: 19 additions & 2 deletions src/pages/BeerDetailsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,32 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import beersJSON from "./../assets/beers.json";
import { useParams } from "react-router-dom";
import axios from "axios";


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(beersJSON[0]);
const [beer, setBeer] = useState([]);
const BASE_URL = "https://ih-beers-api2.herokuapp.com";

// 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(`${BASE_URL}/beers/${beerId}`)
.then((response)=>{
setBeer(response.data)
.catch((error) =>
console.log("Error getting project details from the API...", error)
);

})
},[beerId])



// TASKS:
Expand Down
17 changes: 15 additions & 2 deletions src/pages/RandomBeerPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { useState } from "react";
import { useState, useEffect} from "react";
import { useNavigate } from "react-router-dom";
import beersJSON from "./../assets/beers.json";
import axios from "axios";


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]);
const [randomBeer, setRandomBeer] = useState([]);

// React Router hook for navigation. We use it for the back button. You can leave this as it is.
const navigate = useNavigate();
const BASE_URL = "https://ih-beers-api2.herokuapp.com";




Expand All @@ -17,6 +20,16 @@ function RandomBeersPage() {
// 2. Use axios to make a HTTP request.
// 3. Use the response data from the Beers API to update the state variable.

useEffect(()=>{
axios
.get(`${BASE_URL}/beers/random`)
.then((response)=>{
setRandomBeer(response.data)
.catch((e) => console.log("Error creating a new project...", e));
})
},[])




// The logic and the structure for the page showing the random beer. You can leave this as it is.
Expand Down