cambios guardados en local antes de sincronizar

Author: Raul-Reyes2

src/components/Card.jsx

@@ -1,4 +1,12 @@
+import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
+
 export const Card = ({ imgURL, title, children }) => {
+  const { store, dispatch } = useGlobalReducer();
+
+  const addFavorite = () => {
+    dispatch({ type: "add_favorite", payload: { name: title } });
+  };
+
   return (
     <>
       <div className="card">
@@ -10,9 +18,13 @@ export const Card = ({ imgURL, title, children }) => {
             <a href="#" className="btn btn-primary me-5">
               Learn more
             </a>
-            <a href="like" className="btn btn-primary">
+            <button
+              onClick={addFavorite}
+              className="btn btn-primary"
+              type="button"
+            >
               <i className="fa-regular fa-bookmark"></i>
-            </a>
+            </button>
           </div>
         </div>
       </div>

src/components/Favorites.jsx

@@ -4,6 +4,13 @@ export const Favorites = () => {
 
   const favorites = store.favoriteList || [];
 
+  const removeFavorite = (name) => {
+    dispatch({
+      type: "remove_favorite",
+      payload: { name: item },
+    });
+  };
+
   return (
     <>
       <div className="dropdown">
@@ -18,10 +25,17 @@ export const Favorites = () => {
 
         <ul className="dropdown-menu">
           {favorites.map((item, index) => (
-            <li key={item.name || index}>
-              <a className="dropdown-item" href="#">
-                {item.name || item}
-              </a>
+            <li
+              key={item || index}
+              className="d-flex justify-content-between align-item-center p-2"
+            >
+              <span className="dropdown-item-text">{item}</span>
+              <button
+                onClick={() => removeFavorite(item)}
+                className="btn btn-second btn-sm p-0 m-0"
+              >
+                <i className="fa fa-trash"></i>
+              </button>
             </li>
           ))}
         </ul>

src/store.js

@@ -19,14 +19,14 @@ export default function storeReducer(store, action = {}) {
           todo.id === id ? { ...todo, background: color } : todo
         ),
       };
-    case "add_Favorite":
+    case "add_favorite":
       const { name } = action.payload;
       return { ...store, favoriteList: [...store.favoriteList, name] };
     case "remove_favorite":
-      const favoriteList = store.favoriteList.filter(
+      const favoriteListFiltered = store.favoriteList.filter(
         (item) => item !== action.payload.name
       );
-      return { ...store, favoriteList: favoriteList };
+      return { ...store, favoriteList: favoriteListFiltered };
     case "update_characterList":
       const characterList = action.payload;
       return { ...store, characterList };

src/swapiFetch.js

@@ -15,6 +15,7 @@ export const getCharacterList = async () => {
   return characterListWithDetails;
 };
 
+
 export const getPlanetList = async () => {
   const httpResponse = await fetch(`${SWAPI_URL}planets`);
   const data = await httpResponse.json();