From c5638ef7667d8ee42516bf7cc1475fdab15a71b6 Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Fri, 22 Sep 2023 10:57:43 -0300
Subject: [PATCH] chore: updated the author input to receive multiple authors
 separated by commas

---
 src/components/AllBooks.tsx                  |  4 +-
 src/components/RelatedPost.tsx               |  4 +-
 src/components/cards/Card.tsx                | 22 +++++----
 src/components/cards/RelatedCard.tsx         | 20 ++++----
 src/components/forms/NewBook.tsx             | 49 +++++++++++++-------
 src/components/forms/filters/InputSearch.tsx |  7 ++-
 src/components/types.d.ts                    |  4 +-
 src/pages/Book.tsx                           | 40 +++++++++-------
 src/pages/Search.tsx                         |  4 +-
 src/utils/utils.ts                           | 20 ++++----
 10 files changed, 103 insertions(+), 71 deletions(-)

diff --git a/src/components/AllBooks.tsx b/src/components/AllBooks.tsx
index e991147..5d52b88 100644
--- a/src/components/AllBooks.tsx
+++ b/src/components/AllBooks.tsx
@@ -99,7 +99,7 @@ export function AllBooks() {
                   title,
                   language,
                   synopsis,
-                  author,
+                  authors,
                   category,
                   sourceLink,
                   image,
@@ -111,7 +111,7 @@ export function AllBooks() {
                       category={category}
                       language={language}
                       title={title}
-                      author={author}
+                      authors={authors}
                       synopsis={synopsis}
                       sourceLink={sourceLink}
                       pathUrl={pathUrl}
diff --git a/src/components/RelatedPost.tsx b/src/components/RelatedPost.tsx
index a03000e..5f3a075 100644
--- a/src/components/RelatedPost.tsx
+++ b/src/components/RelatedPost.tsx
@@ -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}
diff --git a/src/components/cards/Card.tsx b/src/components/cards/Card.tsx
index 54b8945..b5e41f6 100644
--- a/src/components/cards/Card.tsx
+++ b/src/components/cards/Card.tsx
@@ -25,7 +25,7 @@ export function Card({
   title,
   language,
   image,
-  author,
+  authors,
   category,
   pathUrl,
 }: CardType) {
@@ -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>
diff --git a/src/components/cards/RelatedCard.tsx b/src/components/cards/RelatedCard.tsx
index 72ad39a..580ee54 100644
--- a/src/components/cards/RelatedCard.tsx
+++ b/src/components/cards/RelatedCard.tsx
@@ -8,7 +8,7 @@ import { useHandleEnterKey } from '../../utils/utils';
 
 export function RelatedCard({
   title,
-  author,
+  authors,
   pathUrl,
   refetchQueries,
 }: CardType) {
@@ -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
diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
index 78c4c50..5ca0581 100644
--- a/src/components/forms/NewBook.tsx
+++ b/src/components/forms/NewBook.tsx
@@ -53,7 +53,7 @@ export function FormNewBook() {
   const [crop, setCrop] = useState<any>('');
   const [books, setBooks] = useState<BookType>({
     title: '',
-    author: '',
+    authors: [],
     synopsis: '',
     year: '',
     category: [],
@@ -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) {
@@ -292,15 +303,21 @@ 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'
@@ -308,13 +325,13 @@ export function FormNewBook() {
                   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}>
diff --git a/src/components/forms/filters/InputSearch.tsx b/src/components/forms/filters/InputSearch.tsx
index 5b84ceb..c0f0e9a 100644
--- a/src/components/forms/filters/InputSearch.tsx
+++ b/src/components/forms/filters/InputSearch.tsx
@@ -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>
diff --git a/src/components/types.d.ts b/src/components/types.d.ts
index c123e33..93d0e28 100644
--- a/src/components/types.d.ts
+++ b/src/components/types.d.ts
@@ -23,7 +23,7 @@ interface CardType {
   id?: string;
   title: string;
   synopsis?: string;
-  author: string;
+  authors: string[];
   category: string[];
   year?: number;
   language?: number;
@@ -63,7 +63,7 @@ interface TagType {
 interface BookType {
   id?: string;
   title: string;
-  author: string;
+  authors: string[];
   synopsis: string;
   year: string;
   category: string[];
diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
index 589c09e..dd618c2 100644
--- a/src/pages/Book.tsx
+++ b/src/pages/Book.tsx
@@ -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';
@@ -40,6 +40,8 @@ export default function Book() {
 
   const { data } = useBook(pathUrl);
 
+  console.log(data.authors);
+
   function handleGoBack() {
     navigate(-1);
   }
@@ -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'>
@@ -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>
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index c67f7c7..2adfdf6 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -205,7 +205,7 @@ export default function Search() {
                 id,
                 title,
                 synopsis,
-                author,
+                authors,
                 category,
                 language,
                 sourceLink,
@@ -218,7 +218,7 @@ export default function Search() {
                     category={category}
                     language={language}
                     title={title}
-                    author={author}
+                    authors={authors}
                     synopsis={synopsis}
                     sourceLink={sourceLink}
                     pathUrl={pathUrl}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ca5d8aa..c576625 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -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) {
@@ -54,11 +59,4 @@ function isSpanish(language) {
   return spanishLanguage.includes(lowerCaseLanguage);
 }
 
-export {
-  keys,
-  handleImageLoad,
-  useHandleEnterKey,
-  generatePathUrl,
-  aboutAuthor,
-  isSpanish,
-};
+export { keys, handleImageLoad, useHandleEnterKey, generatePathUrl, isSpanish };