Commit 6d00b000 authored by Maxime POULAIN's avatar Maxime POULAIN
Browse files

add favorites page and count

parent e582a2ee
......@@ -5,6 +5,7 @@ import { FavoriteContext } from './context/favorite-context';
import { Home } from './pages/home/home';
import { Header } from './pages/header/header';
import { Top10 } from './pages/top10/top10';
import { Favorites } from './pages/favorites/favorites';
......@@ -30,7 +31,7 @@ function App() {
}, []);
const [favorite, setFavorite] = useState({ ids: [] });
const [favorite, setFavorite] = useState({ ids: [], cars: [] });
const searchChanged = (value) => {
......@@ -53,6 +54,7 @@ function App() {
<Route>
<Route path="*" element={<Home cars={carsList} />} />
<Route path="top10" element={<Top10 weightCars={weightCarsList} powerCars={powerCarsList} ratioCars={ratioCarsList} />} />
<Route path="favorites" element={<Favorites />} />
</Route>
</Routes>
</main>
......
......@@ -31,7 +31,7 @@ export const CarCard = ({ car, brandName }) => {
<ProgressBar variant="info" now={maxRatio * 100 / (car.weight / car.power)} label={`${(car.weight / car.power).toFixed(2)} kg/hp`} />
</li>
</ul>
<button type="button" className="btn btn-danger" onClick={() => addToFavorite(car.id, favorite, setFavorite)}>
<button type="button" className="btn btn-danger" onClick={() => addToFavorite(car, brandName, favorite, setFavorite)}>
<i className={`bi bi-star${favorite.ids.includes(car.id) ? '-fill' : ''} m-3`} />Add to favorite
</button>
</div>
......@@ -40,14 +40,17 @@ export const CarCard = ({ car, brandName }) => {
)
}
const addToFavorite = (id, favorite, setFavorite) => {
const addToFavorite = (car, brand, favorite, setFavorite) => {
const newFavorite = { ...favorite };
if (favorite.ids.includes(id)) {
const index = favorite.ids.indexOf(id);
if (favorite.ids.includes(car.id)) {
const index = favorite.ids.indexOf(car.id);
favorite.ids.splice(index, 1);
favorite.cars.splice(index, 1);
}
else {
favorite.ids.push(id);
car['brand'] = brand;
favorite.ids.push(car.id);
favorite.cars.push(car);
}
setFavorite(newFavorite);
}
......
import { useContext } from "react";
import { FavoriteContext } from "../../context/favorite-context";
import { CarCard } from "../cars/car-card";
export const Favorites = () => {
const [favorite, setFavorite] = useContext(FavoriteContext);
const allCars = favorite.cars.map((car) =>
<CarCard car={car} brandName={car.brand} />
);
return (
<div>
<h2 className="text-light">{`Favorties (${allCars.length})`}</h2>
<div className="d-flex flex-wrap justify-content-between">{allCars}</div>
</div>
);
}
\ No newline at end of file
......@@ -7,12 +7,14 @@ const menus = [
{
name: 'Home',
url: '/home',
icon: 'bi bi-house',
},
{
name: 'Top 10',
url: '/top10',
icon: 'bi bi-bookmark-check',
},
{
name: 'Favorties',
url: '/favorites',
},
];
......@@ -20,7 +22,6 @@ const navItems = menus.map(menu => {
return (
<li className="nav-item mx-3 d-flex align-items-center" key={menu.url}>
<i className={menu.icon} />
<span>
<Link className="nav-link active" aria-current="page" to={menu.url}><h4 className="text-light">{menu.name}</h4></Link>
</span>
......@@ -30,7 +31,7 @@ const navItems = menus.map(menu => {
export const Header = ({onSearchChange}) => {
export const Header = ({ onSearchChange }) => {
return (
<nav className="navbar navbar-expand-md navbar-light bg-transparent">
<Link to="home" className="nav-link active" style={{ color: 'inherit', textDecoration: 'inherit' }}>
......@@ -38,7 +39,7 @@ export const Header = ({onSearchChange}) => {
</Link>
<form className="form-inline my-2 my-lg-0 ml-5">
<input className="form-control mr-sm-2" type="search" placeholder="Search" onChange={(event) => onSearchChange(event.target.value)}/>
<input className="form-control mr-sm-2" type="search" placeholder="Search" onChange={(event) => onSearchChange(event.target.value)} />
</form>
<ul className="navbar-nav flex-grow-1 d-flex flex-row justify-content-end mx-5 mb-2">
{navItems}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment