feat: update BookList component to limit number of books displayed

amalv · Dec 21, 2023 · 230756d · 230756d
1 parent 6c0a6f9
commit 230756d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/components/BookList/BookList.tsx b/src/components/BookList/BookList.tsx
@@ -61,7 +61,7 @@ export const BookList = () => {
   return (
     <Root>
       <SearchInput search={search} setSearch={setSearch} />
-      <Books title={debouncedSearch} />
+      <Books title={debouncedSearch} limit={50} />
     </Root>
   );
 };
diff --git a/src/components/BookList/components/Books/Books.tsx b/src/components/BookList/components/Books/Books.tsx
@@ -7,6 +7,7 @@ import { BookCard } from "./components";
 
 interface BooksProps {
   title: string;
+  limit: number;
 }
 
 const Message = ({ text }: { text: string }) => (
@@ -22,27 +23,27 @@ const Message = ({ text }: { text: string }) => (
   </Grid>
 );
 
-export const Books = ({ title }: BooksProps) => {
+export const Books = ({ title, limit }: BooksProps) => {
   const { loading, error, data } = useQuery(BOOKS_QUERY, {
-    variables: { title },
+    variables: { title, limit },
   });
 
   if (error) {
     console.error("Failed to fetch books:", error);
     return <p>Error occurred while fetching books.</p>;
   }
 
+  const books = data?.books?.books || [];
+
   return (
     <Grid container spacing={2}>
       <Grid item xs={1} sm={1} md={2} />
       <Grid item xs={10} sm={10} md={8}>
         <Grid container spacing={2}>
           {loading ? (
             <Message text="Loading..." />
-          ) : data.books.length > 0 ? (
-            data.books.map((book: Book) => (
-              <BookCard key={book.title} book={book} />
-            ))
+          ) : books.length > 0 ? (
+            books.map((book: Book) => <BookCard key={book.title} book={book} />)
           ) : (
             <Message text="No books available" />
           )}

diff --git a/src/data/books.ts b/src/data/books.ts
@@ -11,15 +11,18 @@ export type Book = {
 };
 
 export const BOOKS_QUERY = gql`
-  query GetBooks($title: String) {
-    books(title: $title) {
-      id
-      title
-      author
-      publicationDate
-      image
-      rating
-      ratingsCount
+  query GetBooks($title: String, $cursor: String, $limit: Int) {
+    books(title: $title, cursor: $cursor, limit: $limit) {
+      cursor
+      books {
+        id
+        title
+        author
+        publicationDate
+        image
+        rating
+        ratingsCount
+      }
     }
   }
 `;