Changed the totals of the admin pretty much

src/dashboards/Admin.tsx

@@ -31,12 +31,40 @@ interface Props {
 	user: User;
 }
 
+const studentHash = {
+	type: "student",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
+const teacherHash = {
+	type: "teacher",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
+const corporateHash = {
+	type: "corporate",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
+const agentsHash = {
+	type: "agent",
+	size: 25,
+	orderBy: "registrationDate",
+};
+
 export default function AdminDashboard({user}: Props) {
 	const [page, setPage] = useState("");
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
 
-	const {users, reload, isLoading} = useUsers();
+	const {users: students, total: totalStudents, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(studentHash);
+	const {users: teachers, total: totalTeachers, reload: reloadTeachers, isLoading: isTeachersLoading} = useUsers(teacherHash);
+	const {users: corporates, total: totalCorporate, reload: reloadCorporates, isLoading: isCorporatesLoading} = useUsers(corporateHash);
+	const {users: agents, total: totalAgents, reload: reloadAgents, isLoading: isAgentsLoading} = useUsers(corporateHash);
+
 	const {groups} = useGroups({});
 	const {pending, done} = usePaymentStatusUsers();
 
@@ -47,9 +75,6 @@ export default function AdminDashboard({user}: Props) {
 		setShowModal(!!selectedUser && router.asPath === "/#");
 	}, [selectedUser, router.asPath]);
 
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect(reload, [page]);
-
 	const inactiveCountryManagerFilter = (x: User) => x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate);
 
 	const UserDisplay = (displayUser: User) => (
@@ -279,50 +304,50 @@ export default function AdminDashboard({user}: Props) {
 			<section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
 				<IconCard
 					Icon={BsPersonFill}
-					isLoading={isLoading}
+					isLoading={isStudentsLoading}
 					label="Students"
-					value={users.filter((x) => x.type === "student").length}
+					value={totalStudents}
 					onClick={() => router.push("/#students")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsPencilSquare}
-					isLoading={isLoading}
+					isLoading={isTeachersLoading}
 					label="Teachers"
-					value={users.filter((x) => x.type === "teacher").length}
+					value={totalTeachers}
 					onClick={() => router.push("/#teachers")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsBank}
-					isLoading={isLoading}
+					isLoading={isCorporatesLoading}
 					label="Corporate"
-					value={users.filter((x) => x.type === "corporate").length}
+					value={totalCorporate}
 					onClick={() => router.push("/#corporate")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsBriefcaseFill}
-					isLoading={isLoading}
+					isLoading={isAgentsLoading}
 					label="Country Managers"
-					value={users.filter((x) => x.type === "agent").length}
+					value={totalAgents}
 					onClick={() => router.push("/#agents")}
 					color="purple"
 				/>
 				<IconCard
 					Icon={BsGlobeCentralSouthAsia}
-					isLoading={isLoading}
+					isLoading={isAgentsLoading}
 					label="Countries"
-					value={[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
+					value={[...new Set(agents.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
 					color="purple"
 				/>
 				<IconCard
 					onClick={() => router.push("/#inactiveStudents")}
 					Icon={BsPersonFill}
-					isLoading={isLoading}
+					isLoading={isStudentsLoading}
 					label="Inactive Students"
 					value={
-						users.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
+						students.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
 							.length
 					}
 					color="rose"
@@ -330,26 +355,26 @@ export default function AdminDashboard({user}: Props) {
 				<IconCard
 					onClick={() => router.push("/#inactiveCountryManagers")}
 					Icon={BsBriefcaseFill}
-					isLoading={isLoading}
+					isLoading={isAgentsLoading}
 					label="Inactive Country Managers"
-					value={users.filter(inactiveCountryManagerFilter).length}
+					value={agents.filter(inactiveCountryManagerFilter).length}
 					color="rose"
 				/>
 				<IconCard
 					onClick={() => router.push("/#inactiveCorporate")}
 					Icon={BsBank}
-					isLoading={isLoading}
+					isLoading={isCorporatesLoading}
 					label="Inactive Corporate"
 					value={
-						users.filter((x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
-							.length
+						corporates.filter(
+							(x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)),
+						).length
 					}
 					color="rose"
 				/>
 				<IconCard
 					onClick={() => router.push("/#paymentdone")}
 					Icon={BsCurrencyDollar}
-					isLoading={isLoading}
 					label="Payment Done"
 					value={done.length}
 					color="purple"
@@ -357,7 +382,6 @@ export default function AdminDashboard({user}: Props) {
 				<IconCard
 					onClick={() => router.push("/#paymentpending")}
 					Icon={BsCurrencyDollar}
-					isLoading={isLoading}
 					label="Pending Payment"
 					value={pending.length}
 					color="rose"
@@ -365,14 +389,13 @@ export default function AdminDashboard({user}: Props) {
 				<IconCard
 					onClick={() => router.push("https://cms.encoach.com/admin")}
 					Icon={BsLayoutSidebar}
-					isLoading={isLoading}
 					label="Content Management System (CMS)"
 					color="green"
 				/>
 				<IconCard
 					onClick={() => router.push("/#corporatestudentslevels")}
 					Icon={BsPersonFill}
-					isLoading={isLoading}
+					isLoading={isStudentsLoading}
 					label="Corporate Students Levels"
 					color="purple"
 				/>
@@ -382,8 +405,7 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "student")
+						{students
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -393,8 +415,7 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "teacher")
+						{teachers
 							.sort((a, b) => {
 								return dateSorter(a, b, "desc", "registrationDate");
 							})
@@ -406,8 +427,7 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "corporate")
+						{corporates
 							.sort((a, b) => {
 								return dateSorter(a, b, "desc", "registrationDate");
 							})
@@ -419,8 +439,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Unpaid Corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter((x) => x.type === "corporate" && x.status === "paymentDue")
+						{corporates
+							.filter((x) => x.status === "paymentDue")
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -429,10 +449,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Students expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{students
 							.filter(
 								(x) =>
-									x.type === "student" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -445,10 +464,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Teachers expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{teachers
 							.filter(
 								(x) =>
-									x.type === "teacher" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -461,10 +479,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Country Manager expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{agents
 							.filter(
 								(x) =>
-									x.type === "agent" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -477,10 +494,9 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Corporate expiring in 1 month</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
+						{corporates
 							.filter(
 								(x) =>
-									x.type === "corporate" &&
 									x.subscriptionExpirationDate &&
 									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
 									moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -493,10 +509,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) => x.type === "student" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{students
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -505,10 +519,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) => x.type === "teacher" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{teachers
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -517,10 +529,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Country Manager</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) => x.type === "agent" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{agents
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -529,11 +539,8 @@ export default function AdminDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Expired Corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(
-								(x) =>
-									x.type === "corporate" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
-							)
+						{corporates
+							.filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
@@ -553,7 +560,10 @@ export default function AdminDashboard({user}: Props) {
 								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
-									if (shouldReload) reload();
+									if (shouldReload && selectedUser!.type === "student") reloadStudents();
+									if (shouldReload && selectedUser!.type === "teacher") reloadTeachers();
+									if (shouldReload && selectedUser!.type === "corporate") reloadCorporates();
+									if (shouldReload && selectedUser!.type === "agent") reloadAgents();
 								}}
 								onViewStudents={
 									selectedUser.type === "corporate" || selectedUser.type === "teacher"