feat: added the option to rate the books

Franqsanz · Sep 5, 2024 · 56f1d96 · 56f1d96
1 parent 95d7cf7
commit 56f1d96
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.13.0",
     "@emotion/styled": "11.13.0",
+    "@smastrom/react-rating": "1.5.0",
     "@tanstack/react-query": "5.51.11",
     "@tanstack/react-query-devtools": "5.51.11",
     "atropos": "2.0.2",

diff --git a/src/components/forms/FormEdit.tsx b/src/components/forms/FormEdit.tsx
@@ -39,6 +39,7 @@ import {
 } from '@components/forms/utils/utilsForm';
 import { useMyToast } from '@hooks/useMyToast';
 import { useGenerateSlug } from '@hooks/useGenerateSlug';
+import { Rating } from '@smastrom/react-rating';
 const Cropper = lazy(() => import('react-cropper'));
 
 export function FormEdit({
@@ -54,6 +55,7 @@ export function FormEdit({
   format,
   pathUrl,
   image,
+  rating,
 }: BookType) {
   const {
     handleSubmit,
@@ -87,7 +89,9 @@ export function FormEdit({
       url,
       public_id,
     },
+    rating,
   });
+
   const { mutate, isPending, isSuccess, error } = useUpdateBook(books);
   useGenerateSlug(books.title, setBooks); // Genera el pathUrl (Slug)
 
@@ -121,6 +125,13 @@ export function FormEdit({
     handleImage(e, setCropData, onOpen);
   }
 
+  function handleRatingChange(newRating: number) {
+    setBooks((books) => ({
+      ...books,
+      rating: newRating,
+    }));
+  }
+
   function getCropData() {
     getCrop(crop, setPreviewImg, books, setBooks, onClose);
   }
@@ -212,7 +223,7 @@ export function FormEdit({
   return (
     <>
       <Flex align='center' justify='center' direction='column'>
-        <Box w='full' maxWidth='800px'>
+        <Box w='full' maxWidth='930px'>
           <Flex
             as='form'
             onSubmit={handleSubmit(onSubmit)}
@@ -290,7 +301,7 @@ export function FormEdit({
                     required: 'Sinopsis es obligatorio',
                   })}
                   id='sinopsis'
-                  rows={12}
+                  rows={17}
                   mb='5'
                   bg={bgColorInput}
                   name='synopsis'
@@ -542,6 +553,21 @@ export function FormEdit({
                   placeholder='Elija un Formato'
                 />
               </FormControl>
+              <FormControl mt={{ base: 5, md: 8 }}>
+                <Flex align='center' mb='9px'>
+                  <FormLabel htmlFor='categoria' m='0'>
+                    Calificación{' '}
+                    <Box display='inline' fontSize='xs'>
+                      (Opcional)
+                    </Box>
+                  </FormLabel>
+                </Flex>
+                <Rating
+                  style={{ maxWidth: 190 }}
+                  value={books.rating}
+                  onChange={handleRatingChange}
+                />
+              </FormControl>
               <Box
                 // justify='space-evenly'
                 // direction='column'

diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
@@ -22,6 +22,7 @@ import { AiOutlineCloudUpload } from 'react-icons/ai';
 import { BiImageAdd } from 'react-icons/bi';
 import { FaCheckCircle } from 'react-icons/fa';
 import { IoWarningSharp } from 'react-icons/io5';
+import { Rating } from '@smastrom/react-rating';
 
 import { categories, formats, languages } from '../../constant/constants';
 import { BookType, MyChangeEvent } from '@components/types';
@@ -78,13 +79,14 @@ export function FormNewBook() {
       public_id: '',
     },
     userId: currentUser?.uid,
+    rating: 0,
   });
   useGenerateSlug(books.title, setBooks); // Genera el pathUrl (Slug)
 
   function allFieldsBook(book: BookType): boolean {
     return (
       Object.entries(book)
-        .filter(([key]) => key !== 'sourceLink')
+        .filter(([key]) => key !== 'sourceLink' && key !== 'rating')
         .every(([, value]) => value) && book.category.length > 0
     );
   }
@@ -111,6 +113,13 @@ export function FormNewBook() {
     handleImage(e, setCropData, onOpen);
   }
 
+  function handleRatingChange(newRating: number) {
+    setBooks((books) => ({
+      ...books,
+      rating: newRating,
+    }));
+  }
+
   function getCropData() {
     getCrop(crop, setPreviewImg, books, setBooks, onClose);
   }
@@ -209,7 +218,7 @@ export function FormNewBook() {
           p={{ base: 5, md: 10 }}
           rounded='lg'
           border='1px'
-          maxWidth='900px'
+          maxWidth='1000px'
         >
           <Box mb='5' fontSize='md'>
             Los campos con el{' '}
@@ -294,7 +303,7 @@ export function FormNewBook() {
                     required: 'Sinopsis es obligatorio',
                   })}
                   id='sinopsis'
-                  rows={12}
+                  rows={17}
                   mb='5'
                   bg={bgColorInput}
                   name='synopsis'
@@ -542,6 +551,21 @@ export function FormNewBook() {
                   placeholder='Elija un Formato'
                 />
               </FormControl>
+              <FormControl mt={{ base: 5, md: 8 }}>
+                <Flex align='center' mb='9px'>
+                  <FormLabel htmlFor='categoria' m='0'>
+                    Calificación{' '}
+                    <Box display='inline' fontSize='xs'>
+                      (Opcional)
+                    </Box>
+                  </FormLabel>
+                </Flex>
+                <Rating
+                  style={{ maxWidth: 190 }}
+                  value={books.rating}
+                  onChange={handleRatingChange}
+                />
+              </FormControl>
               <Box mt={{ base: 10, md: '22rem' }}>
                 <Button
                   type='submit'

diff --git a/src/components/forms/utils/utilsForm.ts b/src/components/forms/utils/utilsForm.ts
@@ -1,8 +1,9 @@
 import React, { useRef } from 'react';
 import pako from 'pako';
+import { MyChangeEvent } from '@components/types';
 
 function handleInputChange(
-  e,
+  e: MyChangeEvent,
   books,
   setBooks: React.Dispatch<React.SetStateAction<any>>,
 ) {
@@ -15,6 +16,13 @@ function handleInputChange(
       ...books,
       [name]: authorNames, // Guardamos un array de nombres de autores
     });
+  } else if (name === 'rating') {
+    const rating = parseFloat(value);
+
+    setBooks({
+      ...books,
+      [name]: rating,
+    });
   } else {
     setBooks({
       ...books,

diff --git a/src/components/modals/ModalForm.tsx b/src/components/modals/ModalForm.tsx
@@ -26,6 +26,7 @@ export function ModalForm({
   year,
   category,
   format,
+  rating,
 }: ModalOptionsAndConfirType) {
   const bgColorBox = useColorModeValue('white', 'gray.900');
 
@@ -40,7 +41,7 @@ export function ModalForm({
         isOpen={isOpen}
         onClose={onClose}
         closeOnOverlayClick={false}
-        size={{ base: 'xs', lg: '4xl', md: '2xl' }}
+        size={{ base: 'xs', lg: '5xl', md: '2xl' }}
       >
         <ModalOverlay backdropFilter='blur(7px)' />
         <ModalContent overflow='hidden'>
@@ -59,6 +60,7 @@ export function ModalForm({
               year={year || ''}
               category={category || []}
               format={format || ''}
+              rating={rating || 0}
             />
           </ModalBody>
         </ModalContent>

diff --git a/src/components/types.d.ts b/src/components/types.d.ts
@@ -82,6 +82,7 @@ interface BookType {
     public_id: string;
   };
   userId?: string | undefined;
+  rating: number;
 }
 
 interface ModalCropperType extends DisclosureType {
@@ -162,6 +163,7 @@ interface ModalOptionsAndConfirType extends Omit<Partial<BookType>>, DisclosureT
     url: string;
     public_id: string;
   };
+  rating?: number;
 }
 
 interface BooksSectionType {

diff --git a/src/main.tsx b/src/main.tsx
@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import * as Sentry from '@sentry/react';
 import { HelmetProvider } from 'react-helmet-async';
+import '@smastrom/react-rating/style.css';
 
 import theme from '../theme';
 import { routes } from './routes';

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -299,6 +299,7 @@ export default function Book() {
           url: bookObject.image.url,
           public_id: bookObject.image.public_id,
         }}
+        rating={bookObject.rating}
         onClose={onCloseEdit}
       />
       <Flex