feat: the number of book views are now displayed

Franqsanz · Aug 26, 2024 · 62f55d9 · 62f55d9
1 parent ad3c756
commit 62f55d9
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 5 deletions.
diff --git a/src/components/cards/Card.tsx b/src/components/cards/Card.tsx
@@ -15,6 +15,7 @@ import { IoLanguageOutline } from 'react-icons/io5';
 
 import { CardType } from '@components/types';
 import { MyTag } from '@components/ui/MyTag';
+import { Views } from '@components/ui/Views';
 import { handleImageLoad, useHandleEnterKey, isSpanish } from '@utils/utils';
 
 export function Card({
@@ -24,6 +25,7 @@ export function Card({
   authors,
   category,
   pathUrl,
+  views,
 }: CardType) {
   const handleEnterKey = useHandleEnterKey(pathUrl);
   const colorAuthorCard = useColorModeValue('gray.600', 'gray.300');
@@ -142,6 +144,16 @@ export function Card({
                   {index < authors.length - 1 && ', '}
                 </Box>
               ))}
+              {views !== undefined && (
+                <Views
+                  align='center'
+                  mt='2'
+                  px='7'
+                  fontSize={{ base: '0.55rem', sm: 'xs' }}
+                  color={colorAuthorCard}
+                  views={views}
+                />
+              )}
             </Flex>
           </Flex>
         </LinkOverlay>

diff --git a/src/components/types.d.ts b/src/components/types.d.ts
@@ -40,6 +40,7 @@ interface CardType {
     url: string;
     public_id: string;
   };
+  views?: number;
 }
 
 interface TitleType {

diff --git a/src/components/ui/Views.tsx b/src/components/ui/Views.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Flex, Icon } from '@chakra-ui/react';
+import { ImEye } from 'react-icons/im';
+
+export function Views({ views, ...props }: any) {
+  return (
+    <>
+      <Flex {...props}>
+        <Icon as={ImEye} boxSize='5' mr='2' />
+        {views}
+      </Flex>
+    </>
+  );
+}
diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
@@ -181,7 +181,7 @@ function useMoreBooksAuthors(id: string | undefined) {
 
 function useBook(pathUrl: string | undefined, token?: string | null) {
   return useSuspenseQuery({
-    queryKey: [keys.one, pathUrl],
+    queryKey: [keys.one, pathUrl, token],
     queryFn: () => getBook(pathUrl, token),
     refetchOnWindowFocus: false,
     gcTime: 3000,

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -22,6 +22,7 @@ import {
 } from 'react-icons/fi';
 import { BsTag } from 'react-icons/bs';
 import { FaCheckCircle } from 'react-icons/fa';
+import { ImEye } from 'react-icons/im';
 import LazyLoad from 'react-lazy-load';
 import Atropos from 'atropos/react';
 import 'atropos/css';
@@ -32,6 +33,7 @@ import { MainHead } from '@components/layout/Head';
 import { MyTag } from '@components/ui/MyTag';
 import { ModalShare } from '@components/modals/ModalShare';
 import { MyLink } from '@components/ui/MyLink';
+import { Views } from '@components/ui/Views';
 import { BooksSection } from '@components/BooksSection';
 import { ImageZoom } from '@components/ui/ImageZoom';
 import { ModalOptions } from '@components/modals/ModalOptions';
@@ -239,7 +241,7 @@ export default function Book() {
           as='figure'
           display={{ base: 'block', lg: 'none' }}
           m='auto'
-          pb='4'
+          pb='16'
           zIndex='0'
         >
           <LazyLoad width={230} height={340} offset={0} threshold={0.99}>
@@ -257,6 +259,16 @@ export default function Book() {
               onLoad={handleImageLoad}
             />
           </LazyLoad>
+          <Views
+            justify='center'
+            align='stretch'
+            mt='6'
+            left='0'
+            right='0'
+            position='absolute'
+            fontSize='sm'
+            views={data.views}
+          />
         </Box>
         <Flex
           w='full'
@@ -475,11 +487,22 @@ export default function Book() {
               decoding='async'
               filter='blur(10px)'
             />
+            <Views
+              justify='center'
+              align='stretch'
+              mt='6'
+              left='0'
+              right='0'
+              position='absolute'
+              fontSize='sm'
+              views={data.views}
+            />
             <Box
+              w='290px'
               h='650px'
               overflowX='hidden'
               mt='14'
-              p='0 1.25rem 0 1.25rem'
+              p='0 1.25rem 0 0.90rem'
               border='1px'
               borderColor={grayColor}
               boxShadow='xl'

diff --git a/src/pages/MostViewed.tsx b/src/pages/MostViewed.tsx
@@ -32,6 +32,7 @@ export default function MostViewed() {
               authors,
               pathUrl,
               image,
+              views,
             }: CardType) => (
               <>
                 <Card
@@ -42,6 +43,7 @@ export default function MostViewed() {
                   language={language}
                   pathUrl={pathUrl}
                   image={image}
+                  views={views}
                 />
               </>
             ),

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -43,7 +43,7 @@ export function Profile() {
     isFetchingNextPage,
   } = useProfile(username, uid, getToken);
   const { data: userData, refetch } = useCheckUser(uid);
-  const createdAt = userData?.createdAt;
+  const createdAt = parseDate(userData?.createdAt);
   let asideAndCardsUI;
   let fetchingNextPageUI;
 
@@ -208,7 +208,7 @@ export function Profile() {
           <Box as='span' fontSize={{ base: 'sm', md: 'md' }} fontWeight='bold'>
             Se unió el
           </Box>{' '}
-          {parseDate(createdAt)}
+          {createdAt}
         </Flex>
       </Flex>
       <Flex justify='center' borderBottom='1px solid #A0AEC0'>