Refactor code to remove unnecessary TableBodyCell elements in various…

… components
Mohamed-Ramadan1 · May 31, 2024 · 52f436c · 52f436c
1 parent b8924d8
commit 52f436c
Show file tree

Hide file tree

Showing 18 changed files with 248 additions and 213 deletions.
diff --git a/src/components/common/ScrollToTop.jsx b/src/components/common/ScrollToTop.jsx
@@ -0,0 +1,15 @@
+// ScrollToTop.js
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;
diff --git a/src/components/dashboard/BlogELement.jsx b/src/components/dashboard/BlogELement.jsx
@@ -72,7 +72,6 @@ const BlogELement = ({ blog, token, setIsChanged }) => {
 
   return (
     <TableBody>
-      <TableBodyCell>{_id}</TableBodyCell>
       <TableBodyCell>{title}</TableBodyCell>
       <TableBodyCell>{category}</TableBodyCell>
       <TableBodyCell>{createdBy.name}</TableBodyCell>

diff --git a/src/components/dashboard/BlogsTableHeader.jsx b/src/components/dashboard/BlogsTableHeader.jsx
@@ -4,7 +4,6 @@ import TableHeaderCell from "./shard/TableHeaderCell";
 const BlogsTableHeader = () => {
   return (
     <TableHeader>
-      <TableHeaderCell>Blog-ID</TableHeaderCell>
       <TableHeaderCell>Title</TableHeaderCell>
       <TableHeaderCell>Category</TableHeaderCell>
       <TableHeaderCell>Arthur Name </TableHeaderCell>

diff --git a/src/components/dashboard/EnrollmentElement.jsx b/src/components/dashboard/EnrollmentElement.jsx
@@ -3,12 +3,20 @@ import { customFetch } from "../../utils/customFetch";
 import TableBody from "./shard/TableBody";
 import TableBodyCell from "./shard/TableBodyCell";
 const EnrollmentElement = ({ enrollment, index, token, setIsChanged }) => {
-  const { _id, price, createdAt, paid, updatedAt, enrollmentStatus } =
-    enrollment;
+  const {
+    _id,
+    price,
+    createdAt,
+    paid,
+    updatedAt,
+    enrollmentStatus,
+    financialAid,
+  } = enrollment;
   const { title, duration } = enrollment.course;
   const { name, email } = enrollment.user;
 
   const isPaid = paid ? "Paid" : "Not Paid";
+  const isFinancialAid = financialAid ? "Yes" : "No";
   const createdAtDate = new Date(createdAt).toLocaleDateString();
   const updatedAtDate = new Date(updatedAt).toLocaleDateString();
 
@@ -91,14 +99,14 @@ const EnrollmentElement = ({ enrollment, index, token, setIsChanged }) => {
 
   return (
     <TableBody>
-      <TableBodyCell>{_id}</TableBodyCell>
       <TableBodyCell>{title}</TableBodyCell>
       <TableBodyCell>{name}</TableBodyCell>
       <TableBodyCell>{email}</TableBodyCell>
       <TableBodyCell>{isPaid}</TableBodyCell>
       <TableBodyCell>{createdAtDate}</TableBodyCell>
       <TableBodyCell>{duration} h</TableBodyCell>
-      <TableBodyCell>{price} $</TableBodyCell>
+      <TableBodyCell>{price || 0} $</TableBodyCell>
+      <TableBodyCell>{isFinancialAid}</TableBodyCell>
       <TableBodyCell>{updatedAtDate}</TableBodyCell>
       <TableBodyCell>{enrollmentStatus}</TableBodyCell>
 

diff --git a/src/components/dashboard/EnrollmentHeader.jsx b/src/components/dashboard/EnrollmentHeader.jsx
@@ -3,14 +3,15 @@ import TableHeaderCell from "./shard/TableHeaderCell";
 const EnrollmentHeader = () => {
   return (
     <TableHeader>
-      <TableHeaderCell>Enrollment-ID</TableHeaderCell>
       <TableHeaderCell>Course Title</TableHeaderCell>
       <TableHeaderCell>User Name</TableHeaderCell>
       <TableHeaderCell>User Email</TableHeaderCell>
       <TableHeaderCell>Paid Status</TableHeaderCell>
       <TableHeaderCell>crated At</TableHeaderCell>
       <TableHeaderCell>Duration</TableHeaderCell>
       <TableHeaderCell>Price</TableHeaderCell>
+      <TableHeaderCell>Financial-Aid</TableHeaderCell>
+
       <TableHeaderCell>Updated At</TableHeaderCell>
       <TableHeaderCell>Enrollment Status</TableHeaderCell>
       <TableHeaderCell>Options</TableHeaderCell>

diff --git a/src/components/dashboard/FinancialAidRequestElement.jsx b/src/components/dashboard/FinancialAidRequestElement.jsx
@@ -83,7 +83,6 @@ const FinancialAidRequestElement = ({ request, token, setIsChanged }) => {
 
   return (
     <TableBody>
-      <TableBodyCell>{_id}</TableBodyCell>
       <TableBodyCell>{user.name}</TableBodyCell>
       <TableBodyCell>{user.email}</TableBodyCell>
       <TableBodyCell>{age}</TableBodyCell>

diff --git a/src/components/dashboard/FinancialAidRequestHeader.jsx b/src/components/dashboard/FinancialAidRequestHeader.jsx
@@ -4,7 +4,6 @@ import TableHeaderCell from "./shard/TableHeaderCell";
 const FinancialAidRequestHeader = () => {
   return (
     <TableHeader>
-      <TableHeaderCell>Request-ID</TableHeaderCell>
       <TableHeaderCell>Name</TableHeaderCell>
       <TableHeaderCell>Email</TableHeaderCell>
       <TableHeaderCell>Age</TableHeaderCell>

diff --git a/src/components/dashboard/InstructorRequestsHeader.jsx b/src/components/dashboard/InstructorRequestsHeader.jsx
@@ -3,7 +3,6 @@ import TableHeaderCell from "./shard/TableHeaderCell";
 const InstructorRequestsHeader = () => {
   return (
     <TableHeader>
-      <TableHeaderCell>Request-ID</TableHeaderCell>
       <TableHeaderCell>Name</TableHeaderCell>
       <TableHeaderCell>Email</TableHeaderCell>
       <TableHeaderCell>Phone Number</TableHeaderCell>

diff --git a/src/components/dashboard/InstructorsApplicationElement.jsx b/src/components/dashboard/InstructorsApplicationElement.jsx
@@ -86,7 +86,6 @@ const InstructorsApplicationElement = ({
 
   return (
     <TableBody>
-      <TableBodyCell>{_id}</TableBodyCell>
       <TableBodyCell>{name}</TableBodyCell>
       <TableBodyCell>{email}</TableBodyCell>
       <TableBodyCell>{phone}</TableBodyCell>

diff --git a/src/layout/dashboard/DashboardLayout.jsx b/src/layout/dashboard/DashboardLayout.jsx
@@ -1,7 +1,6 @@
 import { Outlet } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-
 import DashboardFooter from "./DashboardFooter";
 import DashboardNavBar from "./DashboardNavBar";
 import SideBar from "./SideBar";
@@ -29,9 +28,9 @@ const DashboardLayout = () => {
           {/* Navigation bar */}
           <DashboardNavBar />
 
-          <div className="flex-1 p-4">
+          <main className="flex-1 p-4">
             <Outlet />
-          </div>
+          </main>
           {/* <div className="mb-10 bottom-0">
             <DashboardFooter />
           </div> */}

diff --git a/src/layout/dashboard/DashboardNavBar.jsx b/src/layout/dashboard/DashboardNavBar.jsx
@@ -5,6 +5,7 @@ import { useNavigate, Link } from "react-router-dom";
 import { NavBarLink } from "../../components";
 import { navLinks } from "./navLinksData";
 import useScreenSize from "../../hooks/useScreenSize";
+import { GiHamburgerMenu } from "react-icons/gi";
 function DashboardNavBar() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -43,7 +44,7 @@ function DashboardNavBar() {
               role="button"
               className="btn btn-ghost rounded-btn text-2xl"
             >
-              Navigate
+              <GiHamburgerMenu className="text-3xl" />
             </div>
             <ul
               tabIndex={0}

diff --git a/src/layout/footer/Footer.jsx b/src/layout/footer/Footer.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import TopContent from "./TopContent";
 import ButtomContent from "./ButtomContent";
 

diff --git a/src/layout/footer/TopContent.jsx b/src/layout/footer/TopContent.jsx
@@ -1,9 +1,7 @@
 import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
 import InfoBox from "./InfoBox";
 
 const TopContent = () => {
-  const { user } = useSelector((state) => state.userReducers);
   return (
     <div className="content-top relative overflow-hidden flex justify-center items-center px-[124px] py-[70px] max-lg:px-[30px] max-sm:py-[30px] max-sm:px-[15px] bg-[#222]">
       <div className="container max-w-[1400px] m-auto gap-10 flex justify-between items-start max-md:flex-col">

diff --git a/src/layout/header/HeaderPhone.jsx b/src/layout/header/HeaderPhone.jsx
@@ -37,7 +37,7 @@ export default function HeaderPhone() {
       transition={{ delay: 0.3, type: "tween" }}
       className=""
     >
-      <div className="container flex justify-between items-center p-[20px] max-w-full w-full">
+      <div className="container flex justify-between items-center p-[20px] max-w-full w-full ">
         <div className="logo">
           <a href="">
             <img src={logo} alt="" className="h-[40px] w-[97px]" />
@@ -55,7 +55,7 @@ export default function HeaderPhone() {
           className="fixed menuList overflow-y-scroll w-full h-full transition ease-out top-0 flex gap-7 flex-col items-start bg-[#fff] p-[20px] z-10"
           style={{ left: `${menuListLeft}px` }}
         >
-          <div className="w-full flex items-center gap-[10px]">
+          <div className="w-full flex items-center gap-[10px] ">
             {user && (
               <div className="w-[200px]">
                 <div className="profile w-full flex flex-row-reverse justify-between items-center gap-[15px]">
@@ -134,15 +134,17 @@ export default function HeaderPhone() {
             )}
           </HeaderPhoneNavigation>
 
-          <HeaderPhoneNavigation headerText="User Profile">
-            {userProfileLinks.map((link) => (
-              <NavigationLink
-                onClick={() => setMenuListLeft(-1000)}
-                path={link.path}
-                navigationText={link.navigationText}
-              />
-            ))}
-          </HeaderPhoneNavigation>
+          {user && (
+            <HeaderPhoneNavigation headerText="User Profile">
+              {userProfileLinks.map((link) => (
+                <NavigationLink
+                  onClick={() => setMenuListLeft(-1000)}
+                  path={link.path}
+                  navigationText={link.navigationText}
+                />
+              ))}
+            </HeaderPhoneNavigation>
+          )}
         </motion.div>
       </div>
     </motion.div>

diff --git a/src/layout/mainLayout/MainLayout.jsx b/src/layout/mainLayout/MainLayout.jsx
@@ -1,15 +1,18 @@
 import { Outlet } from "react-router-dom";
 import Footer from "../footer/Footer";
+import ScrollToTop from "../../components/common/ScrollToTop";
 import Header from "../header/Header";
 const MainLayout = () => {
   return (
-    <div>
+    <>
       <Header />
-
-      <Outlet />
+      <ScrollToTop />
+      <main>
+        <Outlet />
+      </main>
 
       <Footer />
-    </div>
+    </>
   );
 };
 

diff --git a/src/pages/root/ForgotPassword.jsx b/src/pages/root/ForgotPassword.jsx
@@ -77,11 +77,11 @@ const ForgotPassword = () => {
                   textButton="Forgot Password"
                   isDisabled={isSubmitting}
                 />
-                <h3 className="text-center text-[#2d2d2d] text-base">
+                <h3 className="text-center text-[#2d2d2d] text-base ">
                   Remember Password ?
                   <Link
                     to="/login"
-                    className="text-[#2d2d2d] font-semibold hover:text-[#f00]"
+                    className="text-[#9747FF] font-semibold ml-1"
                   >
                     Login
                   </Link>
@@ -91,7 +91,7 @@ const ForgotPassword = () => {
                   Don't have an account ?
                   <Link
                     to="/signup"
-                    className="text-[#2d2d2d] font-semibold hover:text-[#f00]"
+                    className="text-[#9747FF] font-semibold ml-1"
                   >
                     Signup
                   </Link>