Skip to content

Commit

Permalink
chore: the input was replaced by a select in language
Browse files Browse the repository at this point in the history
  • Loading branch information
@Franqsanz
Franqsanz committed Sep 18, 2023
1 parent d72bb8f commit c0c42aa
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 43 deletions.
84 changes: 42 additions & 42 deletions src/components/forms/NewBook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import 'cropperjs/dist/cropper.css';
import { AiOutlineCloudUpload } from 'react-icons/ai';
import { BiImageAdd } from 'react-icons/bi';

import { categories, format } from '../../data/links';
import { categories, format, languages } from '../../data/links';
import { BookType } from '../types';
import { useMutatePost } from '../../hooks/querys';
import { ModalCropper } from '../forms/ModalCropper';
Expand All @@ -32,6 +32,10 @@ import { MyPopover } from '../MyPopover';

const Cropper = lazy(() => import('react-cropper'));

function sortArrayByLabel<T extends { label: string }>(array: T[]): T[] {
return array.slice().sort((a, b) => a.label.localeCompare(b.label));
}

export function FormNewBook() {
const {
handleSubmit,
Expand Down Expand Up @@ -74,11 +78,9 @@ export function FormNewBook() {

const disabled = !allFieldsBook(books);

const sortedCategories = categories.sort((a, b) => {
if (a.label < b.label) return -1;
if (a.label > b.label) return 1;
return 0;
});
const sortedCategories = sortArrayByLabel(categories);
const sortedLanguage = sortArrayByLabel(languages);
const sortedFormat = sortArrayByLabel(format);

function handleChange(
e: React.ChangeEvent<
Expand Down Expand Up @@ -121,6 +123,10 @@ export function FormNewBook() {
setBooks((books) => ({ ...books, format }));
}

function handleLanguageChange(language) {
setBooks((books) => ({ ...books, language }));
}

const fileInputRef = useRef<HTMLInputElement>(null);

function handleButtonClick() {
Expand Down Expand Up @@ -161,9 +167,7 @@ export function FormNewBook() {
}
}

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

Expand Down Expand Up @@ -338,12 +342,9 @@ export function FormNewBook() {
<FormErrorMessage>{errors.synopsis.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormControl isRequired>
<FormLabel htmlFor='sinopsis' mt='2'>
Subir Imagen{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
Subir Imagen
</FormLabel>
<Button
w='100%'
Expand Down Expand Up @@ -425,7 +426,7 @@ export function FormNewBook() {
})}
id='link'
type='text'
mb='5'
mb={{ base: 0, md: 5 }}
bg={bgColorInput}
size={{ base: 'md', md: 'lg' }}
name='sourceLink'
Expand All @@ -435,37 +436,34 @@ export function FormNewBook() {
_focus={{ bg: 'transparent' }}
/>
{errors.sourceLink && (
<FormErrorMessage>
<FormErrorMessage mb={{ base: 5, md: 0 }}>
{errors.sourceLink.message}
</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.language}>
<FormLabel htmlFor='language'>
<FormControl>
<FormLabel htmlFor='language' mt={{ base: 5, md: 0 }}>
Idioma{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<Input
{...register('language', {
required: 'Idioma es obligatorio',
})}
id='language'
type='text'
mb='5'
bg={bgColorInput}
size={{ base: 'md', md: 'lg' }}
<Select
id='lenguaje'
name='language'
value={books.language}
onChange={handleChange}
_focus={{ bg: 'transparent' }}
size={{ base: 'md', md: 'lg' }}
variant='filled'
onChange={(selectedOption) =>
handleLanguageChange(selectedOption?.value)
}
options={sortedLanguage}
noOptionsMessage={({ inputValue }) =>
`Esta opción "${inputValue}" no existe`
}
placeholder='Seleccione un Idioma'
/>
{errors.language && (
<FormErrorMessage>{errors.language.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.numberPages}>
<FormControl isInvalid={!!errors.numberPages} mt='5'>
<FormLabel htmlFor='numeroPaginas'>
Número de páginas{' '}
<Box display='inline' fontSize='sx' color='red.400'>
Expand All @@ -482,7 +480,7 @@ export function FormNewBook() {
})}
id='numeroPaginas'
type='number'
mb='5'
mb={{ base: 0, md: 5 }}
bg={bgColorInput}
size={{ base: 'md', md: 'lg' }}
name='numberPages'
Expand All @@ -491,13 +489,13 @@ export function FormNewBook() {
_focus={{ bg: 'transparent' }}
/>
{errors.numberPages && (
<FormErrorMessage>
<FormErrorMessage mb={{ base: 5, md: 0 }}>
{errors.numberPages.message}
</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.year}>
<FormLabel htmlFor='año' mt={{ base: 0, md: '17.5' }}>
<FormLabel htmlFor='año' mt={{ base: 5, md: 0 }}>
Año{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
Expand All @@ -516,7 +514,7 @@ export function FormNewBook() {
})}
id='año'
type='number'
mb={{ base: 5, md: 0 }}
mb={{ base: 0, md: 5 }}
bg={bgColorInput}
size={{ base: 'md', md: 'lg' }}
name='year'
Expand All @@ -525,18 +523,20 @@ export function FormNewBook() {
_focus={{ bg: 'transparent' }}
/>
{errors.year && (
<FormErrorMessage>{errors.year.message}</FormErrorMessage>
<FormErrorMessage mb={{ base: 5, md: 0 }}>
{errors.year.message}
</FormErrorMessage>
)}
</FormControl>
<FormControl mt={{ base: 0, md: 8 }}>
<FormControl mt={{ base: 5, md: 8 }}>
<Flex align='center' justify='space-between' mb='9px'>
<FormLabel htmlFor='categoria' m='0'>
Categoria{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<MyPopover textBody='Puedes añadir una categoria o varias' />
<MyPopover textBody='Puedes añadir una categoría o varias' />
</Flex>
<Select
isMulti
Expand All @@ -551,7 +551,7 @@ export function FormNewBook() {
noOptionsMessage={({ inputValue }) =>
`Esta opción "${inputValue}" no existe`
}
placeholder='Seleccione una categoria'
placeholder='Seleccione una categoría'
/>
</FormControl>
<FormControl isInvalid={!!errors.format} mt={{ base: 5, md: 8 }}>
Expand All @@ -569,7 +569,7 @@ export function FormNewBook() {
onChange={(selectedOption) =>
handleFormatChange(selectedOption?.value)
}
options={format}
options={sortedFormat}
noOptionsMessage={({ inputValue }) =>
`Esta opción "${inputValue}" no existe`
}
Expand Down
55 changes: 54 additions & 1 deletion src/data/links.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,59 @@ const accountLinks: Array<LinkType> = [
},
];

const languages: Array<SelectBooksType> = [
{ value: 'Español', label: 'Español' },
{ value: 'Inglés', label: 'Inglés' },
{ value: 'Francés', label: 'Francés' },
{ value: 'Alemán', label: 'Alemán' },
{ value: 'Italiano', label: 'Italiano' },
{ value: 'Portugués', label: 'Portugués' },
{ value: 'Holandés', label: 'Holandés' },
{ value: 'Sueco', label: 'Sueco' },
{ value: 'Noruego', label: 'Noruego' },
{ value: 'Danés', label: 'Danés' },
{ value: 'Finés', label: 'Finés' },
{ value: 'Ruso', label: 'Ruso' },
{ value: 'Polaco', label: 'Polaco' },
{ value: 'Checo', label: 'Checo' },
{ value: 'Húngaro', label: 'Húngaro' },
{ value: 'Griego', label: 'Griego' },
{ value: 'Turco', label: 'Turco' },
{ value: 'Árabe', label: 'Árabe' },
{ value: 'Hebreo', label: 'Hebreo' },
{ value: 'Hindi', label: 'Hindi' },
{ value: 'Chino (Mandarín)', label: 'Chino (Mandarín)' },
{ value: 'Japonés', label: 'Japonés' },
{ value: 'Coreano', label: 'Coreano' },
{ value: 'Vietnamita', label: 'Vietnamita' },
{ value: 'Tailandés', label: 'Tailandés' },
{ value: 'Malayo', label: 'Malayo' },
{ value: 'Indonesio', label: 'Indonesio' },
{ value: 'Tagalo', label: 'Tagalo' },
{ value: 'Swahili', label: 'Swahili' },
{ value: 'Amárico', label: 'Amárico' },
{ value: 'Bengalí', label: 'Bengalí' },
{ value: 'Punjabi', label: 'Punjabi' },
{ value: 'Tamil', label: 'Tamil' },
{ value: 'Telugu', label: 'Telugu' },
{ value: 'Kannada', label: 'Kannada' },
{ value: 'Marathi', label: 'Marathi' },
{ value: 'Gujarati', label: 'Gujarati' },
{ value: 'Urdu', label: 'Urdu' },
{ value: 'Persa (Farsi)', label: 'Persa (Farsi)' },
{ value: 'Ucraniano', label: 'Ucraniano' },
{ value: 'Rumano', label: 'Rumano' },
{ value: 'Búlgaro', label: 'Búlgaro' },
{ value: 'Serbio', label: 'Serbio' },
{ value: 'Croata', label: 'Croata' },
{ value: 'Esloveno', label: 'Esloveno' },
{ value: 'Eslovaco', label: 'Eslovaco' },
{ value: 'Lituano', label: 'Lituano' },
{ value: 'Letón', label: 'Letón' },
{ value: 'Estonio', label: 'Estonio' },
{ value: 'Islandés', label: 'Islandés' },
];

const categories: Array<SelectBooksType> = [
{
value: 'Aventura',
Expand Down Expand Up @@ -211,4 +264,4 @@ const format: Array<SelectBooksType> = [
},
];

export { navLink, accountLinks, categories, format };
export { navLink, accountLinks, languages, categories, format };

1 comment on commit c0c42aa

@vercel
Copy link

@vercel vercel bot commented on c0c42aa Sep 18, 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-franqsanz.vercel.app
xbu.vercel.app
xbu-git-main-franqsanz.vercel.app

Please sign in to comment.