Merge pull request #24 from WildCodeSchool/feature/burger-suit

Feature/burger suit

src/components/comics.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import '../style/comics.scss';
 
@@ -19,7 +20,7 @@ export default function Comics({ data, onClick }) {
           {data.map((dataItem) => {
             const detailsUrl = dataItem.urls.find((element) => element['type'] === 'detail').url;
             return (
-              <a
+              <Link
                 key={dataItem.id}
                 className='comic-card'
                 style={{
@@ -37,7 +38,7 @@ export default function Comics({ data, onClick }) {
                 <div className='comics-title'>
                   <h3>{dataItem.title}</h3>
                 </div>
-              </a>
+              </Link>
             );
           })}
         </div>

src/components/marvel-characters.jsx

@@ -1,19 +1,18 @@
-/* eslint-disable no-console */
 import { useEffect, useState } from 'react';
 
 import Card from '../components/card';
 import Modal from '../components/modal';
 import Profile from '../components/profile';
 
-// import '../style/marvel-characters.scss';
-
 const publicKey = import.meta.env.VITE_PUBLIC_KEY;
 
 export default function MarvelCharacters({ addToFavorites }) {
   const [marvelCharacter, setMarvelCharacter] = useState([]);
   const [selectedCharacter, setSelectedCharacter] = useState(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comics, setComics] = useState([]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const charactersPerPage = 20;
 
   useEffect(() => {
     const apiComics = `https://gateway.marvel.com/v1/public/characters?apikey=${publicKey}&limit=100`;
@@ -24,15 +23,28 @@ export default function MarvelCharacters({ addToFavorites }) {
         return res.json();
       })
       .then((data) => {
-        setMarvelCharacter(data.data.results);
+        const randomCharacters = data.data.results.sort(() => Math.random() - 1);
+        setMarvelCharacter(randomCharacters);
       })
       .catch((err) => console.error(err));
-  }, []);
+  }, [MarvelCharacters]);
 
   const handleAddToFavorites = (character) => {
     addToFavorites(character);
   };
 
+  const handlePrev = () => {
+    if (currentPage > 0) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if ((currentPage + 1) * charactersPerPage < marvelCharacter.length) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
   const handleCardClick = (character) => {
     setSelectedCharacter(character);
     fetchComics(character.id);
@@ -50,7 +62,6 @@ export default function MarvelCharacters({ addToFavorites }) {
       .then((data) => {
         setComics(data.data.results);
       })
-      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
   };
 
@@ -60,35 +71,34 @@ export default function MarvelCharacters({ addToFavorites }) {
     setComics([]);
   };
 
+  const displayedCharacters = marvelCharacter
+    .filter(
+      (marvel) =>
+        marvel.thumbnail &&
+        marvel.thumbnail.path &&
+        marvel.thumbnail.extension &&
+        !marvel.thumbnail.path.includes('image_not_available'),
+    )
+    .slice(currentPage * charactersPerPage, (currentPage + 1) * charactersPerPage);
+
   return (
     <div className='characters-comics'>
+      <div className='pagination'>
+        <button onClick={handlePrev}>prev</button>
+        <button onClick={handleNext} disabled={(currentPage + 1) * charactersPerPage >= marvelCharacter.length}>
+          next
+        </button>
+      </div>
       <div className='grid-box'>
-        {marvelCharacter
-          .filter(
-            (marvel) =>
-              marvel.thumbnail &&
-              marvel.thumbnail.path &&
-              marvel.thumbnail.extension &&
-              !marvel.thumbnail.path.includes('image_not_available'),
-          )
-          .slice(0, 20)
-          .filter(
-            (marvel) =>
-              marvel.thumbnail &&
-              marvel.thumbnail.path &&
-              marvel.thumbnail.extension &&
-              !marvel.thumbnail.path.includes('image_not_available'),
-          )
-          .slice(0, 20)
-          .map((character) => (
-            <Card
-              key={character.id}
-              character={character.name}
-              image={`${character.thumbnail.path}.${character.thumbnail.extension}`}
-              onAddToFavorites={() => handleAddToFavorites(character)}
-              onClick={() => handleCardClick(character)}
-            />
-          ))}
+        {displayedCharacters.map((character) => (
+          <Card
+            key={character.id}
+            character={character.name}
+            image={`${character.thumbnail.path}.${character.thumbnail.extension}`}
+            onAddToFavorites={() => handleAddToFavorites(character)}
+            onClick={() => handleCardClick(character)}
+          />
+        ))}
       </div>
       <div className='comics-modal'>
         <Modal isOpen={isModalOpen} onClose={handleCloseModal}>

src/components/profile.jsx

@@ -8,13 +8,16 @@ export default function Profile({ characterMarvel, img, title, description, comi
       <div className='comics-characters'>
         <div className='character-content'>
           <div className='present'>
-            <img src={img} alt={characterMarvel} />
-            <h2>{characterMarvel}</h2>
-            <span>{title}</span>
-            <p>{description}</p>
-            <div className='btn'>
-              <button>Event</button>
-              <button>History</button>
+            <div className='image-containe'>
+              <img src={img} alt={characterMarvel} />
+              <h2>{characterMarvel}</h2>
+            </div>
+            <div className='bio'>
+              <h3>
+                {' '}
+                <strong>Bio :</strong>
+              </h3>
+              <p>{description}</p>
             </div>
           </div>
           <div className='comics-section'>

src/pages/favorite-page.jsx

@@ -1,9 +1,43 @@
+import { useState } from 'react';
+
 import Card from '../components/card';
+import Modal from '../components/modal';
+import Profile from '../components/profile';
 import '../style/burger.scss';
 import '../style/card.scss';
 import '../style/favorite-page.scss';
 
 export default function FavoritePage({ favorites }) {
+  const [selectedCharacter, setSelectedCharacter] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [comics, setComics] = useState([]);
+
+  const fetchComics = (characterId) => {
+    const apiComicsUrl = `https://gateway.marvel.com/v1/public/characters/${characterId}/comics?apikey=${import.meta.env.VITE_PUBLIC_KEY}`;
+
+    fetch(apiComicsUrl)
+      .then((res) => res.json())
+      .then((data) => {
+        setComics(data.data.results.filter((comic) => comic.description));
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleCardClick = (character) => {
+    setSelectedCharacter({
+      ...character,
+      image: `${character.thumbnail.path}.${character.thumbnail.extension}`,
+    });
+    fetchComics(character.id);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedCharacter(null);
+    setComics([]);
+  };
+
   return (
     <div className='favorite'>
       <h1 className='typo'>My Favorite Characters</h1>
@@ -17,10 +51,23 @@ export default function FavoritePage({ favorites }) {
               character={character.name}
               image={`${character.thumbnail.path}.${character.thumbnail.extension}`}
               isFavoritePage={true}
+              onClick={() => handleCardClick(character)}
             />
           ))
         )}
       </div>
+
+      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
+        {selectedCharacter && (
+          <Profile
+            characterMarvel={selectedCharacter.name}
+            img={selectedCharacter.image}
+            title={selectedCharacter.title}
+            description={selectedCharacter.description || 'No description available.'}
+            comics={comics.slice(0, 5)}
+          />
+        )}
+      </Modal>
     </div>
   );
 }

src/style/comics-display.scss

@@ -50,7 +50,12 @@
 
     p {
       font-size: 1rem;
+      overflow: hidden;
       line-height: 1.5;
+      max-width: 300px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 6;
     }
   }
 }

src/style/comics-page.scss

@@ -4,6 +4,24 @@
   padding-top: 20px;
   padding-left: 20px;
 
+  .more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 10px;
+
+    button {
+      background-color: #670208;
+      border: none;
+      color: white;
+      padding: 10px 20px;
+      border-radius: 5px;
+      font-size: 1em;
+      font-weight: 700;
+      cursor: pointer;
+      margin-top: 45px;
+    }
+  }
   .typo-comics {
     background-color: #670208;
     font-family: 'Aclonica', sans-serif;
@@ -12,14 +30,23 @@
     font-size: 18px;
     padding: 14px;
     border-radius: 10px;
-    margin-left: 400px;
+    margin-left: 157px;
     color: white;
     box-shadow: 0px 2px 6px black;
     align-items: center;
     justify-content: center;
     text-shadow: 3px 2px 8px black;
     display: flex;
   }
+}
+.comics {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(6, 170px);
+  justify-content: center;
+  grid-gap: 25px;
+  padding: 1em;
+  margin-top: 20px;
   .comics {
     width: 100%;
     display: grid;
@@ -90,24 +117,6 @@
     }
   }
 
-  .more {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 10px;
-
-    button {
-      background-color: #670208;
-      border: none;
-      color: white;
-      padding: 10px 20px;
-      border-radius: 5px;
-      font-size: 1em;
-      font-weight: 700;
-      cursor: pointer;
-      margin-top: 45px;
-    }
-  }
   .comics-footer footer {
     margin-top: 50px;
   }

src/style/favorite-page.scss

@@ -14,7 +14,7 @@
     font-size: 16px;
     padding: 14px;
     border-radius: 10px;
-    margin-left: 400px;
+    margin-left: 160px;
     color: white;
     box-shadow: 0px 2px 6px black;
     align-items: center;

src/style/profile-page.scss

@@ -7,12 +7,15 @@
   .comics-characters {
     .character-content {
       .present {
-        img {
-          width: 24%;
-          margin: 1% 0;
-          border-radius: 2%;
+        display: flex;
+        .image-containe {
+          img {
+            width: 340px;
+            margin: 1% 0;
+            border-radius: 2%;
+            margin-top: 7%;
+          }
         }
-
         span {
           font-weight: bold;
         }
@@ -37,7 +40,18 @@
           }
         }
       }
-
+      .bio {
+        margin-left: 16%;
+        margin-top: 2%;
+        h3 {
+          font-size: 3.3rem;
+          font-family: $font-family;
+        }
+        p {
+          font-size: 1.5rem;
+          font-family: $font-family;
+        }
+      }
       .comics-section {
         margin: 0.3%;