first part of refactoring dashboard to start working by customhook.

src/components/dashboard/shard/Error.jsx

@@ -0,0 +1,11 @@
+const Error = ({ errorMessage }) => {
+  return (
+    <tr>
+      <td colSpan="10" className="text-center p-5 text-3xl">
+        {errorMessage}
+      </td>
+    </tr>
+  );
+};
+
+export default Error;

src/components/dashboard/shard/LoadingWhile.jsx

@@ -0,0 +1,12 @@
+import LoadingSpinner from "../../userProfile/shard/LoadingSpinner";
+const LoadingWhile = () => {
+  return (
+    <tr>
+      <td colSpan="10" className="text-center p-5 text-3xl">
+        <LoadingSpinner />
+      </td>
+    </tr>
+  );
+};
+
+export default LoadingWhile;

src/components/dashboard/shard/NotFoundData.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const NotFoundData = ({message}) => {
+  return (
+    <tr>
+      <td colSpan="10" className="text-center p-5 text-3xl">
+        {message}
+      </td>
+    </tr>
+  );
+};
+
+export default NotFoundData;

src/components/index.js

@@ -91,6 +91,9 @@ export { default as StatsContainer } from "./dashboard/StatsContainer";
 
 export { default as NavigationLink } from "./dashboard/shard/NavigationLink";
 export { default as NavBarLink } from "./dashboard/shard/NavBarLink";
+export { default as LoadingWhile } from "./dashboard/shard/LoadingWhile";
+export { default as Error } from "./dashboard/shard/Error";
+export { default as NotFoundData } from "./dashboard/shard/NotFoundData";
 
 //Payment
 export { default as OrderDetails } from "./payment/OrderDetails";

src/pages/dashboard/Dashboard.jsx

@@ -3,98 +3,85 @@ import { useState, useEffect } from "react";
 import { customFetch } from "../../utils/customFetch";
 import { PageIntro, StatsBox, StatsContainer } from "../../components";
 import SyncLoader from "react-spinners/SyncLoader";
+import { LoadingSpinner } from "../../components";
+
+import useFetchData from "../../hooks/useFetchData";
 function Dashboard() {
   const { token } = useSelector((state) => state.userReducers);
-  const [siteStates, setSiteStates] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
 
-        const res = await customFetch.get("/admin/siteStatics", {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        });
+  const { data, loading, error, fetchData } = useFetchData(
+    "admin/siteStatics",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
 
-        setSiteStates(res.data.data);
-        setLoading(false);
-      } catch (error) {
-        setLoading(false);
-        setError(error);
-      }
-    };
+      requestedData: "statics",
+    }
+  );
 
+  useEffect(() => {
     fetchData();
   }, [token]);
+  console.log(data);
   return (
     <>
       <div className="p-5">
         <PageIntro pageName="Stats" />
 
-        {loading && (
-          <div className="flex justify-center content-center">
-            <SyncLoader color="#36d7b7" />
-          </div>
-        )}
+        {loading && !error && <LoadingSpinner />}
 
         {!loading && error && <p>Error: {error.message}</p>}
 
-        {siteStates && !loading && (
+        {data && !loading && (
           <StatsContainer>
-            <StatsBox
-              statsText="Total Users"
-              statsValue={siteStates && siteStates.users}
-            />
+            <StatsBox statsText="Total Users" statsValue={data && data.users} />
             <StatsBox
               statsText="Total Instructors"
-              statsValue={siteStates && siteStates.instructors}
+              statsValue={data && data.instructors}
             />
             <StatsBox
               statsText="Total Enrollments"
-              statsValue={siteStates && siteStates.enrollments}
+              statsValue={data && data.enrollments}
             />
             <StatsBox
               statsText="Total Courses"
-              statsValue={siteStates && siteStates.courses}
+              statsValue={data && data.courses}
             />
             <StatsBox
               statsText="Free Courses"
-              statsValue={siteStates && siteStates.freeCourses}
+              statsValue={data && data.freeCourses}
             />
             <StatsBox
               statsText="Paid Courses"
-              statsValue={siteStates && siteStates.paidCourses}
+              statsValue={data && data.paidCourses}
             />
             <StatsBox
               statsText="Admins accounts"
-              statsValue={siteStates && siteStates.admins}
+              statsValue={data && data.admins}
             />
             <StatsBox
               statsText="Students Accounts"
-              statsValue={siteStates && siteStates.students}
+              statsValue={data && data.students}
             />
             <StatsBox
               statsText="Verified Accounts"
-              statsValue={siteStates && siteStates.verifiedAccounts}
+              statsValue={data && data.verifiedAccounts}
             />
 
             <StatsBox
               statsText="Un Verified Accounts"
-              statsValue={siteStates && siteStates.unverifiedAccounts}
+              statsValue={data && data.unverifiedAccounts}
             />
 
             <StatsBox
               statsText="Active Accounts"
-              statsValue={siteStates && siteStates.activeAccounts}
+              statsValue={data && data.activeAccounts}
             />
 
             <StatsBox
               statsText="Un Active Accounts"
-              statsValue={siteStates && siteStates.inactiveAccounts}
+              statsValue={data && data.inactiveAccounts}
             />
 
             <StatsBox statsText="Total Categories" statsValue={5} />

src/pages/dashboard/FreeCourses.jsx

@@ -1,66 +1,40 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { customFetch } from "../../utils/customFetch";
 
 import {
   PageIntro,
   PageContainer,
   CourseElement,
   CoursesHeader,
   Pagination,
+  LoadingWhile,
+  Error,
+  NotFoundData,
 } from "../../components";
+import useFetchData from "../../hooks/useFetchData";
 
 function FreeCourses() {
   const { token } = useSelector((state) => state.userReducers);
-  const [courses, setCourses] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  const [isMorePages, setIsMorePages] = useState(false);
-  const [itemsPerPage, setItemsPerPage] = useState(15);
+  const [itemsPerPage, setItemsPerPage] = useState(6);
   const [currentPage, setCurrentPage] = useState(1);
-
+  const [isChanged, setIsChanged] = useState(false);
+  const { data, loading, error, isMorePages, fetchData } = useFetchData(
+    "/admin/freeCourses",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      params: {
+        page: currentPage,
+        limit: itemsPerPage,
+        sort: "-createdAt",
+      },
+      requestedData: "courses",
+    }
+  );
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const res = await customFetch.get("/admin/freeCourses", {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-          params: {
-            page: currentPage,
-            limit: itemsPerPage,
-          },
-        });
-
-        if (res.data.data.courses) {
-          setCourses(res.data.data.courses);
-          setIsMorePages(res.data.data.courses.length === itemsPerPage);
-        } else {
-          setCourses([]);
-          setIsMorePages(false);
-        }
-
-        setLoading(false);
-      } catch (error) {
-        console.log(error);
-        setLoading(false);
-      }
-    };
-
     fetchData();
-  }, [token, currentPage, itemsPerPage]);
-
-  const prevPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage((prev) => prev - 1);
-    }
-  };
-
-  const nextPage = () => {
-    if (isMorePages) {
-      setCurrentPage((prev) => prev + 1);
-    }
-  };
+  }, [token, currentPage, itemsPerPage, isChanged]);
 
   return (
     <div className="p-5">
@@ -70,37 +44,30 @@ function FreeCourses() {
       {/* table manage table courses table  */}
       <PageContainer tableHeader={"Free Courses"}>
         <CoursesHeader />
-        {loading && (
-          <tr>
-            <td colSpan="10" className="text-center p-5 text-3xl">
-              Loading........
-            </td>
-          </tr>
-        )}
+        {loading && <LoadingWhile />}
+
         {!loading &&
-          courses.length > 0 &&
-          courses.map((course, index) => (
+          data.length > 0 &&
+          data.map((course, index) => (
             <CourseElement
               key={course._id}
               course={course}
               index={index + 1 + (currentPage - 1) * itemsPerPage}
               token={token}
+              setIsChanged={setIsChanged}
             />
           ))}
-        {!loading && courses.length === 0 && (
-          <tr>
-            <td colSpan="10" className="text-center p-5 text-3xl">
-              No Courses Found
-            </td>
-          </tr>
+        {!loading && data.length === 0 && (
+          <NotFoundData message={"No Courses Found "} />
         )}
+        {error && !loading && <Error errorMessage={error} />}
       </PageContainer>
 
       <Pagination
         currentPage={currentPage}
         isMorePages={isMorePages}
-        onPrevPage={prevPage}
-        onNextPage={nextPage}
+        onPrevPage={() => setCurrentPage((prev) => prev - 1)}
+        onNextPage={() => setCurrentPage((prev) => prev + 1)}
       />
     </div>
   );