implementacion personajes

Author: Raul-Reyes2

src/components/Favorites.jsx

@@ -1,23 +1,26 @@
-const favoriteList = ["Gustavo", "kilian", "Pepito"];
+import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
 export const Favorites = () => {
+  const { store, dispatch } = useGlobalReducer();
+
+  const favorites = store.favoriteList || [];
+
   return (
     <>
       <div className="dropdown">
-        <a
+        <button
           className="btn btn-primary dropdown-toggle"
-          href="#"
-          role="button"
+          type="button"
           data-bs-toggle="dropdown"
           aria-expanded="false"
         >
-          Favorites
-        </a>
+          Favorites ({favorites.length})
+        </button>
 
         <ul className="dropdown-menu">
-          {favoriteList.map((item) => (
-            <li>
+          {favorites.map((item, index) => (
+            <li key={item.name || index}>
               <a className="dropdown-item" href="#">
-                {item}
+                {item.name || item}
               </a>
             </li>
           ))}

src/main.jsx

@@ -1,22 +1,21 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './index.css'  // Global styles for your application
-import { RouterProvider } from "react-router-dom";  // Import RouterProvider to use the router
-import { router } from "./routes";  // Import the router configuration
-import { StoreProvider } from './hooks/useGlobalReducer';  // Import the StoreProvider for global state management
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css"; // Global styles for your application
+import { RouterProvider } from "react-router-dom"; // Import RouterProvider to use the router
+import { router } from "./routes"; // Import the router configuration
+import { StoreProvider } from "./hooks/useGlobalReducer.jsx"; // Import the StoreProvider for global state management
 
 const Main = () => {
-    return (
-        <React.StrictMode>  
-            {/* Provide global state to all components */}
-            <StoreProvider> 
-                {/* Set up routing for the application */} 
-                <RouterProvider router={router}>
-                </RouterProvider>
-            </StoreProvider>
-        </React.StrictMode>
-    );
-}
+  return (
+    <React.StrictMode>
+      {/* Provide global state to all components */}
+      <StoreProvider>
+        {/* Set up routing for the application */}
+        <RouterProvider router={router}></RouterProvider>
+      </StoreProvider>
+    </React.StrictMode>
+  );
+};
 
 // Render the Main component into the root DOM element.
-ReactDOM.createRoot(document.getElementById('root')).render(<Main />)
+ReactDOM.createRoot(document.getElementById("root")).render(<Main />);

src/pages/Home.jsx

@@ -9,9 +9,32 @@ const MOCK_IMG_SRC =
 export const Home = () => {
   const { store, dispatch } = useGlobalReducer();
 
+  const IMAGE_MAP = {
+    "Luke Skywalker":
+      "https://lumiere-a.akamaihd.net/v1/images/luke-skywalker-main_7ffe21c7.jpeg?region=130%2C147%2C1417%2C796",
+    "C-3PO":
+      "https://lumiere-a.akamaihd.net/v1/images/c-3po-main_d6850e28.jpeg?region=176%2C0%2C951%2C536",
+    "R2-D2":
+      "https://lumiere-a.akamaihd.net/v1/images/r2-d2-main_f315b094.jpeg?region=273%2C0%2C951%2C536",
+    "Darth Vader":
+      "https://lumiere-a.akamaihd.net/v1/images/darth-vader-main_4560aff7.jpeg?region=0%2C67%2C1280%2C720",
+    "Leia Organa":
+      "https://lumiere-a.akamaihd.net/v1/images/leia-organa-main_9af6ff81.jpeg?region=187%2C157%2C1400%2C786",
+    "Owen Lars":
+      "https://lumiere-a.akamaihd.net/v1/images/owen-lars-main_08c717c8.jpeg?region=0%2C34%2C1053%2C593",
+    "Beru Whitesun lars":
+      "https://lumiere-a.akamaihd.net/v1/images/beru-lars-main_fa680a4c.png?region=342%2C0%2C938%2C527",
+    "R5-D4":
+      "https://lumiere-a.akamaihd.net/v1/images/r5-d4_main_image_7d5f078e.jpeg?region=374%2C0%2C1186%2C666",
+    "Biggs Darklighter":
+      "https://lumiere-a.akamaihd.net/v1/images/image_606ff7f7.jpeg?region=0%2C0%2C1560%2C878",
+    "Obi-Wan Kenobi":
+      "https://lumiere-a.akamaihd.net/v1/images/obi-wan-kenobi-main_3286c63c.jpeg?region=0%2C0%2C1280%2C721",
+  };
+
   const updateData = async () => {
     const characterList = await getCharacterList();
-    dispatch({ type: "update_character_list", payload: characterList });
+    dispatch({ type: "update_characterList", payload: characterList });
   };
 
   useEffect(() => {
@@ -21,12 +44,16 @@ export const Home = () => {
   return (
     <>
       Home
-      {store.characterList.map((character) => (
-        <Card imgURL={MOCK_IMG_SRC} title={character.name}>
+      {store.characterList.map((character, index) => (
+        <Card
+          key={character?.name || index}
+          imgURL={IMAGE_MAP[character?.name] || MOCK_IMG_SRC}
+          title={character?.name}
+        >
           <ul>
-            <li>eye color: blue</li>
-            <li>hair Color: green</li>
-            <li>size: 6feet</li>
+            <li>Eye color: {character?.eye_color}</li>
+            <li>Hair Color: {character?.hair_color}</li>
+            <li>size: {character?.height}cm</li>
           </ul>
         </Card>
       ))}

src/store.js

@@ -1,5 +1,6 @@
 export const initialStore = () => {
   return {
+    todos: [],
     favoriteList: [],
     characterList: [],
     planetList: [],
@@ -25,15 +26,16 @@ export default function storeReducer(store, action = {}) {
       const favoriteList = store.favoriteList.filter(
         (item) => item !== action.payload.name
       );
+      return { ...store, favoriteList: favoriteList };
     case "update_characterList":
       const characterList = action.payload;
-      return { ...store.characterList };
+      return { ...store, characterList };
     case "update_planetList":
       const planetList = action.payload;
-      return { ...store.planetList };
+      return { ...store, planetList };
     case "update_vehicleList":
       const vehicleList = action.payload;
-      return { ...store.vehicleList };
+      return { ...store, vehicleList };
 
     default:
       throw Error("Unknown action.");

src/swapiFetch.js

@@ -3,7 +3,16 @@ const SWAPI_URL = "https://www.swapi.tech/api/";
 export const getCharacterList = async () => {
   const httpResponse = await fetch(`${SWAPI_URL}people`);
   const data = await httpResponse.json();
-  return data.results;
+
+  const characterListSimple = data.results;
+  const detailPromises = characterListSimple.map(async (character) => {
+    const detailResponse = await fetch(character.url);
+    const detailData = await detailResponse.json();
+
+    return detailData.result.properties;
+  });
+  const characterListWithDetails = await Promise.all(detailPromises);
+  return characterListWithDetails;
 };
 
 export const getPlanetList = async () => {