HeroScreen y estilos terminados

public/index.html

@@ -24,8 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
 
     <script src=" https://kit.fontawesome.com/7b5fb2de65.js" crossorigin="anonymous" async>
     </script>

src/components/ui/Navbar.jsx

@@ -4,8 +4,8 @@ import { Link, NavLink } from "react-router-dom";
 export const Navbar = () => {
   return (
     <nav className="navbar navbar-expand-sm navbar-dark bg-dark">
-      <Link className="navbar-brand" to="/">
-        Asociaciones
+      <Link className="navbar-brand mx-5" to="/">
+        HeroesApp
       </Link>
 
       <div className="navbar-collapse">
@@ -27,10 +27,19 @@ export const Navbar = () => {
           >
             DC
           </NavLink>
+
+          <NavLink
+            activeClassName="active"
+            className="nav-item nav-link"
+            exact
+            to="/search"
+          >
+            Search
+          </NavLink>
         </div>
       </div>
 
-      <div className="navbar-collapse collapse w-100 order-3 dual-collapse2">
+      <div>
         <ul className="navbar-nav ml-auto">
           <NavLink
             activeClassName="active"

src/hooks/useForm.js

@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+export const useForm = (initialState = {}) => {
+  const [values, setValues] = useState(initialState);
+
+  const reset = () => {
+    setValues(initialState);
+  };
+
+  const handleInputChange = ({ target }) => {
+    setValues({
+      ...values,
+      [target.name]: target.value,
+    });
+  };
+
+  return [values, handleInputChange, reset];
+};

src/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
 import HeroesApp from "./HeroesApp";
 
 ReactDOM.render(<HeroesApp />, document.getElementById("root"));

src/pages/heroes/HeroCard.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const HeroCard = ({
   id,
@@ -9,10 +9,7 @@ const HeroCard = ({
   characters,
 }) => {
   return (
-    <div
-      className="card ms-3 animate__animated animate__fadeIn"
-      style={{ maxWidth: 540 }}
-    >
+    <div className="card ms-3 animate__animated animate__fadeIn">
       <div className="row no-gutters">
         <div className="col-md-4">
           <img
@@ -34,7 +31,7 @@ const HeroCard = ({
               <small className="text-muted"> {first_appearance} </small>
             </p>
 
-            <NavLink to={`./hero/${id}`}>Más...</NavLink>
+            <Link to={`./hero/${id}`}>Más...</Link>
           </div>
         </div>
       </div>

src/pages/heroes/HeroScreen.jsx

@@ -1,11 +1,63 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useParams, Redirect } from "react-router-dom";
+import getHeroById from "../../selectors/getHeroById";
+
+const HeroScreen = ({ history }) => {
+  const { heroId: heroId } = useParams();
+
+  const hero = useMemo(() => getHeroById(heroId), [heroId]);
+
+  if (!hero) {
+    return <Redirect to="/" />;
+  }
+
+  const handleReturn = () => {
+    if (history.length <= 2) {
+      history.push("/");
+    } else {
+      history.goBack();
+    }
+  };
+
+  const { superhero, publisher, alter_ego, first_appearance, characters } =
+    hero;
 
-const HeroeScreen = () => {
   return (
-    <div>
-      <h1>Hero Screen</h1>
+    <div className="row mt-5">
+      <div className="col-4">
+        <img
+          src={`../assets/heroes/${heroId}.jpg`}
+          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 list-group-flush">
+          <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> Characters </h5>
+        <p> {characters} </p>
+
+        <button className="btn btn-outline-info" onClick={handleReturn}>
+          Return
+        </button>
+      </div>
     </div>
   );
 };
 
-export default HeroeScreen;
+export default HeroScreen;

src/pages/search/SearchScreen.jsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from "react";
+import queryString from "query-string";
+import HeroCard from "../heroes/HeroCard";
+import { useForm } from "../../hooks/useForm.js";
+import { useLocation } from "react-router-dom";
+import { getHeroesByName } from "../../selectors/getHeroesByName";
+
+const SearchScreen = ({ history }) => {
+  const location = useLocation();
+  const { q = "" } = queryString.parse(location.search);
+
+  const [formValues, handleInputChange] = useForm({
+    searchText: q,
+  });
+  const { searchText } = formValues;
+
+  const heroesFiltered = useMemo(() => getHeroesByName(q), [q]);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    history.push(`?q=${searchText}`);
+  };
+
+  return (
+    <div>
+      <h1>Search Screen</h1>
+      <hr />
+
+      <div className="row">
+        <div className="col-5">
+          <h4> Search Form </h4>
+          <hr />
+
+          <form onSubmit={handleSearch}>
+            <input
+              type="text"
+              placeholder="Find your hero"
+              className="form-control"
+              name="searchText"
+              autoComplete="off"
+              value={searchText}
+              onChange={handleInputChange}
+            />
+
+            <button
+              type="submit"
+              className="btn m-1 btn-block btn-outline-primary"
+            >
+              Search...
+            </button>
+          </form>
+        </div>
+
+        <div className="col-7">
+          <h4> Results </h4>
+          <hr />
+
+          {q === "" && <div className="alert alert-info">Search a hero</div>}
+
+          {q !== "" && heroesFiltered.length === 0 && (
+            <div className="alert alert-danger">
+              There is no a hero with {q}
+            </div>
+          )}
+
+          {heroesFiltered.map((hero) => (
+            <HeroCard key={hero.id} {...hero} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchScreen;

src/routers/DashboardRoutes.jsx

@@ -4,16 +4,19 @@ import { Navbar } from "../components/ui/Navbar";
 import DcScreen from "../pages/dc/DcScreen";
 import HeroScreen from "../pages/heroes/HeroScreen";
 import MarvelScreen from "../pages/marvel/MarvelScreen";
+import SearchScreen from "../pages/search/SearchScreen";
 
 const DashboardRoutes = () => {
   return (
     <>
       <Navbar />
-      <div>
+      <div className="container mt-2">
         <Switch>
           <Route exact path="/marvel" component={MarvelScreen} />
-          <Route exact path="/heroe/:heroeId" component={HeroScreen} />
+          <Route exact path="/hero/:heroId" component={HeroScreen} />
           <Route exact path="/dc" component={DcScreen} />
+          <Route exact path="/search" component={SearchScreen} />
+
           <Redirect to="/marvel" />
         </Switch>
       </div>

src/selectors/getHeroesById.js → src/selectors/getHeroById.js

@@ -1,5 +1,7 @@
 import heroes from "../data/heroes";
 
-export default getHeroeById = (id) => {
+const getHeroById = (id) => {
   return heroes.find((heroe) => heroe.id === id);
 };
+
+export default getHeroById;

src/selectors/getHeroesByName.js

@@ -0,0 +1,12 @@
+import heroes from "../data/heroes";
+
+export const getHeroesByName = (name = "") => {
+  if (name === "") {
+    return [];
+  }
+
+  name = name.toLocaleLowerCase();
+  return heroes.filter((hero) =>
+    hero.superhero.toLocaleLowerCase().includes(name)
+  );
+};