Estado en providers para actualizar datos desde API

src/assets/index.jsx

@@ -2,5 +2,6 @@ import coin from "./coin.svg";
 import buy from "./buy-blue.svg";
 import error from "./error.gif";
 import success from "./success.gif";
+import coin_animated from "./coin.gif";
 
-export { coin, buy, error, success };
+export { coin, buy, error, success, coin_animated };

src/components/Modals/CoinsModal.jsx

@@ -1,10 +1,33 @@
-import React from "react";
+import React, { useState, useContext } from "react";
 import { createPortal } from "react-dom";
 import "./modal.scss";
-import { success } from "../../assets/index";
+import { coin_animated } from "../../assets/index";
+import { addPoints } from "../../services/userService";
+import { UserContext } from "../../providers/UserProvider";
 
-const CoinsModal = ({ isShowing, hide }) =>
-  isShowing
+const CoinsModal = ({ isShowing, hide }) => {
+  const [selected, setSelected] = useState(1000);
+
+  const { setUserResponse } = useContext(UserContext);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    addPoints(Number.parseInt(selected))
+      .then((res) => {
+        console.log("response", res);
+        setUserResponse(res);
+        hide();
+      })
+      .catch((err) => {
+        console.log("error", err);
+      });
+  };
+
+  const handleChange = (event) => {
+    setSelected(event.target.value);
+  };
+
+  return isShowing
     ? createPortal(
         <>
           <div className="modal-overlay" />
@@ -28,20 +51,38 @@ const CoinsModal = ({ isShowing, hide }) =>
                 </button>
               </div>
               <div className="content">
-                <form className="coins-form">
+                <form className="coins-form" onSubmit={handleSubmit}>
+                  <img className="gif" src={coin_animated} alt="error" />
                   <div>
-                    <input type="radio" name="choice" value={1000} />
+                    <input
+                      onChange={handleChange}
+                      type="radio"
+                      name="choice"
+                      value={1000}
+                    />
                     <label>1000</label>
                   </div>
                   <div>
-                    <input type="radio" name="choice" value={5000} />
+                    <input
+                      onChange={handleChange}
+                      type="radio"
+                      name="choice"
+                      value={5000}
+                    />
                     <label>5000</label>
                   </div>
                   <div>
-                    <input type="radio" name="choice" value={7500} />
+                    <input
+                      onChange={handleChange}
+                      type="radio"
+                      name="choice"
+                      value={7500}
+                    />
                     <label>7500</label>
                   </div>
-                  <button>Get Coins!</button>
+                  <button type="submit" className="coins">
+                    Get Coins!
+                  </button>
                 </form>
               </div>
             </div>
@@ -50,5 +91,5 @@ const CoinsModal = ({ isShowing, hide }) =>
         document.body
       )
     : null;
-
+};
 export default CoinsModal;

src/components/Modals/modal.scss

@@ -83,6 +83,14 @@ button {
     color: #43a764;
   }
 
+  .coins {
+    cursor: pointer;
+    font-size: 20px;
+    margin-top: 10px;
+    outline: none;
+    color: #c7aa0a;
+  }
+
   .gif {
     align-self: center;
     max-width: 200px;

src/components/Products/Product.jsx

@@ -15,8 +15,9 @@ const Product = ({
     cost,
     img: { url },
   },
+  onFetch,
 }) => {
-  const user = useContext(UserContext);
+  const { user, setUserResponse } = useContext(UserContext);
 
   useEffect(() => {
     if (!user) return;
@@ -30,12 +31,14 @@ const Product = ({
 
   const { points } = user;
 
-  const canBuy = cost >= points;
+  const canBuy = cost <= points;
 
   const showResponseModal = () => {
     redeemProduct(_id)
       .then((res) => {
         toggleSuccessModal();
+        setUserResponse(res);
+        onFetch(res);
       })
       .catch((err) => {
         toggleErrorModal();

src/components/Products/ProductsList.jsx

@@ -5,7 +5,7 @@ import { ProductsContext } from "../../providers/index";
 import "./products.scss";
 
 const ProductsList = () => {
-  const products = useContext(ProductsContext);
+  const { products, setProductResponse } = useContext(ProductsContext);
 
   useEffect(() => {
     if (!products) return;
@@ -18,7 +18,7 @@ const ProductsList = () => {
       <>
         <div className="cards">
           {currentData().map((item, key) => {
-            return <Product item={item} key={key}></Product>;
+            return <Product item={item} key={key} onFetch={setProductResponse} />;
           })}
         </div>
         <div className="container-pagination">

src/components/Products/products.scss

@@ -17,6 +17,10 @@
   border-radius: 12px;
   box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
 
+  button {
+    cursor: pointer;
+  }
+
   .img {
     background-size: contain;
     background-position: center;

src/components/User/UserPanel.jsx

@@ -4,7 +4,7 @@ import { UserContext } from "../../providers/UserProvider";
 import "./user.scss";
 
 const UserPanel = () => {
-  const user = useContext(UserContext);
+  const { user } = useContext(UserContext);
 
   useEffect(() => {
     if (!user) return;

src/providers/ProductsProvider.jsx

@@ -6,14 +6,16 @@ export const ProductsContext = React.createContext();
 const ProductsProvider = ({ children }) => {
   const [products, setProducts] = useState({});
 
+  const [productResponse, setProductResponse] = useState({});
+
   useEffect(() => {
     getProducts().then((products) => {
       setProducts(products);
     });
-  }, []);
+  }, [productResponse]);
 
   return (
-    <ProductsContext.Provider value={products}>
+    <ProductsContext.Provider value={{products, setProductResponse}}>
       {children}
     </ProductsContext.Provider>
   );

src/providers/UserProvider.jsx

@@ -6,13 +6,19 @@ export const UserContext = React.createContext();
 const UserProvider = ({ children }) => {
   const [user, setUser] = useState({});
 
+  const [userResponse, setUserResponse] = useState({});
+
   useEffect(() => {
     getUser().then((user) => {
       setUser(user);
     });
-  }, []);
+  }, [userResponse]);
 
-  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
+  return (
+    <UserContext.Provider value={{ user, setUserResponse }}>
+      {children}
+    </UserContext.Provider>
+  );
 };
 
 export default UserProvider;

src/services/userService.jsx

@@ -5,7 +5,7 @@ const headers = {
   Authorization: `Bearer ${API.AUTH_TOKEN}`,
 };
 
-export const getUser = async () => {
+export const getUser = () => {
   return fetch(API.USER, { headers })
     .then((response) => {
       if (!response.ok) {
@@ -16,7 +16,7 @@ export const getUser = async () => {
     .then((response) => response.json());
 };
 
-export const addPoints = async (coins) => {
+export const addPoints = (coins) => {
   return fetch(API.ADD_POINTS, {
     headers,
     method: "POST",