categorized favorites by author

marwanehab98 · Dec 2, 2022 · da1fe29 · da1fe29
1 parent 7c1d2b4
commit da1fe29
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 251 deletions.
diff --git a/src/components/book/Book.js b/src/components/book/Book.js
@@ -10,9 +10,10 @@ const { Meta } = Card;
 const Book = (props) => {
     const [checked, setChecked] = useState(props.isChecked);
     useEffect(() => {
-        // console.log(checked);
     }, [checked]);
 
+
+    //Handling checking the favourite checkbox by sending props to parent component
     const handleCheckbox = (e) => {
         setChecked(e.target.checked);
         props.isFavourite({
@@ -21,6 +22,8 @@ const Book = (props) => {
         });
     }
 
+
+    //Handling clicking on card by sending props to parent component
     const click = (e) => {
         props.clicked(props.book);
     }
@@ -32,8 +35,11 @@ const Book = (props) => {
                     hoverable
                     style={{
                         margin: '5px',
-                        width: '100%',
-                        // height: '600px'
+                        // width: '75%',
+                        // height: '75%',
+                        // maxWidth: '75%',
+                        // maxHeight: '50vh',
+                        borderColor: '#e0e0e0'
                     }}
                     cover={
                         <a 
@@ -45,7 +51,7 @@ const Book = (props) => {
                             }
                                 style={{
                                     padding: '5px',
-                                    maxHeight: '50vh',
+                                    // maxHeight: '50vh',
                                     width: '100%'
                                 }} />
                         </a>

diff --git a/src/components/book/Book.scss b/src/components/book/Book.scss
@@ -4,7 +4,5 @@
 }
 
 .authors {
-    // margin-top: 5%;
-    // margin-bottom: 5%;
     font-size: 80%
 }
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
@@ -1,12 +1,10 @@
 import React from "react";
-import "./Sidebar.scss";
 import { HomeOutlined, StarOutlined } from '@ant-design/icons';
-import { Breadcrumb, Layout, Menu } from 'antd';
-import logo from '../../logo.svg'
-import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
+import { Layout, Menu } from 'antd';
+import { useNavigate } from "react-router-dom";
 
 
-const { Header, Content, Footer } = Layout;
+const { Header } = Layout;
 
 
 const navigation = [
@@ -31,8 +29,8 @@ const SideBar = () => {
     const navigate = useNavigate();
     return (
         <>
-            <Layout>
-                <Header className="header">
+            <Layout className="layout">
+                <Header>
                     <div className="logo"></div>
                     <Menu
                         theme="dark"

diff --git a/src/components/sidebar/Sidebar.scss b/src/components/sidebar/Sidebar.scss
diff --git a/src/pages/Books/Books.js b/src/pages/Books/Books.js
@@ -1,4 +1,6 @@
-// import classes from "./Books.scss";
+//This is the homepage where all the books are shown
+
+
 import React, { useEffect, useState } from "react";
 import 'bootstrap/dist/css/bootstrap.css';
 import Book from '../../components/book/Book'
@@ -48,18 +50,20 @@ const Books = (props) => {
         setOpen(false);
     };
 
+
+    //Show all books in the current page as a grid (50 books max)
     const showBooks = () => {
-        const colCount = 4;
+        const colCount = 6;
         let tempRows = [];
-        for (let j = 0; j < Math.ceil(50 / 4); j++) {
+        for (let j = 0; j < Math.ceil(50 / colCount); j++) {
             let cols = [];
             for (let i = 0; i < colCount; i++) {
-                if (4 * j + i < 50 && 4 * j + i + ((currentPage - 1) * 50) < allBooks.length) {
+                if (colCount * j + i < 50 && colCount * j + i + ((currentPage - 1) * 50) < allBooks.length) {
                     cols.push(
-                        <Col style={{ "backgroundColor": "white" }} key={(4 * j + i + ((currentPage - 1) * 50)).toString()} span={24 / colCount}>
+                        <Col key={(colCount * j + i + ((currentPage - 1) * 50)).toString()} span={24 / colCount}>
                             <Book
-                                book={allBooks[4 * j + i + ((currentPage - 1) * 50)]}
-                                isChecked={favourites.some(e => e.id === allBooks[4 * j + i + ((currentPage - 1) * 50)].id)}
+                                book={allBooks[colCount * j + i + ((currentPage - 1) * 50)]}
+                                isChecked={favourites.some(e => e.id === allBooks[colCount * j + i + ((currentPage - 1) * 50)].id)}
                                 isFavourite={handleFavourites}
                                 clicked={handleClick}
                             ></Book>
@@ -76,6 +80,9 @@ const Books = (props) => {
         getBooks();
     }, []);
 
+
+    //API call for getting the book details from the API
+    //Called only once at the beginning
     const getBooks = () => {
         if (props.myBooks.length < 1) {
             // console.log("test")
@@ -97,6 +104,8 @@ const Books = (props) => {
         setFavourites(props.myFavourites);
     };
 
+
+    //Handling favourites on the homepage
     const handleFavourites = (data) => {
         // let tempFavourites = [];
         // Object.assign(tempFavourites, favourites);
@@ -116,6 +125,9 @@ const Books = (props) => {
             <p style={{ fontSize: '16px' }}>{content}</p>
         </div>
     );
+
+    //Handle clicks on the book component
+    //Shows a drawer with the details of the book
     const handleClick = (data) => {
         setTitle(data.title);
         let tempBookDetails = []
@@ -131,16 +143,19 @@ const Books = (props) => {
         );
         Object.keys(data).forEach(key => {
             if (key !== "id")
-            tempCols.push(
-                <DescriptionItem key={key} title={key.replace(/^./, key[0].toUpperCase())} content={data[key]} />
-            )
+                tempCols.push(
+                    <DescriptionItem key={key} title={key.replace(/^./, key[0].toUpperCase())} content={data[key]} />
+                )
         })
         tempBookDetails.push(tempCols);
         setBookDetails(tempBookDetails);
 
         showDrawer();
     }
 
+
+    //Handling the pagination behaviour
+    //Changes the currentPage state which is used as a variable on the showBooks() function
     const pageChange = (page) => {
         setCurrentPage(page);
     }

diff --git a/src/pages/Books/Books.scss b/src/pages/Books/Books.scss