Skip to content

Commit

Permalink
chore: validation (in test) on the form and other changes were applied
Browse files Browse the repository at this point in the history
  • Loading branch information
@Franqsanz
Franqsanz committed Sep 15, 2023
1 parent 5aee763 commit d72bb8f
Show file tree
Hide file tree
Showing 9 changed files with 27,776 additions and 13,552 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ dist
dist-ssr
*.local
html/*
cypress/screenshots
cypress/downloads

# Editor directories and files
.idea
Expand Down
41,120 changes: 27,607 additions & 13,513 deletions package-lock.json
View file

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"engines": {
"node": ">=16"
"node": ">=18"
},
"scripts": {
"dev": "vite",
Expand All @@ -26,6 +26,7 @@
"@tanstack/react-query": "4.29.19",
"@tanstack/react-query-devtools": "4.29.19",
"chakra-react-select": "4.6.0",
"firebase": "10.1.0",
"framer-motion": "10.12.17",
"million": "2.5.10",
"nanoid": "4.0.2",
Expand All @@ -34,11 +35,13 @@
"react-dom": "18.2.0",
"react-error-boundary": "4.0.10",
"react-helmet-async": "1.3.0",
"react-hook-form": "7.46.1",
"react-icons": "4.10.1",
"react-intersection-observer": "9.5.2",
"react-lazy-load": "4.0.1",
"react-router-dom": "6.14.0",
"react-share": "4.4.1"
"react-share": "4.4.1",
"zustand": "4.4.1"
},
"devDependencies": {
"@sentry/react": "7.57.0",
Expand All @@ -50,7 +53,7 @@
"@typescript-eslint/parser": "6.0.0",
"@vitejs/plugin-react": "4.0.1",
"@vitest/ui": "0.32.2",
"cypress": "12.16.0",
"cypress": "13.2.0",
"eslint": "8.44.0",
"eslint-config-prettier": "8.8.0",
"eslint-config-standard": "17.1.0",
Expand Down
160 changes: 131 additions & 29 deletions src/components/forms/NewBook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import {
useDisclosure,
Icon,
Skeleton,
// InputGroup,
// InputLeftAddon,
FormErrorMessage,
} from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { Select } from 'chakra-react-select';
import 'cropperjs/dist/cropper.css';
import { AiOutlineCloudUpload } from 'react-icons/ai';
Expand All @@ -33,6 +33,11 @@ import { MyPopover } from '../MyPopover';
const Cropper = lazy(() => import('react-cropper'));

export function FormNewBook() {
const {
handleSubmit,
register,
formState: { errors },
} = useForm<BookType>();
let alertMessage;
let previewImgUI;
const { isOpen, onOpen, onClose } = useDisclosure();
Expand Down Expand Up @@ -156,8 +161,9 @@ export function FormNewBook() {
}
}

function handleSubmit(e: React.ChangeEvent<HTMLInputElement>) {
e.preventDefault();
// function onSubmit(e: React.ChangeEvent<HTMLInputElement>) {
function onSubmit() {
// e.preventDefault();
mutate(books);
}

Expand Down Expand Up @@ -252,43 +258,73 @@ export function FormNewBook() {
</Box>
<Flex
as='form'
onSubmit={handleSubmit}
onSubmit={handleSubmit(onSubmit)}
justify='center'
align='stretch'
flexDirection={{ base: 'column', md: 'row' }}
>
<Box w='full' mr='5'>
<FormControl isRequired>
<FormLabel htmlFor='titulo'>Titulo</FormLabel>
<FormControl isInvalid={!!errors.title}>
<FormLabel htmlFor='titulo'>
Titulo{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Input
{...register('title', {
required: 'Titulo es obligatorio',
})}
id='titulo'
type='text'
mb='5'
bg={bgColorInput}
size={{ base: 'md', md: 'lg' }}
name='title'
value={books.title}
name='title'
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{errors.title && (
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isRequired>
<FormLabel htmlFor='autor'>Autor</FormLabel>
<FormControl isInvalid={!!errors.author}>
<FormLabel htmlFor='autor'>
Autor{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Input
{...register('author', {
required: 'Autor es obligatorio',
})}
id='autor'
type='text'
mb='5'
bg={bgColorInput}
size={{ base: 'md', md: 'lg' }}
name='author'
value={books.author}
name='author'
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{errors.author && (
<FormErrorMessage>{errors.author.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isRequired>
<FormLabel htmlFor='sinopsis'>Sinopsis</FormLabel>
<FormControl isInvalid={!!errors.synopsis}>
<FormLabel htmlFor='sinopsis'>
Sinopsis{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Textarea
{...register('synopsis', {
required: 'Sinopsis es obligatorio',
})}
id='sinopsis'
rows={12}
mb='5'
Expand All @@ -298,10 +334,16 @@ export function FormNewBook() {
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{errors.synopsis && (
<FormErrorMessage>{errors.synopsis.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isRequired>
<FormControl>
<FormLabel htmlFor='sinopsis' mt='2'>
Subir Imagen
Subir Imagen{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Button
w='100%'
Expand Down Expand Up @@ -361,7 +403,7 @@ export function FormNewBook() {
</Box>
</Box>
<Box w='full' ml={{ base: 0, md: 5 }}>
<FormControl>
<FormControl isInvalid={!!errors.sourceLink}>
<Flex align='center' justify='space-between' mb='7px'>
<FormLabel htmlFor='link' m='0'>
Enlace de la librería{' '}
Expand All @@ -374,9 +416,13 @@ export function FormNewBook() {
textFooter='https://www.buscalibre.com.ar/'
/>
</Flex>
{/* <InputGroup size='lg'> */}
{/* <InputLeftAddon children='https://' /> */}
<Input
{...register('sourceLink', {
pattern: {
value: /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i,
message: 'El enlace de la librería no es una URL válida',
},
})}
id='link'
type='text'
mb='5'
Expand All @@ -388,11 +434,23 @@ export function FormNewBook() {
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{/* </InputGroup> */}
{errors.sourceLink && (
<FormErrorMessage>
{errors.sourceLink.message}
</FormErrorMessage>
)}
</FormControl>
<FormControl isRequired>
<FormLabel htmlFor='language'>Idioma</FormLabel>
<FormControl isInvalid={!!errors.language}>
<FormLabel htmlFor='language'>
Idioma{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Input
{...register('language', {
required: 'Idioma es obligatorio',
})}
id='language'
type='text'
mb='5'
Expand All @@ -403,10 +461,25 @@ export function FormNewBook() {
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{errors.language && (
<FormErrorMessage>{errors.language.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isRequired>
<FormLabel htmlFor='numeroPaginas'>Número de páginas</FormLabel>
<FormControl isInvalid={!!errors.numberPages}>
<FormLabel htmlFor='numeroPaginas'>
Número de páginas{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Input
{...register('numberPages', {
required: 'Número de páginas es obligatorio',
min: {
value: 49,
message: 'Número de páginas debe tener un minimo de 49',
},
})}
id='numeroPaginas'
type='number'
mb='5'
Expand All @@ -417,12 +490,30 @@ export function FormNewBook() {
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{errors.numberPages && (
<FormErrorMessage>
{errors.numberPages.message}
</FormErrorMessage>
)}
</FormControl>
<FormControl isRequired>
<FormControl isInvalid={!!errors.year}>
<FormLabel htmlFor='año' mt={{ base: 0, md: '17.5' }}>
Año
Año{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Input
{...register('year', {
required: 'Año es obligatorio',
validate: {
value: (value) => {
return (
value.length === 4 || 'Año debe tener 4 caracteres'
);
},
},
})}
id='año'
type='number'
mb={{ base: 5, md: 0 }}
Expand All @@ -433,11 +524,17 @@ export function FormNewBook() {
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{errors.year && (
<FormErrorMessage>{errors.year.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isRequired mt={{ base: 0, md: 8 }}>
<FormControl mt={{ base: 0, md: 8 }}>
<Flex align='center' justify='space-between' mb='9px'>
<FormLabel htmlFor='categoria' m='0'>
Categoria
Categoria{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<MyPopover textBody='Puedes añadir una categoria o varias' />
</Flex>
Expand All @@ -457,8 +554,13 @@ export function FormNewBook() {
placeholder='Seleccione una categoria'
/>
</FormControl>
<FormControl isRequired mt={{ base: 5, md: 8 }}>
<FormLabel htmlFor='formato'>Formato</FormLabel>
<FormControl isInvalid={!!errors.format} mt={{ base: 5, md: 8 }}>
<FormLabel htmlFor='formato'>
Formato{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Select
id='formato'
name='format'
Expand Down
5 changes: 3 additions & 2 deletions src/components/skeletons/SkeletonDBook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,13 @@ export function SkeletonDetailsBook() {
>
<Skeleton w='140px' h='30px' rounded='lg' mb='4'></Skeleton>
<SkeletonText
w={{ base: '200px', lg: '400px' }}
w={{ base: '200px', lg: '600px' }}
mb='5'
noOfLines={2}
spacing='3'
skeletonHeight='6'
skeletonHeight='10'
/>
<Skeleton w='290px' h='20px' mb='5'></Skeleton>
<Skeleton h='40px' rounded='lg' mb='3'></Skeleton>
<SkeletonText mt='1' noOfLines={7} spacing='2' skeletonHeight='3' />
<SkeletonText mt='8' noOfLines={5} spacing='2' skeletonHeight='3' />
Expand Down
3 changes: 2 additions & 1 deletion src/components/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ interface CardType {
title: string;
synopsis?: string;
author: string;
category: string;
category: string[];
year?: number;
language?: number;
sourceLink?: string;
Expand All @@ -34,6 +34,7 @@ interface CardType {
refetchQueries?: () => any | unknown;
image?: {
url: string;
public_id: string;
};
}

Expand Down
21 changes: 21 additions & 0 deletions src/tests/components/AllBooks.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ChakraProvider } from '@chakra-ui/react';
import { test, expect } from 'vitest';

import theme from '../../../theme';
import { AllBooks } from '../../components/AllBooks';

const queryClient = new QueryClient();

test('Render AllBooks', () => {
render(
<QueryClientProvider client={queryClient}>
<ChakraProvider theme={theme}>
<AllBooks />
</ChakraProvider>
</QueryClientProvider>,
);
});
Loading

1 comment on commit d72bb8f

@vercel
Copy link

@vercel vercel bot commented on d72bb8f Sep 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

xbu – ./

xbu.vercel.app
xbu-franqsanz.vercel.app
xbu-git-main-franqsanz.vercel.app

Please sign in to comment.