From 0442ae81b80a8c8c1cf532ede144b9ae8712fb24 Mon Sep 17 00:00:00 2001
From: cnnrdel <cmd9609@nyu.edu>
Date: Wed, 6 Mar 2024 15:16:05 -0500
Subject: [PATCH] refactor(edit the skeletons of reading list buttons as well
 as status bar. imported them into app.js as well)

---
 front-end/src/App.js                         |  4 +++
 front-end/src/components/CurrentlyReading.js | 31 +++++++++++------
 front-end/src/components/ReadingFinished.js  | 24 ++++++++++++--
 front-end/src/components/ReadingProgress.js  | 35 +++++++++++++++++---
 front-end/src/components/ReadingWishlist.js  | 25 ++++++++++++--
 5 files changed, 100 insertions(+), 19 deletions(-)

diff --git a/front-end/src/App.js b/front-end/src/App.js
index f3bf3e0..bf230ef 100644
--- a/front-end/src/App.js
+++ b/front-end/src/App.js
@@ -5,6 +5,10 @@ import Home from "./components/home";
 import Navbar from "./components/navbar";
 import SignUpPage from "./components/Form/SignUpPage";
 import Login from './components/Form/login'
+import ReadingFinished from "./components/ReadingFinished";
+import ReadingProgress from "./components/ReadingProgress";
+import ReadingWishlist from "./components/ReadingWishlist";
+import CurrentlyReading from "./components/CurrentlyReading";
 
 function App() {
   const [loggedIn, setLoggedIn] = useState(false);
diff --git a/front-end/src/components/CurrentlyReading.js b/front-end/src/components/CurrentlyReading.js
index ee446f1..a53b07d 100644
--- a/front-end/src/components/CurrentlyReading.js
+++ b/front-end/src/components/CurrentlyReading.js
@@ -1,18 +1,29 @@
 import React from "react"
-
-const CurrentlyReading = () => {
+// maybe the  button updates depending on whether the book has/ hasn't been added
+// button to add a book to currentlyReading from that book's page
+function AddCurrentlyReading() {
   return (
-    // container
-    <div className="">
-      // update status
-      <div className=""></div>
+    <button>
+      Add to reading list
+    </button>
+  );
+};
 
+// option to remove book from reading list quickly
+function RemoveCurrentlyReading() {
+  return (
+    <button>
+      Remove from reading list
+    </button>
 
-      // status bar
-      <div className="">
+  );
+};
 
-      </div>
-    
+const CurrentlyReading = () => {
+  return (
+    <div className="">
+      <AddCurrentlyReading />
+      <RemoveCurrentlyReading />
     </div>
   );
 };
diff --git a/front-end/src/components/ReadingFinished.js b/front-end/src/components/ReadingFinished.js
index 07b6d6c..8a694e9 100644
--- a/front-end/src/components/ReadingFinished.js
+++ b/front-end/src/components/ReadingFinished.js
@@ -1,9 +1,29 @@
 import react from "react"
 
+function AddReadingFinished() {
+  return (
+    <button>
+      Add to finished book list
+    </button>
+  );
+};
+
+// option to remove book from reading list quickly
+function RemoveReadingFinished() {
+  return (
+    <button>
+      Remove from finished book list
+    </button>
+
+  );
+};
+
 const ReadingFinished = () => {
   return (
-    <>
-    </>
+    <div className="">
+      <AddReadingFinished />
+      <RemoveReadingFinished />
+    </div>
   );
 };
 
diff --git a/front-end/src/components/ReadingProgress.js b/front-end/src/components/ReadingProgress.js
index 967c43e..effd62b 100644
--- a/front-end/src/components/ReadingProgress.js
+++ b/front-end/src/components/ReadingProgress.js
@@ -1,14 +1,41 @@
 import React from "react"
 
-const ReadingProgress = () => {
+// button to edit reading progress (enter page number)
+function UpdateReadingStatus() {
+  return (
+    <button>
+      Update progress
+    </button>
+  );
+};
+
+function ReadingStatusBar() {
   return (
+    // status bar that displays how much of book currently read
+    // current page/total pages * 100
     <>
-    
-    
-    
     </>
   );
 };
 
+const ReadingProgress = () => {
+  return (
+    // container
+    <div className="">
+      // update status
+      <div className="">
+        <UpdateReadingStatus/>
+      </div>
+
+
+      // status bar
+      <div className="">
+        <ReadingStatusBar/>
+      </div>
+    
+    </div>
+  );
+};
+
 export default ReadingProgress;
 
diff --git a/front-end/src/components/ReadingWishlist.js b/front-end/src/components/ReadingWishlist.js
index 323b7fa..d444f19 100644
--- a/front-end/src/components/ReadingWishlist.js
+++ b/front-end/src/components/ReadingWishlist.js
@@ -1,10 +1,29 @@
 import react from "react"
 
+function AddReadingWishlist() {
+  return (
+    <button>
+      Add to wish list
+    </button>
+  );
+};
+
+// option to remove book from reading list quickly
+function RemoveReadingWishlist() {
+  return (
+    <button>
+      Remove from wish list
+    </button>
+
+  );
+};
+
 const ReadingWishlist = () => {
   return (
-    <>
-    
-    </>
+    <div>
+      <AddReadingWishlist />
+      <RemoveReadingWishlist />
+    </div>
 
 
   );