donor list added

shahidmonowarr · Dec 29, 2022 · 27b856e · 27b856e
1 parent 9693992
commit 27b856e
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 24 deletions.
diff --git a/public/fakeDB.JSON b/public/fakeDB.JSON
@@ -60,7 +60,7 @@
         "cateImg2": "https://i.ibb.co/S769bW3/blood-bag.png",
         "cateImg3": "https://i.ibb.co/qMQxZV0/blood-transfusion.png",
         "btnText": "View All Bloods",
-        "link": "/availableBlood",
+        "link": "/blood",
         "description": "However, following a positive attitude as well as spreading that rationalist to other people will make your skills more rewarding. This blog will help you in becoming that positivist social butterfly with its everyday tips on how to be a better person as well as how to build stronger skills. Believe me, you will be surprised after reading a few posts."
     }
   ]
diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,10 @@ import AboutUs from "./Optional/AboutUs";
 import Faq from "./Optional/Faq";
 import PrivacyPolicy from "./Optional/PrivacyPolicy";
 import Reviews from "./Pages/AllReviews/Reviews/Reviews";
-import { default as AvailableBlood, default as AvailableDonor } from "./Pages/BloodsPage/AvailableDonor/AvailableDonor";
+import {
+  default as AvailableBlood,
+  default as AvailableDonor
+} from "./Pages/BloodsPage/AvailableDonor/AvailableDonor";
 import BloodDonate from "./Pages/BloodsPage/BloodDonate/BloodDonate";
 import BloodHome from "./Pages/BloodsPage/BloodHome/BloodHome";
 import BloodPatient from "./Pages/BloodsPage/BloodPatient/BloodPatient";
@@ -61,19 +64,75 @@ function App() {
                 <Dashboard />
               </RequireAuth>
             }
-          > 
+          >
             <Route index element={<DashboardHome></DashboardHome>}></Route>
             <Route path="addReview" element={<AddReview></AddReview>}></Route>
             <Route path="myOrders" element={<Orders></Orders>}></Route>
             <Route path="payment/:id" element={<Payment></Payment>}></Route>
-            <Route path="users" element={<RequireAdmin><Users></Users></RequireAdmin>}></Route>
-            <Route path="addCourse" element={<RequireAdmin><AddCourse></AddCourse></RequireAdmin>}></Route>
-            <Route path="addPlace" element={<RequireAdmin><AddPlace></AddPlace></RequireAdmin>}></Route>
-            <Route path="addBlog" element={<RequireAdmin><AddBlog></AddBlog></RequireAdmin>}></Route>
-            <Route path="manageOrders" element={<RequireAdmin><ManageOrders></ManageOrders></RequireAdmin>}></Route>
-            <Route path="manageCourses" element={<RequireAdmin><ManageCourses></ManageCourses></RequireAdmin>}></Route>
-            <Route path="managePlaces" element={<RequireAdmin><ManagePlaces></ManagePlaces></RequireAdmin>}></Route>
-            <Route path="allTransaction" element={<RequireAdmin><AllTransaction></AllTransaction></RequireAdmin>}></Route>
+            <Route
+              path="users"
+              element={
+                <RequireAdmin>
+                  <Users></Users>
+                </RequireAdmin>
+              }
+            ></Route>
+            <Route
+              path="addCourse"
+              element={
+                <RequireAdmin>
+                  <AddCourse></AddCourse>
+                </RequireAdmin>
+              }
+            ></Route>
+            <Route
+              path="addPlace"
+              element={
+                <RequireAdmin>
+                  <AddPlace></AddPlace>
+                </RequireAdmin>
+              }
+            ></Route>
+            <Route
+              path="addBlog"
+              element={
+                <RequireAdmin>
+                  <AddBlog></AddBlog>
+                </RequireAdmin>
+              }
+            ></Route>
+            <Route
+              path="manageOrders"
+              element={
+                <RequireAdmin>
+                  <ManageOrders></ManageOrders>
+                </RequireAdmin>
+              }
+            ></Route>
+            <Route
+              path="manageCourses"
+              element={
+                <RequireAdmin>
+                  <ManageCourses></ManageCourses>
+                </RequireAdmin>
+              }
+            ></Route>
+            <Route
+              path="managePlaces"
+              element={
+                <RequireAdmin>
+                  <ManagePlaces></ManagePlaces>
+                </RequireAdmin>
+              }
+            ></Route>
+            <Route
+              path="allTransaction"
+              element={
+                <RequireAdmin>
+                  <AllTransaction></AllTransaction>
+                </RequireAdmin>
+              }
+            ></Route>
           </Route>
 
           <Route path="services" element={<OfferServices />} />
@@ -89,7 +148,7 @@ function App() {
               </RequireAuth>
             }
           />
-          
+
           <Route path="allBlogs" element={<AllBlogs />} />
           <Route
             path="blogDetails/:blogId"
@@ -121,27 +180,29 @@ function App() {
             path="placeBooking/:serviceId"
             element={
               <RequireAuth>
-                <PlaceBooking/>
+                <PlaceBooking />
               </RequireAuth>
             }
           />
           <Route path="login" element={<Login />} />
           <Route path="register" element={<Register />} />
           <Route path="aboutUs" element={<AboutUs />} />
           <Route path="faq" element={<Faq />} />
-          <Route path="privacyPolicy" element={<PrivacyPolicy/>} />
-          <Route path="blood" element={<BloodHome/>} />
+          <Route path="privacyPolicy" element={<PrivacyPolicy />} />
+          <Route path="blood" element={<BloodHome />} />
           <Route
             path="blood"
             element={
-              <BloodHome/>
+              <RequireAuth>
+                <BloodHome />
+              </RequireAuth>
             }
-          > 
-            <Route index element={<AvailableDonor/>}></Route>
-            <Route path="availableDonor" element={<AvailableDonor/>}></Route>
-            <Route path="bloodDonate" element={<BloodDonate/>}></Route>
-            <Route path="bloodPatient" element={<BloodPatient/>}></Route>
-            <Route path="guidelines" element={<Guidelines/>}></Route>
+          >
+            <Route index element={<AvailableDonor />}></Route>
+            <Route path="availableDonor" element={<AvailableDonor />}></Route>
+            <Route path="bloodDonate" element={<BloodDonate />}></Route>
+            <Route path="bloodPatient" element={<BloodPatient />}></Route>
+            <Route path="guidelines" element={<Guidelines />}></Route>
           </Route>
           <Route path="*" element={<NotFound />} />
         </Routes>

diff --git a/src/Pages/BloodsPage/AvailableDonor/AvailableDonor.js b/src/Pages/BloodsPage/AvailableDonor/AvailableDonor.js
@@ -1,9 +1,53 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
+import { Table, Toast } from "react-bootstrap";
 
 const AvailableDonor = () => {
+  const [donors, setDonors] = useState([]);
+
+  useEffect(() => {
+    fetch("http://localhost:5000/blood")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        setDonors(data);
+      })
+      .catch((error) => Toast.error(error.message));
+  }, []);
   return (
     <div>
-      <h2>This is the available donor page</h2>
+      <div className="manage-order col-lg-10 mx-auto">
+        <div className="card my-5">
+          <h5 className="text-uppercase card-header danger-color white-text text-center py-4">
+            <strong>Available Donor List:</strong>
+          </h5>
+          <Table striped bordered hover responsive variant="dark">
+            <thead>
+              <tr className="bg-dark text-white">
+                <th>Index</th>
+                <th>Donor Name</th>
+                <th>Donor Email</th>
+                <th>Phone No.</th>
+                <th>Blood Group</th>
+                <th>Last Donate Date</th>
+                <th>Address</th>
+              </tr>
+            </thead>
+            <tbody>
+              {donors.map((donor, index) => (
+                <tr key={donor._id}>
+                  <td>{index + 1}</td>
+                  <td>{donor.name}</td>
+                  <td>{donor.email}</td>
+                  <td>{donor.phone}</td>
+                  <td>{donor.bloodGroup}</td>
+                  <td>{donor.lastBloodDonateDate}</td>
+                  <td>{donor.address}</td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/Pages/BloodsPage/BloodHome/BloodHome.js b/src/Pages/BloodsPage/BloodHome/BloodHome.js
@@ -1,10 +1,12 @@
 import React from "react";
 import { Button, ButtonGroup, Container } from "react-bootstrap";
 import { Link, Outlet } from "react-router-dom";
+import PageTitle from "../../../Components/Shared/PageTitle/PageTitle";
 
 const BloodHome = () => {
   return (
     <>
+        <PageTitle title="Bloods"></PageTitle>
       <Container>
         <h2 className="text-center text-uppercase mt-5 mb-4 feature">
           Available Blood Donor