diff --git a/src/components/cards/Card.tsx b/src/components/cards/Card.tsx index 308d22b..0a7ced1 100644 --- 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 && ', '} ))} + {views !== undefined && ( + + )} diff --git a/src/components/types.d.ts b/src/components/types.d.ts index 6ba71b4..be42cd4 100644 --- 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 new file mode 100644 index 0000000..9762aea --- /dev/null +++ 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 ( + <> + + + {views} + + + ); +} diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts index a6a1fa2..f6d9a4f 100644 --- 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 index 14f2b14..fb8c71e 100644 --- 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' > @@ -257,6 +259,16 @@ export default function Book() { onLoad={handleImageLoad} /> + + ( <> ), diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx index 1fb6129..2483c46 100644 --- 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() { Se uniĆ³ el {' '} - {parseDate(createdAt)} + {createdAt}