Refactor most getServerProps to fetch independent request in parallel and projected the data only to return the necessary fields and changed some functions

src/pages/settings.tsx

@@ -13,169 +13,256 @@ import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import { useState } from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/components/IconCard";
-import { BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill } from "react-icons/bs";
+import {
+  BsCode,
+  BsCodeSquare,
+  BsGearFill,
+  BsPeopleFill,
+  BsPersonFill,
+} from "react-icons/bs";
 import UserCreator from "./(admin)/UserCreator";
 import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
 import { CEFR_STEPS } from "@/resources/grading";
 import { User } from "@/interfaces/user";
 import { getUserPermissions } from "@/utils/permissions.be";
-import {  PermissionType } from "@/interfaces/permissions";
+import { PermissionType } from "@/interfaces/permissions";
 import { getUsers } from "@/utils/users.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { mapBy, serialize, redirect } from "@/utils";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { requestUser } from "@/utils/api";
 import { isAdmin } from "@/utils/users";
-import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
+import {
+  getGradingSystemByEntities,
+  getGradingSystemByEntity,
+} from "@/utils/grading.be";
 import { Grading } from "@/interfaces";
 import { useRouter } from "next/router";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
-		return redirect("/")
+  if (
+    shouldRedirectHome(user) ||
+    !checkAccess(user, [
+      "admin",
+      "developer",
+      "corporate",
+      "teacher",
+      "mastercorporate",
+    ])
+  )
+    return redirect("/");
+  const [permissions, entities, allUsers] = await Promise.all([
+    getUserPermissions(user.id),
+    isAdmin(user)
+      ? await getEntitiesWithRoles()
+      : await getEntitiesWithRoles(mapBy(user.entities, "id")),
+    getUsers(),
+  ]);
+  const gradingSystems = await getGradingSystemByEntities(
+    mapBy(entities, "id")
+  );
+  const entitiesGrading = entities.map(
+    (e) =>
+      gradingSystems.find((g) => g.entity === e.id) || {
+        entity: e.id,
+        steps: CEFR_STEPS,
+      }
+  );
 
-	const permissions = await getUserPermissions(user.id);
-	const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
-	const allUsers = await getUsers()
-	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
-	const entitiesGrading = entities.map(e => gradingSystems.find(g => g.entity === e.id) || { entity: e.id, steps: CEFR_STEPS })
-
-	return {
-		props: serialize({ user, permissions, entities, allUsers, entitiesGrading }),
-	};
+  return {
+    props: serialize({
+      user,
+      permissions,
+      entities,
+      allUsers,
+      entitiesGrading,
+    }),
+  };
 }, sessionOptions);
 
 interface Props {
-	user: User;
-	permissions: PermissionType[];
-	entities: EntityWithRoles[];
-	allUsers: User[]
-	entitiesGrading: Grading[]
+  user: User;
+  permissions: PermissionType[];
+  entities: EntityWithRoles[];
+  allUsers: User[];
+  entitiesGrading: Grading[];
 }
 
-export default function Admin({ user, entities, permissions, allUsers, entitiesGrading }: Props) {
-	const [modalOpen, setModalOpen] = useState<string>();
-	const router = useRouter()
+export default function Admin({
+  user,
+  entities,
+  permissions,
+  allUsers,
+  entitiesGrading,
+}: Props) {
+  const [modalOpen, setModalOpen] = useState<string>();
+  const router = useRouter();
 
-	const entitiesAllowCreateUser = useAllowedEntities(user, entities, 'create_user')
-	const entitiesAllowCreateUsers = useAllowedEntities(user, entities, 'create_user_batch')
-	const entitiesAllowCreateCode = useAllowedEntities(user, entities, 'create_code')
-	const entitiesAllowCreateCodes = useAllowedEntities(user, entities, 'create_code_batch')
-	const entitiesAllowEditGrading = useAllowedEntities(user, entities, 'edit_grading_system')
+  const entitiesAllowCreateUser = useAllowedEntities(
+    user,
+    entities,
+    "create_user"
+  );
+  const entitiesAllowCreateUsers = useAllowedEntities(
+    user,
+    entities,
+    "create_user_batch"
+  );
+  const entitiesAllowCreateCode = useAllowedEntities(
+    user,
+    entities,
+    "create_code"
+  );
+  const entitiesAllowCreateCodes = useAllowedEntities(
+    user,
+    entities,
+    "create_code_batch"
+  );
+  const entitiesAllowEditGrading = useAllowedEntities(
+    user,
+    entities,
+    "edit_grading_system"
+  );
 
-	return (
-		<>
-			<Head>
-				<title>Settings Panel | EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			<>
-				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
-					<BatchCreateUser
-						user={user}
-						entities={entitiesAllowCreateUser}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
-					<BatchCodeGenerator
-						entities={entitiesAllowCreateCodes}
-						user={user}
-						users={allUsers}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
-					<CodeGenerator
-						entities={entitiesAllowCreateCode}
-						user={user}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
-					<UserCreator
-						user={user}
-						entities={entitiesAllowCreateUsers}
-						users={allUsers}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
-					<CorporateGradingSystem
-						user={user}
-						entitiesGrading={entitiesGrading}
-						entities={entitiesAllowEditGrading}
-						mutate={() => router.replace(router.asPath)}
-					/>
-				</Modal>
+  return (
+    <>
+      <Head>
+        <title>Settings Panel | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      <>
+        <Modal
+          isOpen={modalOpen === "batchCreateUser"}
+          onClose={() => setModalOpen(undefined)}
+          maxWidth="max-w-[85%]"
+        >
+          <BatchCreateUser
+            user={user}
+            entities={entitiesAllowCreateUser}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "batchCreateCode"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <BatchCodeGenerator
+            entities={entitiesAllowCreateCodes}
+            user={user}
+            users={allUsers}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "createCode"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <CodeGenerator
+            entities={entitiesAllowCreateCode}
+            user={user}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "createUser"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <UserCreator
+            user={user}
+            entities={entitiesAllowCreateUsers}
+            users={allUsers}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "gradingSystem"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <CorporateGradingSystem
+            user={user}
+            entitiesGrading={entitiesGrading}
+            entities={entitiesAllowEditGrading}
+            mutate={() => router.replace(router.asPath)}
+          />
+        </Modal>
 
-				<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
-					<ExamLoader />
-					{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
-						<div className="w-full grid grid-cols-2 gap-4">
-							<IconCard
-								Icon={BsCode}
-								label="Generate Single Code"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("createCode")}
-								disabled={entitiesAllowCreateCode.length === 0}
-							/>
-							<IconCard
-								Icon={BsCodeSquare}
-								label="Generate Codes in Batch"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("batchCreateCode")}
-								disabled={entitiesAllowCreateCodes.length === 0}
-							/>
-							<IconCard
-								Icon={BsPersonFill}
-								label="Create Single User"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("createUser")}
-								disabled={entitiesAllowCreateUser.length === 0}
-							/>
-							<IconCard
-								Icon={BsPeopleFill}
-								label="Create Users in Batch"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("batchCreateUser")}
-								disabled={entitiesAllowCreateUsers.length === 0}
-							/>
-							{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
-								<IconCard
-									Icon={BsGearFill}
-									label="Grading System"
-									color="purple"
-									className="w-full h-full col-span-2"
-									onClick={() => setModalOpen("gradingSystem")}
-									disabled={entitiesAllowEditGrading.length === 0}
-								/>
-							)}
-						</div>
-					)}
-				</section>
-				<section className="w-full">
-					<Lists user={user} entities={entities} permissions={permissions} />
-				</section>
-			</>
-		</>
-	);
+        <section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
+          <ExamLoader />
+          {checkAccess(
+            user,
+            getTypesOfUser(["teacher"]),
+            permissions,
+            "viewCodes"
+          ) && (
+            <div className="w-full grid grid-cols-2 gap-4">
+              <IconCard
+                Icon={BsCode}
+                label="Generate Single Code"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("createCode")}
+                disabled={entitiesAllowCreateCode.length === 0}
+              />
+              <IconCard
+                Icon={BsCodeSquare}
+                label="Generate Codes in Batch"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("batchCreateCode")}
+                disabled={entitiesAllowCreateCodes.length === 0}
+              />
+              <IconCard
+                Icon={BsPersonFill}
+                label="Create Single User"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("createUser")}
+                disabled={entitiesAllowCreateUser.length === 0}
+              />
+              <IconCard
+                Icon={BsPeopleFill}
+                label="Create Users in Batch"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("batchCreateUser")}
+                disabled={entitiesAllowCreateUsers.length === 0}
+              />
+              {checkAccess(user, [
+                "admin",
+                "corporate",
+                "developer",
+                "mastercorporate",
+              ]) && (
+                <IconCard
+                  Icon={BsGearFill}
+                  label="Grading System"
+                  color="purple"
+                  className="w-full h-full col-span-2"
+                  onClick={() => setModalOpen("gradingSystem")}
+                  disabled={entitiesAllowEditGrading.length === 0}
+                />
+              )}
+            </div>
+          )}
+        </section>
+        <section className="w-full">
+          <Lists user={user} entities={entities} permissions={permissions} />
+        </section>
+      </>
+    </>
+  );
 }