refactor: restructure BookList component directory for better organiz…

…ation

src/components/BookList/BookList.tsx

@@ -5,15 +5,9 @@ import {
   useEffect,
   SetStateAction,
 } from "react";
-import { useQuery } from "@apollo/client";
 import { Box, Grid } from "@mui/material";
-import { BOOKS_QUERY, Book } from "../../data/books";
 import { Root, StyledTextField } from "./BookList.styles";
-import { BookCard } from "./components";
-
-interface BooksProps {
-  title: string;
-}
+import { Books } from "./components";
 
 interface SearchInputProps {
   search: string;
@@ -50,49 +44,6 @@ const SearchInput = ({ search, setSearch }: SearchInputProps) => {
   );
 };
 
-const Message = ({ text }: { text: string }) => (
-  <Grid item xs={12}>
-    <Box
-      display="flex"
-      height="100%"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <p>{text}</p>
-    </Box>
-  </Grid>
-);
-
-const Books = ({ title }: BooksProps) => {
-  const { loading, error, data } = useQuery(BOOKS_QUERY, {
-    variables: { title },
-  });
-
-  if (error) {
-    console.error("Failed to fetch books:", error);
-    return <p>Error occurred while fetching books.</p>;
-  }
-
-  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} />
-            ))
-          ) : (
-            <Message text="No books available" />
-          )}
-        </Grid>
-      </Grid>
-    </Grid>
-  );
-};
-
 export const BookList = () => {
   const [search, setSearch] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useState("");

src/components/BookList/components/Books/Books.tsx

@@ -0,0 +1,53 @@
+// components/BookList/components/Books/Books.tsx
+
+import { useQuery } from "@apollo/client";
+import { Box, Grid } from "@mui/material";
+import { BOOKS_QUERY, Book } from "../../../../data/books";
+import { BookCard } from "./components";
+
+interface BooksProps {
+  title: string;
+}
+
+const Message = ({ text }: { text: string }) => (
+  <Grid item xs={12}>
+    <Box
+      display="flex"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <p>{text}</p>
+    </Box>
+  </Grid>
+);
+
+export const Books = ({ title }: BooksProps) => {
+  const { loading, error, data } = useQuery(BOOKS_QUERY, {
+    variables: { title },
+  });
+
+  if (error) {
+    console.error("Failed to fetch books:", error);
+    return <p>Error occurred while fetching books.</p>;
+  }
+
+  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} />
+            ))
+          ) : (
+            <Message text="No books available" />
+          )}
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};

src/components/BookList/components/BookCard/BookCard.test.tsx → src/components/BookList/components/Books/components/BookCard/BookCard.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { BookCard } from "./BookCard";
-import { Book } from "../../../../data/books";
+import { Book } from "../../../../../../data/books";
 
 test("renders book information correctly", async () => {
   const mockBook: Book = {

src/components/BookList/components/BookCard/BookCard.tsx → src/components/BookList/components/Books/components/BookCard/BookCard.tsx

@@ -8,7 +8,7 @@ import {
   CardActionAreaWrapper,
 } from "./BookCard.styles";
 import { CircularProgressWithLabel } from "./components";
-import { Book } from "../../../../data/books";
+import { Book } from "../../../../../../data/books";
 
 const getYear = (dateString: string): string => {
   const date = new Date(dateString);

src/components/BookList/components/Books/components/index.ts

@@ -0,0 +1 @@
+export * from "./BookCard";

src/components/BookList/components/Books/index.ts

@@ -0,0 +1 @@
+export * from "./Books";

src/components/BookList/components/index.ts

@@ -1 +1 @@
-export * from "./BookCard";
+export * from "./Books";