From 230756db0b110e4cbc2073c6a71709cd376c8c5a Mon Sep 17 00:00:00 2001
From: amalv <1252707+amalv@users.noreply.github.com>
Date: Thu, 21 Dec 2023 16:41:43 +0100
Subject: [PATCH] feat: update BookList component to limit number of books
 displayed

---
 src/components/BookList/BookList.tsx          |  2 +-
 .../BookList/components/Books/Books.tsx       | 13 ++++++------
 src/data/books.ts                             | 21 +++++++++++--------
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/BookList/BookList.tsx b/src/components/BookList/BookList.tsx
index 3dfed24..d8879f6 100644
--- 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
index 044fc61..1f89ad9 100644
--- 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,9 +23,9 @@ 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) {
@@ -32,6 +33,8 @@ export const Books = ({ title }: BooksProps) => {
     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} />
@@ -39,10 +42,8 @@ export const Books = ({ title }: BooksProps) => {
         <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
index 0d43981..40e8470 100644
--- 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
+      }
     }
   }
 `;