From 98949ba0f81179cf0a5624ca6c26b16868a047c3 Mon Sep 17 00:00:00 2001
From: amalv <1252707+amalv@users.noreply.github.com>
Date: Tue, 19 Dec 2023 00:57:49 +0100
Subject: [PATCH] refactor: restructure BookList component directory for better
 organization

---
 src/components/BookList/BookList.tsx          | 51 +-----------------
 .../BookList/components/Books/Books.tsx       | 53 +++++++++++++++++++
 .../components}/BookCard/BookCard.styles.ts   |  0
 .../components}/BookCard/BookCard.test.tsx    |  2 +-
 .../components}/BookCard/BookCard.tsx         |  2 +-
 .../components/CircularProgressWithLabel.tsx  |  0
 .../CircularProgressWithlabel.test.tsx        |  0
 .../components}/BookCard/components/index.ts  |  0
 .../{ => Books/components}/BookCard/index.ts  |  0
 .../components/Books/components/index.ts      |  1 +
 .../BookList/components/Books/index.ts        |  1 +
 src/components/BookList/components/index.ts   |  2 +-
 12 files changed, 59 insertions(+), 53 deletions(-)
 create mode 100644 src/components/BookList/components/Books/Books.tsx
 rename src/components/BookList/components/{ => Books/components}/BookCard/BookCard.styles.ts (100%)
 rename src/components/BookList/components/{ => Books/components}/BookCard/BookCard.test.tsx (92%)
 rename src/components/BookList/components/{ => Books/components}/BookCard/BookCard.tsx (97%)
 rename src/components/BookList/components/{ => Books/components}/BookCard/components/CircularProgressWithLabel.tsx (100%)
 rename src/components/BookList/components/{ => Books/components}/BookCard/components/CircularProgressWithlabel.test.tsx (100%)
 rename src/components/BookList/components/{ => Books/components}/BookCard/components/index.ts (100%)
 rename src/components/BookList/components/{ => Books/components}/BookCard/index.ts (100%)
 create mode 100644 src/components/BookList/components/Books/components/index.ts
 create mode 100644 src/components/BookList/components/Books/index.ts

diff --git a/src/components/BookList/BookList.tsx b/src/components/BookList/BookList.tsx
index bc124ae..3f5ad68 100644
--- a/src/components/BookList/BookList.tsx
+++ b/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("");
diff --git a/src/components/BookList/components/Books/Books.tsx b/src/components/BookList/components/Books/Books.tsx
new file mode 100644
index 0000000..044fc61
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/BookList/components/BookCard/BookCard.styles.ts b/src/components/BookList/components/Books/components/BookCard/BookCard.styles.ts
similarity index 100%
rename from src/components/BookList/components/BookCard/BookCard.styles.ts
rename to src/components/BookList/components/Books/components/BookCard/BookCard.styles.ts
diff --git a/src/components/BookList/components/BookCard/BookCard.test.tsx b/src/components/BookList/components/Books/components/BookCard/BookCard.test.tsx
similarity index 92%
rename from src/components/BookList/components/BookCard/BookCard.test.tsx
rename to src/components/BookList/components/Books/components/BookCard/BookCard.test.tsx
index 71b05a9..b3f1659 100644
--- a/src/components/BookList/components/BookCard/BookCard.test.tsx
+++ b/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 = {
diff --git a/src/components/BookList/components/BookCard/BookCard.tsx b/src/components/BookList/components/Books/components/BookCard/BookCard.tsx
similarity index 97%
rename from src/components/BookList/components/BookCard/BookCard.tsx
rename to src/components/BookList/components/Books/components/BookCard/BookCard.tsx
index e334d0d..f4054d5 100644
--- a/src/components/BookList/components/BookCard/BookCard.tsx
+++ b/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);
diff --git a/src/components/BookList/components/BookCard/components/CircularProgressWithLabel.tsx b/src/components/BookList/components/Books/components/BookCard/components/CircularProgressWithLabel.tsx
similarity index 100%
rename from src/components/BookList/components/BookCard/components/CircularProgressWithLabel.tsx
rename to src/components/BookList/components/Books/components/BookCard/components/CircularProgressWithLabel.tsx
diff --git a/src/components/BookList/components/BookCard/components/CircularProgressWithlabel.test.tsx b/src/components/BookList/components/Books/components/BookCard/components/CircularProgressWithlabel.test.tsx
similarity index 100%
rename from src/components/BookList/components/BookCard/components/CircularProgressWithlabel.test.tsx
rename to src/components/BookList/components/Books/components/BookCard/components/CircularProgressWithlabel.test.tsx
diff --git a/src/components/BookList/components/BookCard/components/index.ts b/src/components/BookList/components/Books/components/BookCard/components/index.ts
similarity index 100%
rename from src/components/BookList/components/BookCard/components/index.ts
rename to src/components/BookList/components/Books/components/BookCard/components/index.ts
diff --git a/src/components/BookList/components/BookCard/index.ts b/src/components/BookList/components/Books/components/BookCard/index.ts
similarity index 100%
rename from src/components/BookList/components/BookCard/index.ts
rename to src/components/BookList/components/Books/components/BookCard/index.ts
diff --git a/src/components/BookList/components/Books/components/index.ts b/src/components/BookList/components/Books/components/index.ts
new file mode 100644
index 0000000..ba82d35
--- /dev/null
+++ b/src/components/BookList/components/Books/components/index.ts
@@ -0,0 +1 @@
+export * from "./BookCard";
diff --git a/src/components/BookList/components/Books/index.ts b/src/components/BookList/components/Books/index.ts
new file mode 100644
index 0000000..355dfc2
--- /dev/null
+++ b/src/components/BookList/components/Books/index.ts
@@ -0,0 +1 @@
+export * from "./Books";
diff --git a/src/components/BookList/components/index.ts b/src/components/BookList/components/index.ts
index ba82d35..355dfc2 100644
--- a/src/components/BookList/components/index.ts
+++ b/src/components/BookList/components/index.ts
@@ -1 +1 @@
-export * from "./BookCard";
+export * from "./Books";