From 38d357a7dbedc6aa09cbf80da0bc677073f9d395 Mon Sep 17 00:00:00 2001 From: Mohamed Ramadan Date: Tue, 28 May 2024 10:34:51 +0300 Subject: [PATCH] Refactor code to start using custom hooks. --- src/hooks/useFetchData.js | 9 ++- src/pages/userProfile/MyEnrolledCourses.jsx | 66 ++++++++------------- src/store/adminSlice.js | 6 +- src/store/userSlice.js | 8 +-- src/utils/customFetch.js | 2 +- 5 files changed, 38 insertions(+), 53 deletions(-) diff --git a/src/hooks/useFetchData.js b/src/hooks/useFetchData.js index ec107af..74a8147 100644 --- a/src/hooks/useFetchData.js +++ b/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); diff --git a/src/pages/userProfile/MyEnrolledCourses.jsx b/src/pages/userProfile/MyEnrolledCourses.jsx index 3528439..af725c4 100644 --- a/src/pages/userProfile/MyEnrolledCourses.jsx +++ b/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 ( <> - {courses.length > 0 && ( + {data.length > 0 && (
- {courses && - courses.map((course) => ( + {data && + data.map((course) => ( ))}
)} - {/* No courses display centerd text */} - {courses.length === 0 && ( + + {data.length === 0 && !loading && ( { )} {/* Loading spinner */} - {loading && } - {error && !error && } + {error && !loading && }
diff --git a/src/store/adminSlice.js b/src/store/adminSlice.js index fdc1898..ed1b6f1 100644 --- a/src/store/adminSlice.js +++ b/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, diff --git a/src/store/userSlice.js b/src/store/userSlice.js index e56637a..062bd91 100644 --- a/src/store/userSlice.js +++ b/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( diff --git a/src/utils/customFetch.js b/src/utils/customFetch.js index 6f3b98f..4d108a8 100644 --- a/src/utils/customFetch.js +++ b/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, });