ENCOA-120: Prevented flicker when leaving page

src/dashboards/MasterCorporate.tsx

@@ -54,6 +54,7 @@ import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
 import MasterStatistical from "./MasterStatistical";
 import {futureAssignmentFilter, pastAssignmentFilter, archivedAssignmentFilter, activeAssignmentFilter} from "@/utils/assignments";
 import useUserBalance from "@/hooks/useUserBalance";
+import AssignmentsPage from "./views/AssignmentsPage";
 
 interface Props {
 	user: MasterCorporateUser;
@@ -298,8 +299,6 @@ export default function MasterCorporateDashboard({user}: Props) {
 	const [page, setPage] = useState("");
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
-	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
-	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
 	const [corporateAssignments, setCorporateAssignments] = useState<(Assignment & {corporate?: CorporateUser})[]>([]);
 
 	const {data: stats} = useFilterRecordsByUser<Stat[]>();
@@ -336,8 +335,8 @@ export default function MasterCorporateDashboard({user}: Props) {
 	const router = useRouter();
 
 	useEffect(() => {
-		setShowModal(!!selectedUser && page === "");
-	}, [selectedUser, page]);
+		setShowModal(!!selectedUser && router.asPath === "/");
+	}, [selectedUser, router.asPath]);
 
 	useEffect(() => {
 		setCorporateAssignments(
@@ -377,7 +376,7 @@ export default function MasterCorporateDashboard({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>
@@ -400,7 +399,7 @@ export default function MasterCorporateDashboard({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>
@@ -423,7 +422,7 @@ export default function MasterCorporateDashboard({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>
@@ -440,7 +439,7 @@ export default function MasterCorporateDashboard({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>
@@ -466,7 +465,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 			<>
 				<div className="w-full flex justify-between items-center">
 					<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>
@@ -483,129 +482,6 @@ export default function MasterCorporateDashboard({user}: Props) {
 		);
 	};
 
-	const AssignmentsPage = () => {
-		return (
-			<>
-				<AssignmentView
-					isOpen={!!selectedAssignment && !isCreatingAssignment}
-					onClose={() => {
-						setSelectedAssignment(undefined);
-						setIsCreatingAssignment(false);
-						reloadAssignments();
-					}}
-					assignment={selectedAssignment}
-				/>
-				<AssignmentCreator
-					assignment={selectedAssignment}
-					groups={assignmentsGroups}
-					users={assignmentsUsers}
-					isCreating={isCreatingAssignment}
-					cancelCreation={() => {
-						setIsCreatingAssignment(false);
-						setSelectedAssignment(undefined);
-						reloadAssignments();
-					}}
-				/>
-				<div className="w-full flex justify-between items-center">
-					<div
-						onClick={() => setPage("")}
-						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>
-					</div>
-					<div
-						onClick={reloadAssignments}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<span>Reload</span>
-						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
-					</div>
-				</div>
-				<div className="flex flex-col gap-2">
-					<span className="text-lg font-bold">Active Assignments Status</span>
-					<div className="flex items-center gap-4">
-						<span>
-							<b>Total:</b> {assignments.filter(activeAssignmentFilter).reduce((acc, curr) => acc + curr.results.length, 0)}/
-							{assignments.filter(activeAssignmentFilter).reduce((acc, curr) => curr.exams.length + acc, 0)}
-						</span>
-						{Object.keys(groupBy(corporateAssignments, (x) => x.corporate?.id)).map((x) => (
-							<div key={x}>
-								<span className="font-semibold">{getUserCompanyName(users.find((u) => u.id === x)!, users, groups)}: </span>
-								<span>
-									{groupBy(corporateAssignments, (x) => x.corporate?.id)[x].reduce((acc, curr) => curr.results.length + acc, 0)}/
-									{groupBy(corporateAssignments, (x) => x.corporate?.id)[x].reduce((acc, curr) => curr.exams.length + acc, 0)}
-								</span>
-							</div>
-						))}
-					</div>
-				</div>
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeAssignmentFilter).length})</h2>
-					<div className="flex flex-wrap gap-2">
-						{assignments.filter(activeAssignmentFilter).map((a) => (
-							<AssignmentCard {...a} users={users} onClick={() => setSelectedAssignment(a)} key={a.id} />
-						))}
-					</div>
-				</section>
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureAssignmentFilter).length})</h2>
-					<div className="flex flex-wrap gap-2">
-						<div
-							onClick={() => setIsCreatingAssignment(true)}
-							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
-							<BsPlus className="text-6xl" />
-							<span className="text-lg">New Assignment</span>
-						</div>
-						{assignments.filter(futureAssignmentFilter).map((a) => (
-							<AssignmentCard
-								{...a}
-								users={users}
-								onClick={() => {
-									setSelectedAssignment(a);
-									setIsCreatingAssignment(true);
-								}}
-								key={a.id}
-							/>
-						))}
-					</div>
-				</section>
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastAssignmentFilter).length})</h2>
-					<div className="flex flex-wrap gap-2">
-						{assignments.filter(pastAssignmentFilter).map((a) => (
-							<AssignmentCard
-								{...a}
-								users={users}
-								onClick={() => setSelectedAssignment(a)}
-								key={a.id}
-								allowDownload
-								reload={reloadAssignments}
-								allowArchive
-								allowExcelDownload
-							/>
-						))}
-					</div>
-				</section>
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})</h2>
-					<div className="flex flex-wrap gap-2">
-						{assignments.filter(archivedAssignmentFilter).map((a) => (
-							<AssignmentCard
-								{...a}
-								users={users}
-								onClick={() => setSelectedAssignment(a)}
-								key={a.id}
-								allowDownload
-								reload={reloadAssignments}
-								allowUnarchive
-								allowExcelDownload
-							/>
-						))}
-					</div>
-				</section>
-			</>
-		);
-	};
-
 	const masterCorporateUsers = useMemo(
 		() =>
 			masterCorporateUserGroups.reduce((accm: CorporateUser[], id) => {
@@ -621,7 +497,7 @@ export default function MasterCorporateDashboard({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>
@@ -637,14 +513,14 @@ export default function MasterCorporateDashboard({user}: Props) {
 		<>
 			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
 				<IconCard
-					onClick={() => setPage("students")}
+					onClick={() => router.push("/#students")}
 					Icon={BsPersonFill}
 					label="Students"
 					value={users.filter(studentFilter).length}
 					color="purple"
 				/>
 				<IconCard
-					onClick={() => setPage("teachers")}
+					onClick={() => router.push("/#teachers")}
 					Icon={BsPencilSquare}
 					label="Teachers"
 					value={users.filter(teacherFilter).length}
@@ -665,7 +541,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 					).toFixed(1)}
 					color="purple"
 				/>
-				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
+				<IconCard onClick={() => router.push("/#groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
 				<IconCard
 					Icon={BsPersonCheck}
 					label="User Balance"
@@ -683,25 +559,25 @@ export default function MasterCorporateDashboard({user}: Props) {
 					label="Corporate"
 					value={masterCorporateUserGroups.length}
 					color="purple"
-					onClick={() => setPage("corporate")}
+					onClick={() => router.push("/#corporate")}
 				/>
 				<IconCard
 					Icon={BsPersonFillGear}
 					label="Student Performance"
 					value={users.filter(studentFilter).length}
 					color="purple"
-					onClick={() => setPage("studentsPerformance")}
+					onClick={() => router.push("/#studentsPerformance")}
 				/>
 				<IconCard
 					Icon={BsDatabase}
 					label="Master Statistical"
 					// value={masterCorporateUserGroups.length}
 					color="purple"
-					onClick={() => setPage("statistical")}
+					onClick={() => router.push("/#statistical")}
 				/>
 				<button
 					disabled={isAssignmentsLoading}
-					onClick={() => setPage("assignments")}
+					onClick={() => router.push("/#assignments")}
 					className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
 					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
 					<span className="flex flex-col gap-1 items-center text-xl">
@@ -828,14 +704,24 @@ export default function MasterCorporateDashboard({user}: Props) {
 					)}
 				</>
 			</Modal>
-			{page === "students" && <StudentsList />}
-			{page === "teachers" && <TeachersList />}
-			{page === "groups" && <GroupsList />}
-			{page === "corporate" && <CorporateList />}
-			{page === "assignments" && <AssignmentsPage />}
-			{page === "studentsPerformance" && <StudentPerformancePage />}
-			{page === "statistical" && <MasterStatisticalPage />}
-			{page === "" && <DefaultDashboard />}
+			{router.asPath === "/#students" && <StudentsList />}
+			{router.asPath === "/#teachers" && <TeachersList />}
+			{router.asPath === "/#groups" && <GroupsList />}
+			{router.asPath === "/#corporate" && <CorporateList />}
+			{router.asPath === "/#assignments" && (
+				<AssignmentsPage
+					assignments={assignments}
+					corporateAssignments={corporateAssignments}
+					groups={assignmentsGroups}
+					users={assignmentsUsers}
+					reloadAssignments={reloadAssignments}
+					isLoading={isAssignmentsLoading}
+					onBack={() => router.push("/")}
+				/>
+			)}
+			{router.asPath === "/#studentsPerformance" && <StudentPerformancePage />}
+			{router.asPath === "/#statistical" && <MasterStatisticalPage />}
+			{router.asPath === "/" && <DefaultDashboard />}
 		</>
 	);
 }