Refactor code to start using custom hooks.

src/hooks/useFetchData.js

@@ -7,7 +7,9 @@ const useFetchData = (endpoint, options = {}) => {
     params = {},
     headers = {},
     initialData = [],
+    requestedData = "",
   } = options;
+
   const [data, setData] = useState(initialData);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -17,9 +19,10 @@ const useFetchData = (endpoint, options = {}) => {
     try {
       setLoading(true);
       const response = await customFetch[method](endpoint, { headers, params });
-      if (response.data.data) {
-        setData(response.data.data.usersNotes);
-        setIsMorePages(response.data.data.usersNotes.length === params.limit);
+      const responseData = response.data.data[requestedData];
+      if (responseData) {
+        setData(responseData);
+        setIsMorePages(responseData.length === params.limit);
       } else {
         setData([]);
         setIsMorePages(false);

src/pages/userProfile/MyEnrolledCourses.jsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { customFetch } from "../../utils/customFetch";
 import {
   EnrolledCourseCard,
   Pagination,
@@ -9,62 +8,46 @@ import {
   LoadingSpinner,
   ProfilePageContainer,
 } from "../../components";
-import { Link } from "react-router-dom";
+import useFetchData from "../../hooks/useFetchData";
 
 const MyEnrolledCourses = () => {
   const { token } = useSelector((state) => state.userReducers);
-  const [courses, setCourses] = useState([]);
-  const [isMorePages, setIsMorePages] = useState(false);
   const [itemsPerPage, setItemsPerPage] = useState(6);
   const [currentPage, setCurrentPage] = useState(1);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
 
-  useEffect(() => {
-    const fetchMyCourses = async () => {
-      try {
-        setLoading(true);
-        const response = await customFetch.get("users/me/courses", {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-          params: {
-            page: currentPage,
-            limit: itemsPerPage,
-          },
-        });
+  const { data, loading, error, isMorePages, fetchData } = useFetchData(
+    "users/me/courses",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      params: {
+        page: currentPage,
+        limit: itemsPerPage,
+        sort: "-createdAt",
+      },
+      requestedData: "courses",
+    }
+  );
 
-        // setCourses(response.data.data.courses);
-        if (response.data.data.courses) {
-          setCourses(response.data.data.courses);
-          setIsMorePages(response.data.data.courses.length === itemsPerPage);
-        } else {
-          setCourses([]);
-          setIsMorePages(false);
-          setLoading(false);
-        }
-      } catch (error) {
-        setLoading(false);
-        setError(error.response.data.message);
-      }
-    };
-    fetchMyCourses();
-    setLoading(false);
+  useEffect(() => {
+    fetchData();
   }, [currentPage, itemsPerPage, token]);
 
+  console.log(data);
   return (
     <>
       <ProfilePageContainer>
-        {courses.length > 0 && (
+        {data.length > 0 && (
           <div className="grid w-full sm:grid-cols-3  sm:gap-4 md:grid-cols-3 ">
-            {courses &&
-              courses.map((course) => (
+            {data &&
+              data.map((course) => (
                 <EnrolledCourseCard course={course} key={course._id} />
               ))}
           </div>
         )}
-        {/* No courses display centerd text */}
-        {courses.length === 0 && (
+
+        {data.length === 0 && !loading && (
           <EmptyItems
             headerText={"No courses enrolled yet"}
             linkText={" Start Explore"}
@@ -73,10 +56,9 @@ const MyEnrolledCourses = () => {
         )}
 
         {/* Loading spinner */}
-
         {loading && <LoadingSpinner />}
 
-        {error && !error && <ErrorMessage errorMessage={error} />}
+        {error && !loading && <ErrorMessage errorMessage={error} />}
       </ProfilePageContainer>
       <div className="flex items-center justify-center w-full">
         <div className="flex justify-end w-[50%]">

src/store/adminSlice.js

@@ -2,10 +2,10 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import axios from "axios";
 import { cleareStatus } from "./authHandler";
 
-// const userUrl = "http://localhost:3000/api/v1/admin";
+const userUrl = "http://localhost:3000/api/v1/admin";
 
-const userUrl =
-  "https://e-learning-backend-application.onrender.com/api/v1/admin";
+// const userUrl =
+//   "https://e-learning-backend-application.onrender.com/api/v1/admin";
 
 const initialState = {
   loading: false,

src/store/userSlice.js

@@ -4,11 +4,11 @@ import { toast } from "react-toastify";
 import { cleareStatus } from "./authHandler";
 
 //Bas URL
-// const authUrl = `http://localhost:3000/api/v1/auth`;
-// const userUrl = `http://localhost:3000/api/v1/users`;
+const authUrl = `http://localhost:3000/api/v1/auth`;
+const userUrl = `http://localhost:3000/api/v1/users`;
 
-const authUrl = `https://e-learning-backend-application.onrender.com/api/v1/auth`;
-const userUrl = `https://e-learning-backend-application.onrender.com/api/v1/users`;
+// const authUrl = `https://e-learning-backend-application.onrender.com/api/v1/auth`;
+// const userUrl = `https://e-learning-backend-application.onrender.com/api/v1/users`;
 
 //SignUp new user to the application
 export const signUp = createAsyncThunk(

src/utils/customFetch.js

@@ -4,5 +4,5 @@ const productionUrl =
   "https://e-learning-backend-application.onrender.com/api/v1";
 
 export const customFetch = axios.create({
-  baseURL: productionUrl,
+  baseURL: devURL,
 });