BooxWoox · Sk05062003 · Jul 30, 2021
diff --git a/src/App.js b/src/App.js
@@ -4,6 +4,7 @@ import Sidebar from './components/Sidebar';
 import BookApprovalSys from './components/BookApprovalSys';
 import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
 import {useState} from 'react';
+import AllOrders from './components/AllOrders';
 
 function App() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -18,6 +19,7 @@ function App() {
       <div className='main'>
         <Switch>
           <Route exact path='/BookApprovalSys' component={BookApprovalSys}/>
+          <Route exact path='/allOrders' component={AllOrders}/>
         </Switch>
       </div>
     </div>

diff --git a/src/components/AddFilter.jsx b/src/components/AddFilter.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import './css/AddFilter.css'
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 
 const AddFilter = ({ openStatus, close }) => {
 
@@ -9,11 +10,28 @@ const AddFilter = ({ openStatus, close }) => {
                 <h4>+ AddFilter</h4>
                 <h4 id='closebtn' onClick={close}>close x</h4>
             </div>
-            <div className="filterCondition">
-                <h4>condition1 </h4>
-                <h4 id='closebtn' >x</h4>
+            <div className="condition">
+                <form>
+                <p>Medium of rent</p>
+                <input type="reset" value="Clear" name="Button"></input>
+                <fieldset id="Medium">
+                <input type="radio" value="Pick Up" name="Medium"></input>
+                <lable htmlFor="Pick Up">Pick Up</lable>
+                <br></br>
+                <input type="radio" value="Delivery" name="Medium"></input>
+                <lable htmlFor="Delivery">Delivery</lable>
+                </fieldset>
+                </form>
+            </div>
+            <div className="clearAll">
+                <div className="deleteIcon">
+                    <DeleteRoundedIcon color='error' />
+                </div>
+                <div className="clearText">
+                    <h4>Clear All Filters</h4>
+                </div>
+                <button className="doneButton">Done</button>
             </div>
-
 
         </div>
     )

diff --git a/src/components/AllOrders.jsx b/src/components/AllOrders.jsx
@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+import './css/AllOrders.css'
+import BookOrderCards from './BookOrderCards'
+import FilterListIcon from '@material-ui/icons/FilterList';
+import OrdersList from './apis/Orders.json'
+import AddFilter from './AddFilter';
+import Pagignation from './Pagignation';
+
+const AllOrders = () => {
+    const [Orders, setOrders] = useState(OrdersList);
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const [active, setActive] = useState({
+        'rent': false,
+        'buysell': false
+    })
+
+    function filterOrders(status) {
+        const filteredOrders = OrdersList.filter((book) => {
+            return book.status === status;
+        })
+        setOrders(filteredOrders);
+
+        if (status === "rent") {
+            setActive({
+                "rent": true,
+                "buysell": false
+            });
+        }
+        else {
+            setActive({
+                "rent": false,
+                "buysell": true
+            });
+        }
+    }
+
+    useEffect(() => {
+        filterOrders("rent");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    // Get current posts
+    const indexOfLastBook = currentPage * 3;
+    const indexOfFirstBook = indexOfLastBook - 3;
+    const currentBooks = Orders.slice(indexOfFirstBook, indexOfLastBook);
+
+    const paginate = pageNumber => setCurrentPage(pageNumber);
+
+    return (
+        <>
+            <AddFilter openStatus={filterOpen} close={() => { setFilterOpen(false) }}/>
+            <div className='bookContainer'>
+                <div className="bookContainerNav">
+                    <p id={active.rent ? 'activeTab' : ''} onClick={() => { filterOrders("rent") }}>Rent</p>
+                    <p id={active.buysell ? 'activeTab' : ''} onClick={() => { filterOrders("buysell") }}>Buy/Sell</p>
+                </div>
+
+
+                <div className="form">
+                    <button className='filterbtn' onClick={(e) => { setFilterOpen(!filterOpen) }}><FilterListIcon fontSize='small' color="primary" /> Filter</button>
+                    <input type="text" placeholder='Search' className='searchbox' />
+                </div>
+
+
+                <div className='line' />
+                <BookOrderCards books={currentBooks} />
+                <Pagignation totalBooks={Orders.length}
+                    paginate={paginate} currentPage={currentPage}/>
+            </div>
+
+        </>
+    )
+}
+
+export default AllOrders
diff --git a/src/components/BookOrderCards.jsx b/src/components/BookOrderCards.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import './css/BookOrderCards.css'
+
+const BookOrderCards = ({ books }) => {
+    return (
+        books.map((book) => {
+            return (
+                <div className="bookCard" key={book.title}>
+                    <div className="cardHead">
+                        <h4>{book.title}</h4>
+                    </div>
+                    <p >{book.desc}</p>
+                    {book.medium === 'pickup' ? <button className='bbtn' >Pick Up</button> :
+                        <button className='bbtn' style={{ border:`2px solid #FFAE00`, color: '#FFAE00'}}>Delivery</button>}
+
+                </div>
+            )
+        })
+    )
+}
+
+export default BookOrderCards
diff --git a/src/components/apis/Orders.json b/src/components/apis/Orders.json
@@ -0,0 +1,122 @@
+[
+    {
+        "title": "Book1",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book2",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book3",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "buysell"
+    },
+    {
+        "title": "Book4",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book5",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "buysell"
+    },
+    {
+        "title": "Book6",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book7",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book8",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book9",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book10",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book11",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book12",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book13",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book14",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "buysell"
+    },
+    {
+        "title": "Book15",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book16",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book17",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book18",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book19",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book20",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    }
+]