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/permissions/[id].tsx

@@ -7,7 +7,7 @@ import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { Permission, PermissionType } from "@/interfaces/permissions";
 import { getPermissionDoc } from "@/utils/permissions.be";
 import { User } from "@/interfaces/user";
-import  { LayoutContext } from "@/components/High/Layout";
+import { LayoutContext } from "@/components/High/Layout";
 import { getUsers } from "@/utils/users.be";
 import { BsTrash } from "react-icons/bs";
 import Select from "@/components/Low/Select";
@@ -18,6 +18,7 @@ import { Type as UserType } from "@/interfaces/user";
 import { getGroups } from "@/utils/groups.be";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
+import { G } from "@react-pdf/renderer";
 interface BasicUser {
   id: string;
   name: string;
@@ -40,31 +41,25 @@ export const getServerSideProps = withIronSessionSsr(
     if (!params?.id) return redirect("/permissions");
 
     // Fetch data from external API
-    const permission: Permission = await getPermissionDoc(params.id as string);
-
-    const allUserData: User[] = await getUsers();
-    const groups = await getGroups();
+    const [permission, users, groups] = await Promise.all([
+      getPermissionDoc(params.id as string),
+      getUsers({}, 0, {}, { _id: 0, id: 1, name: 1, type: 1 }),
+      getGroups(),
+    ]);
 
     const userGroups = groups.filter((x) => x.admin === user.id);
+    const userGroupsParticipants = userGroups.flatMap((x) => x.participants);
     const filteredGroups =
       user.type === "corporate"
         ? userGroups
         : user.type === "mastercorporate"
-        ? groups.filter((x) =>
-            userGroups.flatMap((y) => y.participants).includes(x.admin)
-          )
+        ? groups.filter((x) => userGroupsParticipants.includes(x.admin))
         : groups;
-
-    const users = allUserData.map((u) => ({
-      id: u.id,
-      name: u.name,
-      type: u.type,
-    })) as BasicUser[];
-
+    const filteredGroupsParticipants = filteredGroups.flatMap(
+      (g) => g.participants
+    );
     const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
-      ? users.filter((u) =>
-          filteredGroups.flatMap((g) => g.participants).includes(u.id)
-        )
+      ? users.filter((u) => filteredGroupsParticipants.includes(u.id))
       : users;
 
     // const res = await fetch("api/permissions");
@@ -158,12 +153,14 @@ export default function Page(props: Props) {
           <div className="flex gap-3">
             <Select
               value={null}
-              options={users
-                .filter((u) => !selectedUsers.includes(u.id))
-                .map((u) => ({
-                  label: `${u?.type}-${u?.name}`,
-                  value: u.id,
-                }))}
+              options={users.reduce<{ label: string; value: string }[]>(
+                (acc, u) => {
+                  if (!selectedUsers.includes(u.id))
+                    acc.push({ label: `${u?.type}-${u?.name}`, value: u.id });
+                  return acc;
+                },
+                []
+              )}
               onChange={onChange}
             />
             <Button onClick={update}>Update</Button>
@@ -195,9 +192,8 @@ export default function Page(props: Props) {
             <div className="flex flex-col gap-3">
               <h2>Whitelisted Users</h2>
               <div className="flex flex-col gap-3 flex-wrap">
-                {users
-                  .filter((user) => !selectedUsers.includes(user.id))
-                  .map((user) => {
+                {users.map((user) => {
+                  if (!selectedUsers.includes(user.id))
                     return (
                       <div
                         className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
@@ -208,7 +204,8 @@ export default function Page(props: Props) {
                         </span>
                       </div>
                     );
-                  })}
+                  return null;
+                })}
               </div>
             </div>
           </div>