Merge new features into main

.eslintrc.cjs

@@ -1,18 +1,12 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    '@typescript-eslint/no-unused-vars': 0,
   },
-}
+};

index.html

@@ -4,7 +4,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],300;9..40,400;9..40,500;9..40,600;9..40,700&family=Poppins:wght@400;500;600;700&display=swap"

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.2",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.16",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -27,7 +28,8 @@
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.18.0",
     "styled-components": "^6.1.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.22.11",

src/components/CreateListModal/index.tsx

@@ -1,16 +1,15 @@
 import { useContext, useEffect, useState } from 'react';
 import { Backdrop, Modal } from '@mui/material';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
-import TextField from '@mui/material/TextField';
-import { Button } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 
-import { Container, Form, GameList } from './styles';
+import { Container, Form, GameList, Input, Button } from './styles';
 import { GameCoverImageSizes, IGame } from '../types';
 
 import { GameCard } from './GameCard';
 import apiCaller from '@/src/services/api';
 import { AuthContext } from '@/src/contexts/auth';
+import { NotificationSnackbar } from '../NotificationSnackbar';
 
 interface CreateListModalProps {
   isCreateListModalOpen: boolean;
@@ -27,6 +26,7 @@ export function CreateListModal({ isCreateListModalOpen, handleCreateListModal }
 
   const [games, setGames] = useState<IGame[]>([]);
   const [selectedGames, setSelectedGames] = useState<IGame[]>([]);
+  const [isListCreated, setIsListCreated] = useState(false);
 
   const handleCreateCustomList: SubmitHandler<FieldValues> = async data => {
     const { name } = data as FormData;
@@ -38,8 +38,7 @@ export function CreateListModal({ isCreateListModalOpen, handleCreateListModal }
     const token = localStorage.getItem('@Auth:token');
 
     if (token) {
-      const parsed: string = JSON.parse(token);
-      apiCaller.defaults.headers.common.Authorization = `Bearer ${parsed}`;
+      apiCaller.defaults.headers.common.Authorization = `Bearer ${token}`;
     }
 
     const payload = {
@@ -50,7 +49,10 @@ export function CreateListModal({ isCreateListModalOpen, handleCreateListModal }
 
     apiCaller
       .post('/lists', payload)
-      .then(response => console.log(response))
+      .then(_response => {
+        setIsListCreated(true);
+        setSelectedGames([]);
+      })
       .catch(error => console.log(error));
   };
 
@@ -68,6 +70,10 @@ export function CreateListModal({ isCreateListModalOpen, handleCreateListModal }
     }
   }
 
+  function handleCloseSnackbar() {
+    setIsListCreated(false);
+  }
+
   useEffect(() => {
     apiCaller
       .get('/games/most-popular')
@@ -87,72 +93,74 @@ export function CreateListModal({ isCreateListModalOpen, handleCreateListModal }
   }, []);
 
   return (
-    <Modal
-      open={isCreateListModalOpen}
-      onClose={() => handleCreateListModal(false)}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      slots={{
-        backdrop: Backdrop,
-      }}
-    >
-      <Container>
-        <h1>Crie sua lista</h1>
-
-        <Form onSubmit={handleSubmit(handleCreateCustomList)}>
-          <TextField
-            {...register('name')}
-            id="outlined-basic"
-            variant="outlined"
+    <>
+      <Modal
+        open={isCreateListModalOpen}
+        onClose={() => handleCreateListModal(false)}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        slots={{
+          backdrop: Backdrop,
+        }}
+      >
+        <Container>
+          <h1>Crie sua lista</h1>
+
+          <Form onSubmit={handleSubmit(handleCreateCustomList)}>
+            <Input {...register('name')} type="text" placeholder="Nome da lista" />
+            <Button type="submit" disabled={selectedGames.length === 0}>
+              Criar
+            </Button>
+          </Form>
+
+          <Input
             type="text"
-            placeholder="Nome da lista"
+            placeholder="Buscar por jogo"
+            disabled={games.length == 0}
+            style={{
+              width: '80%',
+              marginBottom: '1.5rem',
+            }}
           />
-          <Button variant="contained" type="submit" disabled={selectedGames.length === 0}>
-            Criar
-          </Button>
-        </Form>
-
-        <TextField
-          id="outlined-basic"
-          variant="outlined"
-          type="text"
-          color="info"
-          placeholder="Buscar por jogo"
-          sx={{
-            width: '80%',
-          }}
-          disabled={games.length == 0}
+          <GameList>
+            {games.length == 0 && (
+              <CircularProgress
+                color="secondary"
+                sx={{
+                  alignSelf: 'center',
+                }}
+                size={'4rem'}
+              />
+            )}
+
+            {games &&
+              games.map(game => {
+                return (
+                  <GameCard
+                    key={game.slug}
+                    slug={game.slug}
+                    title={game.name}
+                    originInfo={game.name}
+                    cover={game.cover}
+                    genres={game.name}
+                    rating={game.rating}
+                    handleSelectGame={handleSelectGame}
+                    isSelected={!!selectedGames.find(selectedGame => selectedGame.slug === game.slug)}
+                  />
+                );
+              })}
+          </GameList>
+        </Container>
+      </Modal>
+
+      {isListCreated && (
+        <NotificationSnackbar
+          type="success"
+          message="Lista criada com sucesso"
+          handleClose={handleCloseSnackbar}
+          isSnackbarOpen={isListCreated}
         />
-
-        <GameList>
-          {games.length == 0 && (
-            <CircularProgress
-              color="secondary"
-              sx={{
-                alignSelf: 'center',
-              }}
-              size={'4rem'}
-            />
-          )}
-
-          {games &&
-            games.map(game => {
-              return (
-                <GameCard
-                  key={game.slug}
-                  slug={game.slug}
-                  title={game.name}
-                  originInfo={game.name}
-                  cover={game.cover}
-                  genres={game.name}
-                  rating={game.rating}
-                  handleSelectGame={handleSelectGame}
-                  isSelected={!!selectedGames.find(selectedGame => selectedGame.slug === game.slug)}
-                />
-              );
-            })}
-        </GameList>
-      </Container>
-    </Modal>
+      )}
+    </>
   );
 }

src/components/CreateListModal/styles.ts

@@ -15,21 +15,20 @@ export const Container = styled.div`
   background-color: #101418;
   border-radius: 15px;
   padding: 12px;
+
+  h1 {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-weight: 500;
+  }
 `;
 
 export const Form = styled.form`
   display: flex;
-  gap: 10px;
+  justify-content: center;
+  gap: 20px;
   margin-bottom: 2rem;
-
-  label {
-    color: #fff;
-  }
-
-  input {
-    width: 100%;
-    color: #fff;
-  }
+  width: 100%;
 `;
 
 export const GameList = styled.div`
@@ -43,3 +42,39 @@ export const GameList = styled.div`
   margin-bottom: 20px;
   overflow: auto;
 `;
+
+export const Input = styled.input`
+  width: 50%;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: #f5f5f5;
+  outline: 2px solid ;
+  border-radius: 4px;
+  padding: 12px;
+  outline: 2px solid #1F2937;
+
+  &:focus {
+    outline: 2px solid #1D4ED8;
+  }
+`;
+
+export const Button = styled.button`
+  background-color: #1D4ED8;
+  padding: 14px 20px;
+  color: #f5f5f5;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-transform: uppercase;
+
+  &:not(:disabled):hover {
+    background-color: #2563EB;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+`;