Merge pull request #28 from GuilhermeFreire-Dev/26-feature-carrinho-d…

…e-compras Página de promoções e novo carrinho
GuilhermeFreire-Dev · Aug 27, 2023 · cf89299 · cf89299
2 parents 9cf2b97 + 0f7ea03
commit cf89299
Show file tree

Hide file tree

Showing 23 changed files with 800 additions and 359 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,32 +1,37 @@
 import './assets/css/App.css';
 import './index.css';
-import { BrowserRouter, Route, Router, RouterProvider, Routes, createBrowserRouter } from 'react-router-dom';
-import Home from './components/view/Home';
-import Navegar from './components/view/Navegar';
-import Game from './components/view/Game';
-import NoContent from './components/view/NoContent';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import HomeView from './components/view/HomeView';
+import GameView from './components/view/GameView';
+import NavegarView from './components/view/NavegarView';
+import NoContentView from './components/view/NoContentView';
+import Cart from './scripts/Cart';
+import { useState } from 'react';
+import Layout from './components/layout/Layout';
+import CartView from './components/view/CartView';
+import SessionDetails from './components/view/SessionDetails';
 
 function App() {
 
-  const router = createBrowserRouter([
-    {
-      path: "/",
-      element: <Home></Home>,
-      errorElement: <NoContent></NoContent>
-    },
-    {
-      path: "/navegar",
-      element: <Navegar></Navegar>
-    },
-    {
-      path: "/game/:id",
-      element: <Game></Game>
-    }
-  ]);
+  const [cart, setCart] = useState(new Cart());
+  const [context, setContext] = useState({
+    cart: cart
+  });
 
   return (
     <div className="App bg-stone-900 text-white">
-      <RouterProvider router={router}></RouterProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<Layout context={context}></Layout>}>
+            <Route index element={<HomeView></HomeView>}></Route>
+            <Route path='/game/:id' element={<GameView context={context}></GameView>}></Route>
+            <Route path='/navegar' element={<NavegarView></NavegarView>}></Route>
+            <Route path='/carrinho' element={<CartView cart={context.cart}></CartView>}></Route>
+            <Route path='/promocoes' element={<SessionDetails sessionName={"Promoções"}></SessionDetails>}></Route>
+            <Route path='*' element={<NoContentView></NoContentView>}></Route>
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

diff --git a/src/components/layout/Cart/CardGameResume.jsx b/src/components/layout/Cart/CardGameResume.jsx
@@ -0,0 +1,46 @@
+import Utils from "../../../scripts/Utils";
+
+function CardGameResume({game, removeItemCart}) {
+
+  const utils = new Utils();
+
+  return (
+    game && (
+      <div className="bg-stone-950 flex w-4/6 mb-5 m-auto p-5 rounded-xl">
+        <img className="w-2/12 h-32 rounded-lg" src={game.image_url} alt="game" />
+        <div className="pl-5 pr-5 w-2/3">
+          <h4 className="font-bold text-xl mb-2">{ game.name }</h4>
+          {
+            game.edition && (
+              <p className="bg-stone-700 w-2/4 rounded-lg pb-0.5 mb-2 text-xs text-center font-semibold">{ game.edition }</p>
+            )
+          }
+          <p className="text-xs font-semibold">{ game.platform }</p>
+        </div>
+        <div className="flex flex-col justify-between">
+          <a onClick={() => removeItemCart(game)} href="#" className="text-stone-400 font-semibold text-end">Remover</a>
+          <div className="inline-flex items-end">
+            <div className="mr-3">
+              {
+                game.last_price > game.current_price && (
+                  <p className="text-stone-400 line-through">{ `${utils.getMonetaryFormat(game.last_price)}` }</p>
+                )
+              }
+              <p className="font-semibold text-xl">{ `${utils.getMonetaryFormat(game.current_price)}` }</p>
+            </div>
+           {
+            utils.getDiscount(game.current_price, game.last_price) > 0 && (
+              <span className="bg-gradient-to-r from-violet-600 to-blue-600 rounded-xl pt-1 pr-3 pb-1 pl-3
+                            text-center font-semibold">
+              { `-${utils.getDiscount(game.current_price, game.last_price)}%` }
+              </span>
+            )
+           }
+          </div>
+        </div>
+      </div>
+    )
+  );
+}
+
+export default CardGameResume;
diff --git a/src/components/layout/Catalog/CardV.jsx b/src/components/layout/Catalog/CardV.jsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import Utils from "../../../scripts/Utils";
 
 function CardV({game}) {
@@ -6,43 +7,38 @@ function CardV({game}) {
 
   return (
     game && (
-      <a href={`${process.env.REACT_APP_URL}/game/${game.id}`}>
-        <div className="flex flex-col bg-transparent rounded-xl w-52 p-3
-                        h-full select-none cursor-pointer
-                        hover:brightness-110">
-          <img className="h-60 m-1 rounded-lg" src={ game.attributes.image_url } alt={game.attributes.name} />
+      <Link to={`${process.env.REACT_APP_URL}/game/${game.id}`}>
+        <div className="flex flex-col bg-transparent rounded-xl w-52 p-3 h-full select-none cursor-pointer hover:brightness-110">
+          <img className="h-60 m-1 rounded-lg" src={ game.image_url } alt={game.name} />
           <div className="flex flex-col pl-1 pr-1 h-28">
-            <h5 className="font-bold">{ game.attributes.name }</h5>
+            <h5 className="font-bold">{ game.name }</h5>
             {
-              game.attributes.edition && (
-                <span className="bg-stone-700 text-xs font-semibold text-center
-                              pl-2 pr-2 pb-0.5 mt-2 w-2/3 rounded-lg">
-                  { game.attributes.edition }
+              game.edition && (
+                <span className="bg-stone-700 text-xs font-semibold text-center pl-2 pr-2 pb-0.5 mt-2 w-2/3 rounded-lg">
+                  { game.edition }
                 </span>
               )
             }
             <div className="flex justify-between items-center mt-1">
               <div className="mt-2">
                 {
-                  game.attributes.last_price && (
-                    <p className="text-xs text-stone-400 line-through">{ utils.getMonetaryFormat(game.attributes.last_price) }</p>
+                  game.last_price > game.current_price && (
+                    <p className="text-xs text-stone-400 line-through">{ utils.getMonetaryFormat(game.last_price) }</p>
                   )
                 }
-                <p className="text-lg font-semibold">{ utils.getMonetaryFormat(game.attributes.current_price) }</p>
+                <p className="text-lg font-semibold">{ utils.getMonetaryFormat(game.current_price) }</p>
               </div>
               {
-                utils.getDiscount(game.attributes.current_price, game.attributes.last_price) > 0 && (
-                  <span className="bg-gradient-to-r from-violet-600 to-blue-600
-                                  w-12 p-0.5 rounded-lg text-center text-sm
-                                  font-semibold">
-                    { `-${utils.getDiscount(game.attributes.current_price, game.attributes.last_price)}%` }
+                utils.getDiscount(game.current_price, game.last_price) > 0 && (
+                  <span className="bg-gradient-to-r from-violet-600 to-blue-600 w-12 p-0.5 rounded-lg text-center text-sm font-semibold">
+                    { `-${utils.getDiscount(game.current_price, game.last_price)}%` }
                   </span>
                 )
               }
             </div>
           </div>
         </div>
-      </a>
+      </Link>
     )
   );
 }

diff --git a/src/components/layout/Game/Media.jsx b/src/components/layout/Game/Media.jsx
@@ -6,7 +6,7 @@ function Media({medias}) {
   const [index, setIndex] = useState(1);
 
   function next() {
-    if (index < medias.data.length)
+    if (index < medias.length)
       setIndex(index + 1);
     else
       setIndex(1);
@@ -16,7 +16,7 @@ function Media({medias}) {
     if (index > 1)
       setIndex(index - 1);
     else
-      setIndex(medias.data.length);
+      setIndex(medias.length);
   }
 
   return (
@@ -29,9 +29,9 @@ function Media({medias}) {
           <IoChevronBack></IoChevronBack>
         </button>
         {
-          medias.data.map(function (media, id = 0) {
+          medias.map(function (media, id = 0) {
             return (
-              <img key={media.id} className={++id === index ? "rounded-xl w-full h-full" : "hidden" } src={media.attributes.media_url} alt={media.attributes.description}></img>
+              <img key={media.id} className={++id === index ? "rounded-xl w-full h-full" : "hidden" } src={media.media_url} alt={media.description}></img>
             );
           })
         }
@@ -44,7 +44,7 @@ function Media({medias}) {
       </div>
       <div className="w-full inline-flex justify-center p-3">
         {
-          medias.data.map(function (media, id = 0) {
+          medias.map(function (media, id = 0) {
             return (
               <span key={media.id} onClick={() => setIndex(id)} className={++id === index ? "block w-3 h-3 mr-1 ml-1 rounded-full cursor-pointer bg-stone-300" : "block w-3 h-3 mr-1 ml-1 rounded-full cursor-pointer bg-stone-600"}></span>
             );

diff --git a/src/components/layout/Game/SimilarGames.jsx b/src/components/layout/Game/SimilarGames.jsx
@@ -5,42 +5,44 @@ import axios from "axios";
 
 function SimilarGames({genres, gameId}) {
 
-  const [games, setGames] = useState([]);
+  const [similarGames, setSimilarGames] = useState([]);
+  var request = false;
 
   useEffect(() => {
-   if (gameId && genres.length) {
+   if (gameId && genres.length && !request) {
     getGamesByGenre();
    }
   }, []);
 
-  function getGamesByGenre() {
-
-    let url = `${process.env.REACT_APP_API_URL}/api/games?filters[id][$ne]=${gameId}`;
-    let index = genres.length;
-
-    genres.forEach(function (genre) {
-      url = url.concat("&", `filters[game_genres][id][$in][${genres.length - index}]=${genre.id}`);
-      index--;
+  async function getGamesByGenre() {
+    let genreIds = "";
+    request = true;
+    await genres.forEach(genre => {
+      genreIds = genreIds.concat(`${genre.id}+`);
     });
+    const url = `${process.env.REACT_APP_API_URL}/api/v1/games/similar-games/${gameId}?genres=${genreIds}`;
 
     axios.get(url)
-    .then(response => {
-      setGames(response.data.data);
+    .then((response) => {
+      setSimilarGames(response.data.data);
     })
-    .catch(error => {
+    .catch((error) => {
       console.log(error);
-    }); 
+    })
+    .finally(() => {
+      request = false;
+    })
   }
 
   return (
-    games.length > 0 && (
+    similarGames.length > 0 && (
       <>
         <h3 className="text-2xl mb-5 mt-10 font-bold">Você pode se interessar por</h3>
         <div className="flex justify-start flex-wrap 
                       overflow-y-hidden 
                       m-auto mb-5 pb-10 max-h-96">
           {
-            games.map(game => {
+            similarGames.map(game => {
               return (
                 <CardV key={game.id} game={game}></CardV>
               );

diff --git a/src/components/layout/Game/Specs.jsx b/src/components/layout/Game/Specs.jsx
@@ -7,19 +7,19 @@ function Specs({specs, nvl}) {
       <ul>
         <li className="mb-2">
           <span>Sistema operacional: </span>
-          <span>{ specs.attributes.so }</span>
+          <span>{ specs.so }</span>
         </li>
         <li className="mb-2">
           <span>Processador: </span>
-          <span>{ specs.attributes.processor }</span>
+          <span>{ specs.processor }</span>
         </li>
         <li className="mb-2">
           <span>Memória: </span>
-          <span>{ specs.attributes.memory }</span>
+          <span>{ specs.memory }</span>
         </li>
         <li className="mb-2">
           <span>Placa de vídeo: </span>
-          <span>{ specs.attributes.graphics }</span>
+          <span>{ specs.graphics }</span>
         </li>
       </ul>
     </div>

diff --git a/src/components/layout/Homepage/Carousel.jsx b/src/components/layout/Homepage/Carousel.jsx
@@ -1,25 +1,31 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
 function Carousel() {
 
   const [index, setIndex] = useState(1);
   const [carousel, setCarousel] = useState(null);
+  var request = false;
 
   useEffect(() => {
-    getCarousel();
+    if (!request) {
+      getCarousel();
+    }
   }, []);
 
-  async function getCarousel() {
-    if (!carousel) {
-      await axios.get(`${process.env.REACT_APP_API_URL}/api/game-carousels/1?populate=*`)
-      .then(response => {
-        setCarousel(response.data.data.attributes.games.data);
-      })
-      .catch(error => {
-        console.log(error);
-      })
-    }
+  function getCarousel() {
+    request = true;
+    axios.get(`${process.env.REACT_APP_API_URL}/api/game-carousels/1?populate=*`)
+    .then((response) => {
+      setCarousel(response.data.data.attributes.games.data);
+    })
+    .catch((error) => {
+      console.log(error);
+    })
+    .finally(() => {
+      request = false;
+    })
   } 
 
   function sideTo(index) {
@@ -35,15 +41,14 @@ function Carousel() {
             {
               carousel.map(function (item, id = 0) {
                 return (
-                  <a key={item.id} href={`game/${item.id}`}>
+                  <Link key={item.id} to={`game/${item.id}`}>
                     <div>
                       <div className={++id === index ? "bg-cover bg-no-repeat bg-center h-96 p-5 flex items-end" : "hidden"}
-                        style={{backgroundImage: `url(${item.attributes.thumb})`}}
-                      >
+                        style={{backgroundImage: `url(${item.attributes.thumb})`}}>
                         <p className="text-2xl font-semibold">{item.attributes.name}</p>
                       </div>
                     </div>
-                  </a>
+                  </Link>
                 );
               })
             }
@@ -54,8 +59,7 @@ function Carousel() {
             carousel.map(function(item, id = 0) {
               return (
                 <div key={item.id} className={++id === index ? "bg-stone-500 p-5 w-full rounded-xl cursor-pointer duration-300 select-none" : "bg-stone-800 p-5 w-full rounded-xl cursor-pointer duration-300 hover:bg-stone-700 select-none"}
-                  onClick={() => sideTo(id)}
-                >
+                  onClick={() => sideTo(id)}>
                   <p>{item.attributes.name}</p>
                 </div>
               );

diff --git a/src/components/layout/Homepage/Highlights.jsx b/src/components/layout/Homepage/Highlights.jsx
@@ -5,21 +5,26 @@ import CardH from "./CardH";
 function Highlights() {
 
   const [games, setGames] = useState([]);
+  var request = false;
 
   useEffect(() => {
-    if (!games.length) {
+    if (!request) {
       getHighlightsGames();
     }
   }, []);
 
-  async function getHighlightsGames() {
-    await axios.get(`${process.env.REACT_APP_API_URL}/api/games?filters[highlighted][$eq]=true`)
-    .then(response => {
+  function getHighlightsGames() {
+    request = true;
+    axios.get(`${process.env.REACT_APP_API_URL}/api/games?filters[highlighted][$eq]=true`)
+    .then((response) => {
       setGames(response.data.data);
     })
-    .catch(error => {
+    .catch((error) => {
       console.log(error);
     })
+    .finally(() => {
+      request = false;
+    })
   }
 
   return (