Se mejoran fetch de los services para manejar mejor el modal de error

hendaniel · Sep 6, 2020 · a1a87c2 · a1a87c2
1 parent 33151b1
commit a1a87c2
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 54 deletions.
diff --git a/src/components/Modals/FailureModal.jsx b/src/components/Modals/FailureModal.jsx
@@ -28,7 +28,7 @@ const FailureModal = ({ isShowing, hide }) =>
               </div>
               <div className="content">
                 <img className="gif" src={error} alt="error" />
-                <div class="error">
+                <div className="error">
                   <h1>ERROR!</h1>
                   <span>Something went wrong, try again</span>
                 </div>

diff --git a/src/components/Modals/SuccessModal.jsx b/src/components/Modals/SuccessModal.jsx
@@ -29,7 +29,7 @@ const SuccessModal = ({ isShowing, hide }) =>
               </div>
               <div className="content">
                 <img className="gif" src={success} alt="error" />
-                <div class="success">
+                <div className="success">
                   <h1>SUCCESS!</h1>
                   <span>Everything went ok!, enjoy your product</span>
                 </div>

diff --git a/src/components/Products/Product.jsx b/src/components/Products/Product.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { UserContext } from "../../providers/index";
 import { coin, buy } from "../../assets/index";
 import { SuccessModal, FailureModal } from "../Modals/index";
@@ -17,27 +17,36 @@ const Product = ({
 }) => {
   const user = useContext(UserContext);
 
-  const { isShowing, toggle } = useModal();
-
   useEffect(() => {
     if (!user) return;
   }, [user]);
 
+  const [error, setError] = useState(false);
+
+  const { isShowing, toggle } = useModal();
+
   const { points } = user;
 
   const canBuy = cost <= points;
 
-  const openBuyModal = () => {
-    redeemProduct(_id).then((res) => {
-      // toggle();
-      console.log(res);
-    });
+  const showModal = () => {
+    redeemProduct(_id)
+      .then((res) => {
+        toggle();
+      })
+      .catch((err) => {
+        setError(true);
+        toggle();
+      });
   };
 
   return (
     <div className="card">
-      <SuccessModal isShowing={isShowing} hide={toggle} />
-      {/* <FailureModal isShowing={isShowing} hide={toggle} /> */}
+      {error ? (
+        <FailureModal isShowing={isShowing} hide={toggle} />
+      ) : (
+        <SuccessModal isShowing={isShowing} hide={toggle} />
+      )}
 
       <div className="img" style={{ backgroundImage: `url("${url}")` }}></div>
       <div className="info">
@@ -53,7 +62,7 @@ const Product = ({
             <div className="action">
               <h3>{cost}</h3>
               <img src={coin} alt="coin" />
-              <button onClick={openBuyModal}>Redeem now</button>
+              <button onClick={showModal}>Redeem now</button>
             </div>
           </div>
         </>

diff --git a/src/services/productsService.jsx b/src/services/productsService.jsx
@@ -5,29 +5,28 @@ const headers = {
   Authorization: `Bearer ${API.AUTH_TOKEN}`,
 };
 
-export const getProducts = async () => {
-  try {
-    const response = await fetch(API.PRODUCTS, { headers });
-    const json = await response.json();
-    return json;
-  } catch (error) {
-    return alert(JSON.stringify(error));
-  }
+export const getProducts = () => {
+  return fetch(API.PRODUCTS, { headers })
+    .then((response) => {
+      if (!response.ok) {
+        throw Error(response.statusText);
+      }
+      return response;
+    })
+    .then((response) => response.json());
 };
 
-export const redeemProduct = async (id) => {
-  try {
-    console.log(id);
-    const response = await fetch(API.REDEEEM, {
-      headers,
-      method: "POST",
-      body: JSON.stringify({ productId: id }),
-    });
-    console.log("request", response);
-    const json = await response.json();
-    return json;
-  } catch (error) {
-    console.log("Error", error);
-    return alert(JSON.stringify(error));
-  }
+export const redeemProduct = (id) => {
+  return fetch(API.REDEEEM, {
+    headers,
+    method: "POST",
+    body: JSON.stringify({ productId: id }),
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw Error(response.statusText);
+      }
+      return response;
+    })
+    .then((response) => response.json());
 };
diff --git a/src/services/userService.jsx b/src/services/userService.jsx
@@ -6,25 +6,27 @@ const headers = {
 };
 
 export const getUser = async () => {
-  try {
-    const response = await fetch(API.USER, { headers });
-    const json = await response.json();
-    return json;
-  } catch (error) {
-    return alert(JSON.stringify(error));
-  }
+  return fetch(API.USER, { headers })
+    .then((response) => {
+      if (!response.ok) {
+        throw Error(response.statusText);
+      }
+      return response;
+    })
+    .then((response) => response.json());
 };
 
 export const addPoints = async (coins) => {
-  try {
-    const response = await fetch(API.ADD_POINTS, {
-      method: "POST",
-      body: JSON.stringify({ amount: coins }),
-      headers,
-    });
-    const json = await response.json();
-    return json;
-  } catch (error) {
-    return alert(JSON.stringify(error));
-  }
+  return fetch(API.ADD_POINTS, {
+    headers,
+    method: "POST",
+    body: JSON.stringify({ amount: coins }),
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw Error(response.statusText);
+      }
+      return response;
+    })
+    .then((response) => response.json());
 };