Skip to content

Commit

Permalink
chore: updated the author input to receive multiple authors separated…
Browse files Browse the repository at this point in the history 
… by commas
  • Loading branch information
@Franqsanz
Franqsanz committed Sep 22, 2023
1 parent 0b06774 commit c5638ef
Show file tree
Hide file tree
Showing 10 changed files with 103 additions and 71 deletions.
4 changes: 2 additions & 2 deletions src/components/AllBooks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function AllBooks() {
title,
language,
synopsis,
author,
authors,
category,
sourceLink,
image,
Expand All @@ -111,7 +111,7 @@ export function AllBooks() {
category={category}
language={language}
title={title}
author={author}
authors={authors}
synopsis={synopsis}
sourceLink={sourceLink}
pathUrl={pathUrl}
Expand Down
4 changes: 2 additions & 2 deletions src/components/RelatedPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ export default function RelatedPost({ currentBookId }: ReleatedBooksType) {
<>
<Flex flexWrap={{ base: 'wrap', xl: 'nowrap' }} color={colorCard}>
{relatedBooks.map(
({ id, title, synopsis, author, category, pathUrl }: CardType) => (
({ id, title, synopsis, authors, category, pathUrl }: CardType) => (
<React.Fragment key={id}>
<RelatedCard
id={id}
category={category}
title={title}
author={author}
authors={authors}
synopsis={synopsis}
pathUrl={pathUrl}
refetchQueries={refetch}
Expand Down
22 changes: 13 additions & 9 deletions src/components/cards/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function Card({
title,
language,
image,
author,
authors,
category,
pathUrl,
}: CardType) {
Expand Down Expand Up @@ -125,14 +125,18 @@ export function Card({
>
{title}
</Box>
<Box
px='7'
fontSize={{ base: '0.55rem', sm: 'xs' }}
textTransform='uppercase'
color={colorAuthorCard}
>
{author}
</Box>
{authors.map((author, index) => (
<Box
key={index}
px='7'
fontSize={{ base: '0.55rem', sm: 'xs' }}
textTransform='uppercase'
color={colorAuthorCard}
>
{author}
{index < authors.length - 1 && ', '}
</Box>
))}
</Flex>
</Flex>
</LinkOverlay>
Expand Down
20 changes: 12 additions & 8 deletions src/components/cards/RelatedCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useHandleEnterKey } from '../../utils/utils';

export function RelatedCard({
title,
author,
authors,
pathUrl,
refetchQueries,
}: CardType) {
Expand Down Expand Up @@ -49,13 +49,17 @@ export function RelatedCard({
>
{title}
</Box>
<Box
textTransform='uppercase'
fontSize='sm'
color={colorAuthorCard}
>
{author}
</Box>
{authors.map((author, index) => (
<Box
key={index}
textTransform='uppercase'
fontSize='sm'
color={colorAuthorCard}
>
{author}
{index < authors.length - 1 && ', '}
</Box>
))}
</Box>
</Flex>
<Link
Expand Down
49 changes: 33 additions & 16 deletions src/components/forms/NewBook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function FormNewBook() {
const [crop, setCrop] = useState<any>('');
const [books, setBooks] = useState<BookType>({
title: '',
author: '',
authors: [],
synopsis: '',
year: '',
category: [],
Expand Down Expand Up @@ -87,10 +87,21 @@ export function FormNewBook() {
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>,
) {
setBooks({
...books,
[e.target.name]: e.currentTarget.value,
});
const { name, value } = e.target;

// Si el campo es 'author', dividimos los nombres por comas en un array
if (name === 'authors') {
const authorNames = value.split(',');
setBooks({
...books,
[name]: authorNames, // Guardamos un array de nombres de autores
});
} else {
setBooks({
...books,
[name]: value,
});
}
}

function handleCategoryChange(selectedOptions) {
Expand Down Expand Up @@ -292,29 +303,35 @@ export function FormNewBook() {
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.author}>
<FormLabel htmlFor='autor'>
Autor{' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<FormControl isInvalid={!!errors.authors}>
<Flex align='center' justify='space-between' mb='7px'>
<FormLabel htmlFor='autor'>
Autor(s){' '}
<Box display='inline' fontSize='sx' color='red.400'>
*
</Box>
</FormLabel>
<MyPopover
textBody='Aquí puedes ingresar el nombre de un autor/a o varios autores/as para un libro. Si son varios, asegúrate de separarlos por comas.'
textFooter='Por ejemplo: (ROSWITHA STARK,PETRA NEUMAYER)'
/>
</Flex>
<Input
{...register('author', {
{...register('authors', {
required: 'Autor es obligatorio',
})}
id='autor'
type='text'
mb='5'
bg={bgColorInput}
size={{ base: 'md', md: 'lg' }}
value={books.author}
value={books.authors}
name='author'
onChange={handleChange}
_focus={{ bg: 'transparent' }}
/>
{errors.author && (
<FormErrorMessage>{errors.author.message}</FormErrorMessage>
{errors.authors && (
<FormErrorMessage>{errors.authors.message}</FormErrorMessage>
)}
</FormControl>
<FormControl isInvalid={!!errors.synopsis}>
Expand Down
7 changes: 6 additions & 1 deletion src/components/forms/filters/InputSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,12 @@ export function InputSearch({
{highlightText(book.title, search.query)}
</Box>
<Box fontSize='xs'>
{highlightText(book.author, search.query)}
{book.authors.map((author, index) => (
<span key={index}>
{highlightText(author, search.query)}
{index < book.authors.length - 1 && ', '}
</span>
))}
</Box>
</Link>
</ListItem>
Expand Down
4 changes: 2 additions & 2 deletions src/components/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ interface CardType {
id?: string;
title: string;
synopsis?: string;
author: string;
authors: string[];
category: string[];
year?: number;
language?: number;
Expand Down Expand Up @@ -63,7 +63,7 @@ interface TagType {
interface BookType {
id?: string;
title: string;
author: string;
authors: string[];
synopsis: string;
year: string;
category: string[];
Expand Down
40 changes: 22 additions & 18 deletions src/pages/Book.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { BsTag } from 'react-icons/bs';
import LazyLoad from 'react-lazy-load';

import { useBook } from '../hooks/querys';
import { handleImageLoad, aboutAuthor } from '../utils/utils';
import { handleImageLoad } from '../utils/utils';
import { MainHead } from '../components/Head';
import { MyTag } from '../components/MyTag';
import { ModalShare } from '../components/ModalShare';
Expand All @@ -40,6 +40,8 @@ export default function Book() {

const { data } = useBook(pathUrl);

console.log(data.authors);

function handleGoBack() {
navigate(-1);
}
Expand Down Expand Up @@ -177,17 +179,15 @@ export default function Book() {
fontSize={{ base: 'md', md: 'xl' }}
textTransform='uppercase'
>
<Link
as={NavLink}
isExternal
to={aboutAuthor(data.author)}
textDecoration='underline'
_hover={{
textDecoration: 'none',
}}
>
{data.author}
</Link>
{data.authors.map((author, index) => (
<MyLink
external={true}
key={index}
href={`https://www.google.com/search?q=${author}+escritor`}
data={author}
index={index !== data.authors.length - 1 && ' & '}
/>
))}
</Box>
<Box mt='5'>
<Box p='2' fontSize='lg' bg={grayColor} roundedTop='lg'>
Expand All @@ -205,15 +205,19 @@ export default function Book() {
<Box>
<Flex>
<Box minW='160px'>
<Box as='span'>Autor:</Box>
<Box as='span'>Autor(s):</Box>
</Box>
<Box>
<Box as='span'>
<MyLink
external={true}
href={aboutAuthor(data.author)}
data={data.author}
/>
{data.authors.map((author, index) => (
<MyLink
external={true}
key={index}
href={`https://www.google.com/search?q=${author}+escritor`}
data={author}
index={index !== data.authors.length - 1 && ' & '}
/>
))}
</Box>
</Box>
</Flex>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export default function Search() {
id,
title,
synopsis,
author,
authors,
category,
language,
sourceLink,
Expand All @@ -218,7 +218,7 @@ export default function Search() {
category={category}
language={language}
title={title}
author={author}
authors={authors}
synopsis={synopsis}
sourceLink={sourceLink}
pathUrl={pathUrl}
Expand Down
20 changes: 9 additions & 11 deletions src/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,14 @@ function generatePathUrl(name: string) {
return `${dashedName}-${randomId}`;
}

function aboutAuthor(authorName: string) {
return `https://www.google.com/search?q=${authorName}+escritor`;
}
// function aboutAuthors(authorNames: string[]) {
// const authorLinks = authorNames.map((authorName) => {
// const encodedAuthorName = encodeURIComponent(authorName);
// return `https://www.google.com/search?q=${encodedAuthorName}+escritor`;
// });

// return authorLinks;
// }

// Funcion para verificar si se encuentra en otro idioma que no sea español
function isSpanish(language) {
Expand All @@ -54,11 +59,4 @@ function isSpanish(language) {
return spanishLanguage.includes(lowerCaseLanguage);
}

export {
keys,
handleImageLoad,
useHandleEnterKey,
generatePathUrl,
aboutAuthor,
isSpanish,
};
export { keys, handleImageLoad, useHandleEnterKey, generatePathUrl, isSpanish };

1 comment on commit c5638ef

@vercel
Copy link

@vercel vercel bot commented on c5638ef Sep 22, 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.