Show only users in find-the-expert if they selected that role (#137)

* Show only users in find-the-expert if they selected that role

* Add fallback binary target

prisma/schema.prisma

@@ -1,6 +1,6 @@
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "debian-openssl-3.0.x"]
+  binaryTargets = ["native", "debian-openssl-1.1.x", "debian-openssl-3.0.x"]
 }
 
 datasource db {

src/app/find-the-expert/[role]/page.tsx

@@ -1,19 +1,16 @@
 import type { Metadata } from "next";
 import type { Session } from "next-auth";
+
 import { Suspense } from "react";
 import { ShowRolesWrapper } from "~/app/result/[role]/page";
 import ButtonSkeleton from "~/components/loading/button-loader";
 import { Login } from "~/components/login";
 import ShowDataTable from "~/components/show-data-table";
 import { getServerAuthSession } from "~/server/auth";
 import {
-  aggregateDataByRole,
-  createUserAndAnswerMaps,
   extractUniqueIds,
   fetchUserAnswersForRole,
   fetchUsersAndAnswerOptions,
-  groupDataByRoleAndQuestion,
-  sortResults,
 } from "~/utils/data-manipulation";
 
 export const metadata: Metadata = {
@@ -63,26 +60,12 @@ const ShowTableWrapper = async () => {
     userIds,
     answerIds,
   );
-  const { userMap, answerOptionMap } = createUserAndAnswerMaps(
-    users,
-    answerOptions,
-  );
-  const dataByRoleAndQuestion = groupDataByRoleAndQuestion(
-    userAnswersForRole,
-    userMap,
-    answerOptionMap,
-  );
-  const aggregatedDataByRole = aggregateDataByRole(
-    userAnswersForRole,
-    userMap,
-    answerOptionMap,
-  );
-  sortResults(aggregatedDataByRole);
 
   return (
     <ShowDataTable
-      dataByRoleAndQuestion={dataByRoleAndQuestion}
-      aggregatedDataByRole={aggregatedDataByRole}
+      userAnswersForRole={userAnswersForRole}
+      users={users}
+      answerOptions={answerOptions}
     />
   );
 };

src/app/layout.tsx

@@ -16,7 +16,6 @@ import { Button } from "~/components/ui/button";
 import { ArrowLeftDarkModeFriendly } from "~/components/svg";
 import Link from "next/link";
 import { headers } from "next/headers";
-import { Github } from "lucide-react";
 import GithubLink from "~/components/github-link";
 
 const inter = Inter({

src/components/show-data-table.tsx

@@ -1,5 +1,5 @@
 "use client";
-
+import type { $Enums } from "@prisma/client";
 import React from "react";
 import { slugify } from "~/utils/slugify";
 import {
@@ -10,32 +10,63 @@ import {
 import type { ColumnDef } from "@tanstack/react-table";
 import { DataTable } from "./data-table";
 import { usePathname } from "next/navigation";
+import {
+  aggregateDataByRole,
+  createUserAndAnswerMaps,
+  groupDataByRoleAndQuestion,
+  sortResults,
+} from "~/utils/client-data-manipulation";
+import type { UserAnswersForRoleArray } from "~/models/types";
 
-type ShowDataTableProps = {
-  dataByRoleAndQuestion: Record<
-    string,
-    Record<string, { name: string; email: string; answer: string }[]>
-  >;
-  aggregatedDataByRole: Record<
-    string,
-    Record<
-      string,
-      {
-        name: string;
-        communicationPreferences: string[];
-        counts: number[];
-      }
-    >
-  >;
-};
-
-const ShowDataTable: React.FC<ShowDataTableProps> = ({
-  dataByRoleAndQuestion,
-  aggregatedDataByRole,
+const ShowDataTable = ({
+  userAnswersForRole,
+  users,
+  answerOptions,
+}: {
+  userAnswersForRole: UserAnswersForRoleArray;
+  users: {
+    name: string | null;
+    id: string;
+    roles: {
+      id: string;
+      role: string;
+      default: boolean;
+    }[];
+    email: string | null;
+    communicationPreferences: {
+      id: string;
+      userId: string;
+      methods: $Enums.CommunicationMethod[];
+    }[];
+  }[];
+  answerOptions: { id: string; option: number }[];
 }) => {
   const pathname = usePathname();
 
   const currentRole = pathname.split("/").pop();
+
+  const usersForRole: typeof users = users.filter((user) =>
+    user.roles.some((role) => slugify(role.role) === currentRole),
+  );
+
+  const { userMap, answerOptionMap } = createUserAndAnswerMaps(
+    usersForRole,
+    answerOptions,
+  );
+
+  const dataByRoleAndQuestion = groupDataByRoleAndQuestion(
+    userAnswersForRole,
+    userMap,
+    answerOptionMap,
+  );
+
+  const aggregatedDataByRole = aggregateDataByRole(
+    userAnswersForRole,
+    userMap,
+    answerOptionMap,
+  );
+  sortResults(aggregatedDataByRole);
+
   return (
     <>
       {Object.keys(dataByRoleAndQuestion).length === 0 ? (

src/models/types.ts

@@ -126,6 +126,7 @@ export type DataByRoleAndQuestion = Record<
       email: string;
       communicationPreferences: string[] | undefined;
       answer: string;
+      roles: string[];
     }[]
   >
 >;
@@ -136,6 +137,7 @@ export type UserMap = Record<
     name: string;
     email: string;
     communicationPreferences: string[];
+    roles: string[];
   }
 >;