changes 04/08/2021

package.json

@@ -10,13 +10,14 @@
     "coverage": "jest --coverage"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.4.1",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@chakra-ui/core": "^0.8.0",
+    "@chakra-ui/react": "^1.6.5",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
     "@hookform/resolvers": "^2.3.0",
     "axios": "^0.21.1",
     "faunadb": "^4.1.3",
-    "framer-motion": "^4",
+    "framer-motion": "^4.1.17",
     "multer": "^1.4.2",
     "next": "10.0.9",
     "next-connect": "^0.10.1",
@@ -32,6 +33,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.1.1",
     "@testing-library/user-event": "^13.1.1",
+    "@types/axios": "^0.14.0",
     "@types/jest": "^26.0.21",
     "@types/multer": "^1.4.5",
     "@types/node": "^14.14.35",

src/components/Card.tsx

@@ -6,6 +6,7 @@ import {
   Skeleton,
   SkeletonText,
 } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
 import { useState } from 'react';
 
 interface Card {
@@ -20,6 +21,7 @@ interface CardProps {
   viewImage: (url: string) => void;
 }
 
+
 export function Card({ data, viewImage }: CardProps): JSX.Element {
   const [isLoading, setIsLoading] = useState(true);
 

src/components/CardList.tsx

@@ -1,5 +1,5 @@
 import { SimpleGrid, useDisclosure } from '@chakra-ui/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Card } from './Card';
 import { ModalViewImage } from './Modal/ViewImage';
 
@@ -17,16 +17,40 @@ interface CardsProps {
 
 export function CardList({ cards }: CardsProps): JSX.Element {
   // TODO MODAL USEDISCLOSURE
-
+  const { isOpen, onOpen, onClose } = useDisclosure();
   // TODO SELECTED IMAGE URL STATE
+  const [urlState, setUrlState] = useState('')
 
   // TODO FUNCTION HANDLE VIEW IMAGE
+  const handleViewImage = (url: string) => {
+    setUrlState(url);
+    onOpen();
+  }
 
   return (
     <>
-      {/* TODO CARD GRID */}
-
-      {/* TODO MODALVIEWIMAGE */}
+      <ModalViewImage
+        isOpen={isOpen}
+        onClose={onClose}
+        imgUrl={urlState}
+      />
+      <SimpleGrid
+        columns={3}
+        spacing={10}
+      >
+        {
+          cards?.map(card => {
+            return (
+              <Card
+                key={card.id}
+                data={card}
+                viewImage={(url) => handleViewImage(url)}
+              />
+            )
+          })
+        }
+      </SimpleGrid>
     </>
   );
 }
+

src/components/Form/FormAddImage.tsx

@@ -1,11 +1,18 @@
 import { Box, Button, Stack, useToast } from '@chakra-ui/react';
-import { useForm } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 
 import { api } from '../../services/api';
 import { FileInput } from '../Input/FileInput';
 import { TextInput } from '../Input/TextInput';
+import { stringify } from 'querystring';
+
+type ImageFormData = {
+  title: string;
+  description: string;
+  url: string;
+}
 
 interface FormAddImageProps {
   closeModal: () => void;
@@ -19,22 +26,51 @@ export function FormAddImage({ closeModal }: FormAddImageProps): JSX.Element {
   const formValidations = {
     image: {
       // TODO REQUIRED, LESS THAN 10 MB AND ACCEPTED FORMATS VALIDATIONS
+      required: 'Arquivo Obrigatório',
+      validate: {
+        lessThanTen: v => parseInt(v[0].size) < 10000000 || 'O arquivo deve ser menor que 10MB',
+        acceptedFormats: v => /^[image/]+(png|jpeg|gif)$/.test(v[0].type) || 'Somente são aceitos arquivos PNG, JPEG e GIF'
+      }
     },
     title: {
       // TODO REQUIRED, MIN AND MAX LENGTH VALIDATIONS
+      required: 'Título Obrigatório',
+      minLength: {
+        value: 2,
+        message: 'Mínimo 2 caracteres'
+      },
+      maxLength: {
+        value: 20,
+        message: 'Máximo 20 caracteres'
+      }
     },
     description: {
       // TODO REQUIRED, MAX LENGTH VALIDATIONS
+      required: 'Descrição Obrigatória',
+      maxLength: {
+        value: 65,
+        message: 'Máximo 65 caracteres'
+      }
+
     },
   };
 
   const queryClient = useQueryClient();
-  const mutation = useMutation(
-    // TODO MUTATION API POST REQUEST,
+  const mutation = useMutation(async (image: ImageFormData) => {
+    // TODO MUTATION API POST,
+    const newImage = {
+      ...image,
+      url: imageUrl
+    }
+
+    await api.post('images', newImage);
+  },
     {
       // TODO ONSUCCESS MUTATION
-    }
-  );
+      onSuccess: () => {
+        queryClient.invalidateQueries('images')
+      }
+    });
 
   const {
     register,
@@ -46,41 +82,82 @@ export function FormAddImage({ closeModal }: FormAddImageProps): JSX.Element {
   } = useForm();
   const { errors } = formState;
 
-  const onSubmit = async (data: Record<string, unknown>): Promise<void> => {
+  //const onSubmit = async (data: Record<string, unknown>): Promise<void> => {
+  //const onSubmit = async (data: ImageFormData): Promise<void> => {
+  const onSubmit: SubmitHandler<ImageFormData> = async (values) => {
     try {
       // TODO SHOW ERROR TOAST IF IMAGE URL DOES NOT EXISTS
+      if (!imageUrl) {
+        toast({
+          title: 'Imagem não adicionada',
+          description: 'É preciso adicionar e aguardar o upload de uma imagem antes de realizar o cadastro.',
+          status: 'info',
+          duration: 5000,
+          isClosable: true,
+        });
+        return;
+      }
       // TODO EXECUTE ASYNC MUTATION
-      // TODO SHOW SUCCESS TOAST
+      await mutation.mutateAsync(values, {
+        // TODO SHOW SUCCESS TOAST
+        onSuccess: () => {
+          toast({
+            title: 'Imagem cadastrada',
+            description: 'Sua imagem foi cadastrada com sucesso.',
+            status: 'success',
+            duration: 5000,
+            isClosable: true,
+          });
+        }
+      })
     } catch {
       // TODO SHOW ERROR TOAST IF SUBMIT FAILED
+      toast({
+        title: 'Falha no cadastro',
+        description: 'Ocorreu um erro ao tentar cadastrar a sua imagem.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
     } finally {
       // TODO CLEAN FORM, STATES AND CLOSE MODAL
+      reset();
+      closeModal();
     }
   };
 
   return (
     <Box as="form" width="100%" onSubmit={handleSubmit(onSubmit)}>
       <Stack spacing={4}>
         <FileInput
+          name='image'
           setImageUrl={setImageUrl}
           localImageUrl={localImageUrl}
           setLocalImageUrl={setLocalImageUrl}
           setError={setError}
           trigger={trigger}
-          // TODO SEND IMAGE ERRORS
-          // TODO REGISTER IMAGE INPUT WITH VALIDATIONS
+          error={errors.image}
+          {...register('image', formValidations.image)}
+        // TODO SEND IMAGE ERRORS
+        // TODO REGISTER IMAGE INPUT WITH VALIDATIONS
         />
 
         <TextInput
+          name='title'
           placeholder="Título da imagem..."
-          // TODO SEND TITLE ERRORS
-          // TODO REGISTER TITLE INPUT WITH VALIDATIONS
+          error={errors.title}
+          {...register('title', formValidations.title)}
+        // TODO SEND TITLE ERRORS
+        // TODO REGISTER TITLE INPUT WITH VALIDATIONS
         />
 
         <TextInput
+          name='description'
           placeholder="Descrição da imagem..."
-          // TODO SEND DESCRIPTION ERRORS
-          // TODO REGISTER DESCRIPTION INPUT WITH VALIDATIONS
+          error={errors.description}
+          {...register('description', formValidations.description)}
+        // TODO SEND DESCRIPTION ERRORS
+        // TODO REGISTER DESCRIPTION INPUT WITH VALIDATIONS
         />
       </Stack>