show more info of the cards

cmglezpdev · Jul 28, 2022 · a8d2f76 · a8d2f76
1 parent 09defe2
commit a8d2f76
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/public/index.html b/public/index.html
@@ -26,6 +26,11 @@
     -->
     <title>React App</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/hero/HeroCard.jsx b/src/components/hero/HeroCard.jsx
@@ -4,9 +4,7 @@ import { Link } from "react-router-dom";
 export const HeroCard = ({
     id,
     superhero,
-    publisher,
     alter_ego,
-    first_appearance,
     characters
 }) => {
 

diff --git a/src/components/hero/HeroList.jsx b/src/components/hero/HeroList.jsx
@@ -1,13 +1,14 @@
 import { HeroCard } from './HeroCard';
 
 import getHeroesByPublisher from '../../selectors/getHeroesByPublisher';
+import { useMemo } from 'react';
 
 export const HeroList = ({ publisher }) => {
 
-    const heroes = getHeroesByPublisher(publisher);
+    const heroes = useMemo(() => getHeroesByPublisher(publisher), [publisher] );
 
     return (
-        <div className='row rows-cols-1 row-cols-md-3 g-3'> 
+        <div className='row rows-cols-1 row-cols-md-3 g-3 animate__animated animate__fadeIn'> 
             {
                 heroes.map(heroe =>
                     <HeroCard

diff --git a/src/components/hero/HeroScreen.jsx b/src/components/hero/HeroScreen.jsx
@@ -1,21 +1,51 @@
-import { useParams, Navigate } from "react-router-dom"
+import { useMemo } from "react";
+import { useParams, Navigate, useNavigate } from "react-router-dom"
 import getHeroesById from "../../selectors/getHerosById";
 
 export const HeroScreen = () => {
 
+  const navigate = useNavigate();
   const { heroeId } = useParams();
-  const hero = getHeroesById( heroeId );
+  const hero =  useMemo(() => getHeroesById( heroeId ), [heroeId]);
 
   if( !hero )
     return <Navigate to='/' />
 
 
+  const imgPath = `/assets/${hero.id}.jpg`;
+  const { superhero, alter_ego, id, publisher, first_appearance, characters } = hero;
+
+
+  const handleReturn = () => {
+    navigate(-1);
+  }
+
   return (
-    <div>
-      <h1>HeroScreen</h1>
-      <p>
-        {hero.superhero}
-      </p>
+    <div className="row mt-5">
+      <div className="col-4">
+        <img src={imgPath} alt={superhero} className='img-thumbnail animate__animated animate__fadeInLeft' />
+      </div>
+
+      <div className="col-8 animate__animated animate__fadeIn">
+        <h3>{ superhero }</h3>
+        <ul className="list-group">
+          <li className="list-group-item"><b>Alter ego: </b>{alter_ego}</li>
+          <li className="list-group-item"><b>Publisher: </b>{publisher}</li>
+          <li className="list-group-item"><b>First Appearance: </b>{first_appearance}</li>
+        </ul>
+
+        <h5 className="mt-3">Characters</h5>
+        <p>{ characters }</p>
+
+        <button
+          className="btn btn-outline-info"
+          onClick={handleReturn}
+        >
+          Regresar
+        </button>
+
+      </div>
+
     </div>
   )
 }