Skip to content

Commit

Permalink
refactor remain part of admin dashboard to use customHook to fetch th…
Browse files Browse the repository at this point in the history 
…e dat from the server.
  • Loading branch information
@Mohamed-Ramadan1
Mohamed-Ramadan1 committed May 29, 2024
1 parent 1c3d06f commit b239bbe
Show file tree
Hide file tree
Showing 8 changed files with 231 additions and 462 deletions.
1 change: 1 addition & 0 deletions src/pages/dashboard/FreeCourses.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ function FreeCourses() {
}
);
useEffect(() => {
setIsChanged(false);
fetchData();
}, [token, currentPage, itemsPerPage, isChanged]);

Expand Down
98 changes: 32 additions & 66 deletions src/pages/dashboard/Instructors.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,99 +8,65 @@ import {
InstructorElement,
InstructorTableHeader,
Pagination,
LoadingWhile,
Error,
NotFoundData,
} from "../../components";
import useFetchData from "../../hooks/useFetchData";

const Instructors = () => {
const [instructors, setInstructors] = useState([]);
const [loading, setLoading] = useState(true);
const [isChanged, setIsChanged] = useState(false);

const { token } = useSelector((state) => state.userReducers);

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/getAllInstructors",
{
headers: {
Authorization: `Bearer ${token}`,
},
params: {
page: currentPage,
limit: itemsPerPage,
sort: "-createdAt",
},
requestedData: "instructors",
}
);
useEffect(() => {
setIsChanged(false);
const fetchInstructors = async () => {
setLoading(true);
try {
const response = await customFetch.get("admin/getAllInstructors", {
headers: {
Authorization: `Bearer ${token}`,
},
params: {
page: currentPage,
limit: itemsPerPage,
},
});
const fetchedInstructors = response.data.data.instructors;

if (fetchedInstructors) {
setInstructors(fetchedInstructors);
setIsMorePages(fetchedInstructors.length === itemsPerPage);
} else {
setInstructors([]);
setIsMorePages(false);
}

setLoading(false);
} catch (error) {
console.error(error);
setLoading(false);
}
};
fetchInstructors();
fetchData();
}, [token, isChanged, currentPage, itemsPerPage]);

const prevPage = () => {
if (currentPage > 1) {
setCurrentPage((prev) => prev - 1);
}
};

const nextPage = () => {
if (isMorePages) {
setCurrentPage((prev) => prev + 1);
}
};

return (
<div className="p-5">
<PageIntro pageName="Instructors" />
<PageContainer tableHeader="Instructors">
<InstructorTableHeader />
{loading && <LoadingWhile />}

{loading ? (
<tr>
<td colSpan="10" className="text-center p-5 text-3xl">
Loading........
</td>
</tr>
) : instructors.length > 0 ? (
instructors.map((instructor, index) => (
{!loading &&
data.length > 0 &&
data.map((instructor, index) => (
<InstructorElement
key={instructor._id}
index={index + 1 + (currentPage - 1) * itemsPerPage}
instructor={instructor}
token={token}
setIsChanged={setIsChanged}
/>
))
) : (
<tr>
<td colSpan="10" className="text-center p-5 text-3xl">
No Instructors Found
</td>
</tr>
))}

{!loading && data.length === 0 && (
<NotFoundData message={"No instructors 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>
);
Expand Down
101 changes: 31 additions & 70 deletions src/pages/dashboard/ManageBlogs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,102 +8,63 @@ import {
BlogsTableHeader,
Pagination,
BlogELement,
LoadingWhile,
Error,
NotFoundData,
} from "../../components";
import useFetchData from "../../hooks/useFetchData";

const ManageBlogs = () => {
const { token } = useSelector((state) => state.userReducers);
const [blogs, setBlogs] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [isChanged, setIsChanged] = useState(false);

const [itemsPerPage, setItemsPerPage] = useState(6);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(3);
const [isMorePages, setIsMorePages] = useState(false);

const [isChanged, setIsChanged] = useState(false);
const { data, loading, error, isMorePages, fetchData } = useFetchData(
"/admin/getAllBlogs",
{
headers: {
Authorization: `Bearer ${token}`,
},
params: {
page: currentPage,
limit: itemsPerPage,
sort: "-createdAt",
},
requestedData: "blogs",
}
);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
setError(null);
try {
const res = await customFetch.get("admin/getAllBlogs", {
headers: {
Authorization: `Bearer ${token}`,
},
params: {
page: currentPage,
limit: itemsPerPage,
},
});

const fetchedBlogs = res.data.data.blogs;

if (fetchedBlogs.length === 0) {
setBlogs([]);
} else {
setBlogs(fetchedBlogs);
setIsMorePages(fetchedBlogs.length === itemsPerPage);
}
} catch (error) {
setError(error.message || "Failed to fetch blogs");
} finally {
setLoading(false);
setIsChanged(false);
}
};

fetchData();
}, [token, isChanged, currentPage, itemsPerPage]);

const prevPage = () => {
if (currentPage > 1) {
setCurrentPage((prev) => prev - 1);
}
};

const nextPage = () => {
if (isMorePages) {
setCurrentPage((prev) => prev + 1);
}
};

return (
<div className="p-5">
<PageIntro pageName="Blogs" />
<PageContainer tableHeader="Blogs">
<BlogsTableHeader />

{loading ? (
<div className="flex justify-center items-center h-10">
<p className="text-2xl font-semibold">Loading...</p>
</div>
) : error ? (
<div className="flex justify-center items-center h-10">
<p className="text-2xl font-semibold text-red-500">{error}</p>
</div>
) : blogs.length > 0 ? (
blogs.map((blog, index) => (
{loading && <LoadingWhile />}
{!loading &&
data.length > 0 &&
data.map((blog, index) => (
<BlogELement
key={blog._id}
blog={blog}
index={index + 1 + (currentPage - 1) * itemsPerPage}
token={token}
setIsChanged={setIsChanged}
/>
))
) : (
<tr>
<td colSpan="10" className="text-center p-5 text-3xl">
No blogs found
</td>
</tr>
))}

{!loading && data.length === 0 && (
<NotFoundData message={"No Blogs 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>
);
Expand Down
Loading

0 comments on commit b239bbe

Please sign in to comment.