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

@@ -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);

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>
   );
 };

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>
   );
 };
 

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;
 

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>
 
 
   );