Skip to content

Commit

Permalink
fav-ok
Browse files Browse the repository at this point in the history
  • Loading branch information
Marie Mélody F authored and Marie Mélody F committed Sep 3, 2023
1 parent 499b300 commit 92a454c
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 46 deletions.
60 changes: 50 additions & 10 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,21 +278,15 @@ header button:hover {
/* border: 1px solid red; */
}

.img-Charaters {
.favoris .img-Charaters {
height: 250px;
width: 200px;
object-fit: cover;
margin: 15px 0;
border: 2px solid #e2dddd;
border-radius: 25px 70px;
}
.img-Charater {
height: 350px;
object-fit: cover;
margin: 15px 0;
/* border: 2px solid #e2dddd; */
/* border-radius: 25px 70px; */
}

.favoris .img-Charaters:hover {
transform: translateY(-3px);
/* background-color: white; */
Expand Down Expand Up @@ -448,20 +442,21 @@ form {
background-image: url(./images/5ec846f40d1e858b0fda2ddfea4305f7.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 500px;
}
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 550px;
height: 600px;
/* border: 1px solid rgb(0, 255, 13); */
}
.signup-input input {
height: 40px;
border-radius: 10px;
padding: 5px;
/* border: 1px solid orangered; */
}
.form-container p {
margin-top: 20px;
Expand All @@ -477,7 +472,52 @@ form {
color: white;
}

.validation {
display: flex;
justify-content: center;
margin-top: 50px;
}

.form-validation:hover {
color: rgb(202, 3, 3);
background-color: rgb(40, 39, 39);
}

/* --------------------- */
/* --------------------- */
/* ------FAVORIS-------- */
/* --------------------- */
/* --------------------- */

.favoris img {
height: 250px;
width: 200px;
object-fit: cover;
/* border: 1px solid red; */
border-radius: 10px;
border-bottom: 1px solid rgba(211, 211, 211, 0.448);
}

.favoris p {
font-size: 20px;
margin: 20px 0;
}

.favComics {
/* border: 2px solid blanchedalmond; */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.list-comics h1 {
border-bottom: 1px solid rgba(211, 211, 211, 0.448);
margin-bottom: 20px;
padding-bottom: 10px;
}

.list-characters h1 {
border-bottom: 1px solid rgba(211, 211, 211, 0.448);
margin-bottom: 20px;
padding-bottom: 10px;
}
41 changes: 32 additions & 9 deletions src/pages/Characters.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import axios from "axios";
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Loader from "../components/Loader";
import Cookies from "js-cookie";

const Charaters = () => {
const [isLoading, setIsLoading] = useState(true);
Expand All @@ -11,6 +12,8 @@ const Charaters = () => {
const [limit, setLimit] = useState(100);
const [count, setCount] = useState();
const [page, setPage] = useState();
const [favoritesCharacters, setFavoritesCharacters] = useState([]);

// console.log("state count", count);
// console.log("state skip", skip);
// console.log("test", page / 100);
Expand Down Expand Up @@ -103,17 +106,37 @@ const Charaters = () => {
// console.log(id);

return (
<Link to={`/comics/${_id}`} key={index}>
<main key={id}>
<div className="card-wrap">
<h3 className="description-characters">{name}</h3>
<div className="favoris">
<main key={id}>
<div className="card-wrap">
<h3 className="description-characters">{name}</h3>
<div className="favoris">
<Link to={`/Characters/${_id}`} key={index}>
<img className="img-Charaters" src={imageUrl} alt="" />
<i className="fa-solid fa-star fa-xl fa-border "></i>
</div>
</Link>
<i
className="fa-solid fa-star fa-xl fa-border "
onClick={() => {
const newFavoritesCharacters = [...favoritesCharacters];
newFavoritesCharacters.push({
_id: _id,
name: name,
imageUrl: imageUrl,
});
setFavoritesCharacters(newFavoritesCharacters);
Cookies.set(
"favoritesCharacters",
JSON.stringify(newFavoritesCharacters),
{
expires: 30,
}
);

console.log("favoritesChar", newFavoritesCharacters);
}}
></i>
</div>
</main>
</Link>
</div>
</main>
);
}
)}
Expand Down
13 changes: 9 additions & 4 deletions src/pages/Comics.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,18 @@ const Comics = () => {
onClick={() => {
const newFavoritesComics = [...favoritesComics];
newFavoritesComics.push({
imageUrl: imageUrl,
_id: _id,
title: title,
imageUrl: imageUrl,
});
setFavoritesComics(newFavoritesComics);
Cookies.set("favorites", newFavoritesComics, {
expires: 30,
});
Cookies.set(
"favorites",
JSON.stringify(newFavoritesComics),
{
expires: 30,
}
);

console.log("favorites", newFavoritesComics);
}}
Expand Down
48 changes: 35 additions & 13 deletions src/pages/Favoris.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,45 @@ import React, { useState, useEffect } from "react";
import Cookies from "js-cookie";

const Favorite = ({ token, setToken }) => {
// console.log("token fav.jsx => ", token);
const [favorites, setFavorites] = useState(Cookies.get("favorites") || null);
console.log("fav", favorites); // recup id, title, img
// console.log("SPLIT", favorites.split(","));
// console.log("SPLIT", favorites.split(",")[2]);
const img = favorites.split(",")[1];
// console.log("img", img);
const title = favorites.split(",")[2];
// console.log("title", title);
const favoris = JSON.parse(favorites);

const [favoritesCharacters, setfavoritesCharacters] = useState(
Cookies.get("favoritesCharacters") || null
);
const favorisCharacters = JSON.parse(favoritesCharacters);

return (
<div>
<div className="container">
<h1>Vos favoris</h1>
{/* {favorites.map((imageUrl, title) => {
return console.log(imageUrl);
console.log(title);
})} */}
<div className="favComics">
<div className="list-comics">
<h1>Comics favorites</h1>
{favoris.map((infos, index) => (
<div key={index}>
<div className="favoris">
<p>{infos.title}</p>
<img src={infos.imageUrl} alt="" />
</div>
</div>
))}
</div>

<div className="list-characters">
<h1>Characters favorites</h1>

{favorisCharacters.map((info, index) => (
<div key={index}>
<div className="favoris">
<p>{info.name}</p>
<img className="favoris" src={info.imageUrl} alt="" />
</div>
</div>
))}
</div>
</div>
</div>
);
};

export default Favorite;
17 changes: 10 additions & 7 deletions src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,18 @@ const Login = ({ token, setToken }) => {
setPassword(event.target.value);
}}
/>
<button
className="form-validation"
type="submit"
value="Se connecter"
>
Log in
</button>
<div className="validation">
<button
className="form-validation"
type="submit"
value="Se connecter"
>
Log in
</button>
</div>
</form>
</div>

<Link to="/user/signup">
<p className="subscribe">
You dont have a account ? Come on, come to Sign up !
Expand Down
4 changes: 1 addition & 3 deletions src/pages/Signup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,14 @@ const Signup = () => {
placeholder="Password"
/>
</form>
</div>
<Link to="/characters">
<button
onClick={handleSubmit}
className="form-validation"
type="submit"
>
Sign up
</button>
</Link>
</div>
<Link to="/user/login">
<p>Already registered ? Use Log in !</p>
</Link>
Expand Down

0 comments on commit 92a454c

Please sign in to comment.