Show the Company Name of the Teachers and students that are linked in the User List View

src/pages/(admin)/Lists/UserList.tsx

@@ -21,9 +21,43 @@ import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
 import {isCorporateUser} from "@/resources/user";
 import {useListSearch} from "@/hooks/useListSearch";
+import {getUserCorporate} from "@/utils/groups";
+import {asyncSorter} from "@/utils";
 
 const columnHelper = createColumnHelper<User>();
 const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
+
+const getCompanyName = async (user: User) => {
+	if (isCorporateUser(user)) {
+		return user.corporateInformation?.companyInformation?.name;
+	}
+
+	if (isAgentUser(user)) {
+		return user.agentInformation.companyName;
+	}
+
+	if (user.type === "teacher" || user.type === "student") {
+		const userCorporate = await getUserCorporate(user.id);
+		return userCorporate?.corporateInformation?.companyInformation.name || "";
+	}
+
+	return "";
+};
+
+const CompanyNameCell = (user: User) => {
+	const [companyName, setCompanyName] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	useEffect(() => {
+		setIsLoading(true);
+		getCompanyName(user)
+			.then((result) => setCompanyName(result))
+			.finally(() => setIsLoading(false));
+	}, [user]);
+
+	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
+};
+
 export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
 	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
@@ -47,16 +81,20 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 	};
 
 	useEffect(() => {
-		if (user && users) {
-			const filterUsers =
-				user.type === "corporate" || user.type === "teacher"
-					? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
-					: users;
+		(async () => {
+			if (user && users) {
+				const filterUsers =
+					user.type === "corporate" || user.type === "teacher"
+						? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
+						: users;
 
-			const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
+				const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
+				const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);
+				console.log(sortedUsers);
 
-			setDisplayUsers([...filteredUsers.sort(sortFunction)]);
-		}
+				setDisplayUsers([...sortedUsers]);
+			}
+		})();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [user, users, sorter, groups]);
 
@@ -334,7 +372,7 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 					<SorterArrow name="companyName" />
 				</button>
 			) as any,
-			cell: (info) => getCompanyName(info.row.original),
+			cell: (info) => <CompanyNameCell {...info.row.original} />,
 		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
@@ -389,18 +427,7 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		return undefined;
 	};
 
-	const getCompanyName = (user: User) => {
-		if (isCorporateUser(user)) {
-			return user.corporateInformation?.companyInformation?.name;
-		}
-		if (isAgentUser(user)) {
-			return user.agentInformation.companyName;
-		}
-
-		return "";
-	};
-
-	const sortFunction = (a: User, b: User) => {
+	const sortFunction = async (a: User, b: User) => {
 		if (sorter === "name" || sorter === reverseString("name"))
 			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
@@ -468,8 +495,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		}
 
 		if (sorter === "companyName" || sorter === reverseString("companyName")) {
-			const aCorporateName = getCompanyName(a);
-			const bCorporateName = getCompanyName(b);
+			const aCorporateName = await getCompanyName(a);
+			const bCorporateName = await getCompanyName(b);
 			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
 			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
 			if (!aCorporateName && !bCorporateName) return 0;

src/utils/index.ts

@@ -9,6 +9,24 @@ export function dateSorter(a: any, b: any, direction: "asc" | "desc", key: strin
 	return 0;
 }
 
+export async function asyncSorter<T>(array: T[], sorterFunction: (a: T, b: T) => Promise<number>): Promise<T[]> {
+	let swapped = false;
+	do {
+		swapped = false;
+		for (let i = 0; i < array.length - 1; i++) {
+			const result = await sorterFunction(array[i], array[i + 1]);
+			if (result < 0) {
+				const aux = array[i + 1];
+				array[i + 1] = array[i];
+				array[i] = aux;
+				swapped = true;
+			}
+		}
+	} while (swapped);
+
+	return array;
+}
+
 export function env(key: string) {
 	return (window as any).__ENV[key];
 }