devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ENCOA-120: Prevented flicker when leaving page

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-09-02 11:21:38 +01:00
parent 0b88d6bcd1
commit abcb1afd48
6 changed files with 278 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/dashboards/Admin.tsx
View File

@@ -45,8 +45,8 @@ export default function AdminDashboard({user}: Props) {
const router = useRouter();
useEffect(() => {
setShowModal(!!selectedUser && page === "");
}, [selectedUser, page]);
setShowModal(!!selectedUser && router.asPath === "/#");
}, [selectedUser, router.asPath]);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(reload, [page]);
@@ -87,7 +87,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -116,7 +116,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -138,7 +138,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -157,7 +157,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -179,7 +179,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -201,7 +201,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -223,7 +223,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -245,7 +245,7 @@ export default function AdminDashboard({user}: Props) {
renderHeader={(total) => (
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -262,7 +262,7 @@ export default function AdminDashboard({user}: Props) {
<>
<div className="flex flex-col gap-4">
<div
onClick={() => setPage("")}
onClick={() => router.push("/")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
<BsArrowLeft className="text-xl" />
<span>Back</span>
@@ -281,28 +281,28 @@ export default function AdminDashboard({user}: Props) {
Icon={BsPersonFill}
label="Students"
value={users.filter((x) => x.type === "student").length}
onClick={() => setPage("students")}
onClick={() => router.push("/#students")}
color="purple"
/>
<IconCard
Icon={BsPencilSquare}
label="Teachers"
value={users.filter((x) => x.type === "teacher").length}
onClick={() => setPage("teachers")}
onClick={() => router.push("/#teachers")}
color="purple"
/>
<IconCard
Icon={BsBank}
label="Corporate"
value={users.filter((x) => x.type === "corporate").length}
onClick={() => setPage("corporate")}
onClick={() => router.push("/#corporate")}
color="purple"
/>
<IconCard
Icon={BsBriefcaseFill}
label="Country Managers"
value={users.filter((x) => x.type === "agent").length}
onClick={() => setPage("agents")}
onClick={() => router.push("/#agents")}
color="purple"
/>
<IconCard
@@ -312,7 +312,7 @@ export default function AdminDashboard({user}: Props) {
color="purple"
/>
<IconCard
onClick={() => setPage("inactiveStudents")}
onClick={() => router.push("/#inactiveStudents")}
Icon={BsPersonFill}
label="Inactive Students"
value={
@@ -322,14 +322,14 @@ export default function AdminDashboard({user}: Props) {
color="rose"
/>
<IconCard
onClick={() => setPage("inactiveCountryManagers")}
onClick={() => router.push("/#inactiveCountryManagers")}
Icon={BsBriefcaseFill}
label="Inactive Country Managers"
value={users.filter(inactiveCountryManagerFilter).length}
color="rose"
/>
<IconCard
onClick={() => setPage("inactiveCorporate")}
onClick={() => router.push("/#inactiveCorporate")}
Icon={BsBank}
label="Inactive Corporate"
value={
@@ -338,9 +338,15 @@ export default function AdminDashboard({user}: Props) {
}
color="rose"
/>
<IconCard onClick={() => setPage("paymentdone")} Icon={BsCurrencyDollar} label="Payment Done" value={done.length} color="purple" />
<IconCard
onClick={() => setPage("paymentpending")}
onClick={() => router.push("/#paymentdone")}
Icon={BsCurrencyDollar}
label="Payment Done"
value={done.length}
color="purple"
/>
<IconCard
onClick={() => router.push("/#paymentpending")}
Icon={BsCurrencyDollar}
label="Pending Payment"
value={pending.length}
@@ -352,7 +358,12 @@ export default function AdminDashboard({user}: Props) {
label="Content Management System (CMS)"
color="green"
/>
<IconCard onClick={() => setPage("corporatestudentslevels")} Icon={BsPersonFill} label="Corporate Students Levels" color="purple" />
<IconCard
onClick={() => router.push("/#corporatestudentslevels")}
Icon={BsPersonFill}
label="Corporate Students Levels"
color="purple"
/>
</section>
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
@@ -598,17 +609,17 @@ export default function AdminDashboard({user}: Props) {
)}
</>
</Modal>
{page === "students" && <StudentsList />}
{page === "teachers" && <TeachersList />}
{page === "corporate" && <CorporateList />}
{page === "agents" && <AgentsList />}
{page === "inactiveStudents" && <InactiveStudentsList />}
{page === "inactiveCorporate" && <InactiveCorporateList />}
{page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
{page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
{page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
{page === "corporatestudentslevels" && <CorporateStudentsLevelsHelper />}
{page === "" && <DefaultDashboard />}
{router.asPath === "/#students" && <StudentsList />}
{router.asPath === "/#teachers" && <TeachersList />}
{router.asPath === "/#corporate" && <CorporateList />}
{router.asPath === "/#agents" && <AgentsList />}
{router.asPath === "/#inactiveStudents" && <InactiveStudentsList />}
{router.asPath === "/#inactiveCorporate" && <InactiveCorporateList />}
{router.asPath === "/#inactiveCountryManagers" && <InactiveCountryManagerList />}
{router.asPath === "/#paymentdone" && <CorporatePaidStatusList paid={true} />}
{router.asPath === "/#paymentpending" && <CorporatePaidStatusList paid={false} />}
{router.asPath === "/#corporatestudentslevels" && <CorporateStudentsLevelsHelper />}
{router.asPath === "/" && <DefaultDashboard />}
</>
);
}