feat: created a new view to see the most viewed books

src/components/MostViewed.tsx

@@ -5,7 +5,7 @@ import { Box, Flex, Link } from '@chakra-ui/react';
 import { useMostViewedBooks } from '@hooks/querys';
 
 export function MostViewed() {
-  const { data } = useMostViewedBooks();
+  const { data } = useMostViewedBooks('summary');
 
   return (
     <>

src/data/links.ts

@@ -1,12 +1,14 @@
 import { GrHome } from 'react-icons/gr';
 import { MdOutlineExplore } from 'react-icons/md';
+import { ImEyePlus } from 'react-icons/im';
 import { RiAccountCircleLine, RiLoginCircleLine } from 'react-icons/ri';
 
 import { AboutType, LinkType, SelectBooksType } from '../components/types';
 
 const navLink: Array<LinkType> = [
   { name: 'Inicio', href: '/', icon: GrHome },
   { name: 'Explorar', href: 'explore', icon: MdOutlineExplore },
+  { name: 'Más Vistos', href: 'most-viewed', icon: ImEyePlus },
 ];
 
 const accountLinks: Array<LinkType> = [

src/hooks/querys.ts

@@ -128,10 +128,10 @@ function useMoreBooks() {
   });
 }
 
-function useMostViewedBooks() {
+function useMostViewedBooks(query) {
   return useSuspenseQuery({
-    queryKey: [keys.mostViewed],
-    queryFn: getMostViewedBooks,
+    queryKey: [keys.mostViewed, query],
+    queryFn: () => getMostViewedBooks(query),
     refetchOnWindowFocus: false,
     gcTime: 3000,
     staleTime: 50000,

src/pages/MostViewed.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { MainHead } from '@components/Head';
+import { ContainerTitle } from '@components/ContainerTitle';
+import { MySimpleGrid } from '@components/MySimpleGrid';
+import { Card } from '@components/cards/Card';
+import { CardType } from '@components/types';
+import { useMostViewedBooks } from '@hooks/querys';
+
+export default function MostViewed() {
+  const { data } = useMostViewedBooks('full');
+
+  return (
+    <>
+      <MainHead title={`Top 10 Más Vistos | XBuniverse`} />
+      <ContainerTitle title='Top 10 Más Vistos' />
+      <MySimpleGrid>
+        {data?.map(
+          ({
+            id,
+            category,
+            title,
+            language,
+            authors,
+            pathUrl,
+            image,
+          }: CardType) => (
+            <>
+              <Card
+                id={id}
+                category={category}
+                title={title}
+                authors={authors}
+                language={language}
+                pathUrl={pathUrl}
+                image={image}
+              />
+            </>
+          ),
+        )}
+      </MySimpleGrid>
+    </>
+  );
+}

src/routes.tsx

@@ -16,6 +16,7 @@ import { Profile } from '@pages/profile/Profile';
 
 const PrivacyPolicies = lazy(() => import('@pages/PrivacyPolicies'));
 const Explore = lazy(() => import('@pages/Explore'));
+const MostViewed = lazy(() => import('@pages/MostViewed'));
 const Book = lazy(() => import('@pages/Book'));
 const Search = lazy(() => import('@pages/Search'));
 const NewBook = lazy(() => import('@pages/NewBook'));
@@ -35,6 +36,10 @@ export const routes = createBrowserRouter([
         path: '/explore',
         element: <Explore />,
       },
+      {
+        path: '/most-viewed',
+        element: <MostViewed />,
+      },
       {
         path: '/new-post',
         element: (

src/services/api.ts

@@ -36,8 +36,8 @@ async function getMoreBooks() {
   return await fetchData(`${API_URL}/books/more-books`);
 }
 
-async function getMostViewedBooks() {
-  return await fetchData(`${API_URL}/books/most-viewed-books`);
+async function getMostViewedBooks(query: string) {
+  return await fetchData(`${API_URL}/books/most-viewed-books?detail=${query}`);
 }
 
 async function getRelatedBooks(id: string | undefined) {
@@ -91,7 +91,7 @@ async function getUserAndBooks(
   page: number | undefined,
 ) {
   return await fetchData(
-    `${API_URL}/users/${username}/my-books/${userId}?limit=5&page=${page}`,
+    `${API_URL}/users/${username}/my-books/${userId}?limit=10&page=${page}`,
     {
       method: 'GET',
       headers: {