Fix opt_in_communication column type and add proper tests

Author: a1-su

src/components/volunteers/VolunteersTable.tsx

@@ -142,7 +142,11 @@ export const VolunteersTable = (): React.JSX.Element => {
               if (v) options[col.id]?.add(v);
             });
           } else if (value) {
-            options[col.id]?.add(String(value));
+            if (col.id === "opt_in_communication") {
+              options[col.id]?.add(value ? "Yes" : "No");
+            } else {
+              options[col.id]?.add(String(value));
+            }
           }
         }
       });
@@ -182,9 +186,6 @@ export const VolunteersTable = (): React.JSX.Element => {
 
         return {
           ...entry.volunteer,
-          opt_in_communication: entry.volunteer.opt_in_communication
-            ? "Yes"
-            : "No",
           cohorts: entry.cohorts.map(formatTag),
           current_roles: entry.roles
             .filter((r) => r.type === "current")
@@ -216,7 +217,7 @@ export const VolunteersTable = (): React.JSX.Element => {
   useEffect(() => {
     let ignore = false;
     const applyFilters = async (): Promise<void> => {
-      if (!allVolunteers) return;
+      if (!allVolunteers || allVolunteers.length === 0) return;
       setGlobalFilter("");
       setSorting([]);
       setRowSelection({});

src/components/volunteers/types.ts

@@ -4,8 +4,7 @@ export type VolunteerRow = Database["public"]["Tables"]["Volunteers"]["Row"];
 export type CohortRow = Database["public"]["Tables"]["Cohorts"]["Row"];
 export type RoleRow = Database["public"]["Tables"]["Roles"]["Row"];
 
-export interface Volunteer extends Omit<VolunteerRow, "opt_in_communication"> {
-  opt_in_communication: string;
+export interface Volunteer extends VolunteerRow {
   cohorts: string[];
   prior_roles: string[];
   current_roles: string[];

src/components/volunteers/volunteerColumns.tsx

@@ -22,6 +22,7 @@ interface ColumnConfig {
   isMulti?: boolean;
   size: number;
   cell?: (info: CellContext<Volunteer, unknown>) => React.JSX.Element;
+  accessorFn?: (row: Volunteer) => unknown;
 }
 
 const renderMultiTags = (
@@ -133,6 +134,11 @@ const COLUMNS_CONFIG: ColumnConfig[] = [
     filterType: "options",
     isMulti: false,
     size: 150,
+    accessorFn: (row: Volunteer): string | null => {
+      if (row.opt_in_communication === true) return "Yes";
+      if (row.opt_in_communication === false) return "No";
+      return null;
+    },
     cell: renderSingleTag,
   },
   {
@@ -155,10 +161,15 @@ export const FILTERABLE_COLUMNS = COLUMNS_CONFIG.filter(
 }));
 
 export const getBaseColumns = (): ColumnDef<Volunteer>[] => {
-  return COLUMNS_CONFIG.map((col) => ({
-    accessorKey: col.id,
-    header: () => <HeaderWithIcon icon={col.icon} label={col.label} />,
-    size: col.size,
-    ...(col.cell ? { cell: col.cell } : {}),
-  }));
+  return COLUMNS_CONFIG.map(
+    (col): ColumnDef<Volunteer> => ({
+      id: col.id,
+      header: () => <HeaderWithIcon icon={col.icon} label={col.label} />,
+      size: col.size,
+      ...(col.accessorFn
+        ? { accessorFn: col.accessorFn }
+        : { accessorKey: col.id }),
+      ...(col.cell ? { cell: col.cell } : {}),
+    })
+  );
 };

src/lib/api/getVolunteersByMultipleColumns.ts

@@ -56,7 +56,7 @@ type VolunteerFilterResponse =
  * @param op - The global operation on the filters ('AND'/'OR').
  *
  * @returns A Promise resolving to an object containing:
- * - data: Volunteer rows.
+ * - data: Volunteer ids.
  * - error: Error message.
  */
 export async function getVolunteersByMultipleColumns(
@@ -83,7 +83,7 @@ export async function getVolunteersByMultipleColumns(
         f.field === "prior_roles" ||
         f.field === "future_interests"
       ) {
-        let roleType;
+        let roleType: "current" | "prior" | "future_interest";
         if (f.field === "current_roles") roleType = "current";
         else if (f.field === "prior_roles") roleType = "prior";
         else roleType = "future_interest";

tests/lib/api/getVolunteersByMultipleColumns.test.ts

@@ -106,7 +106,7 @@ describe("getVolunteersByMultipleColumns (integration)", () => {
   let volunteer1Id: number; // Role 1, Cohort 1
   let volunteer2Id: number; // Role 2, Cohort 1, Cohort 2
   let volunteer3Id: number; // Role 1, Role 2, Cohort 2
-  let role1Id: number, role2Id: number;
+  let role1Id: number, role2Id: number, role3Id: number, role4Id: number;
   let cohort1Id: number, cohort2Id: number;
 
   beforeAll(async () => {
@@ -138,6 +138,8 @@ describe("getVolunteersByMultipleColumns (integration)", () => {
       .insert([
         makeTestRoleInsert({ name: "TEST_Role1" }),
         makeTestRoleInsert({ name: "TEST_Role2" }),
+        makeTestRoleInsert({ name: "TEST_Role3", type: "prior" }),
+        makeTestRoleInsert({ name: "TEST_Role4", type: "future_interest" }),
       ])
       .select();
 
@@ -158,9 +160,11 @@ describe("getVolunteersByMultipleColumns (integration)", () => {
     volunteer2Id = v2!.id;
     volunteer3Id = v3!.id;
 
-    const [r1, r2] = r!;
+    const [r1, r2, r3, r4] = r!;
     role1Id = r1!.id;
     role2Id = r2!.id;
+    role3Id = r3!.id;
+    role4Id = r4!.id;
 
     const [c1, c2] = c!;
     cohort1Id = c1!.id;
@@ -170,9 +174,13 @@ describe("getVolunteersByMultipleColumns (integration)", () => {
       .from("VolunteerRoles")
       .insert([
         makeTestVolunteerRoleInsert(volunteer1Id, role1Id),
+        makeTestVolunteerRoleInsert(volunteer1Id, role3Id),
         makeTestVolunteerRoleInsert(volunteer3Id, role1Id),
+        makeTestVolunteerRoleInsert(volunteer2Id, role4Id),
         makeTestVolunteerRoleInsert(volunteer2Id, role2Id),
         makeTestVolunteerRoleInsert(volunteer3Id, role2Id),
+        makeTestVolunteerRoleInsert(volunteer3Id, role3Id),
+        makeTestVolunteerRoleInsert(volunteer3Id, role4Id),
       ]);
 
     const { error: vcError } = await client
@@ -228,6 +236,30 @@ describe("getVolunteersByMultipleColumns (integration)", () => {
     expect(ids).not.toContain(volunteer2Id);
   });
 
+  it("filters by prior_roles", async () => {
+    const filters: FilterTuple[] = [
+      { field: "prior_roles", miniOp: "OR", values: ["TEST_Role3"] },
+    ];
+    const { data } = await getVolunteersByMultipleColumns(filters, "AND");
+    const ids = data;
+
+    expect(ids).toContain(volunteer1Id);
+    expect(ids).toContain(volunteer3Id);
+    expect(ids).not.toContain(volunteer2Id);
+  });
+
+  it("filters by future_interests", async () => {
+    const filters: FilterTuple[] = [
+      { field: "future_interests", miniOp: "OR", values: ["TEST_Role4"] },
+    ];
+    const { data } = await getVolunteersByMultipleColumns(filters, "AND");
+    const ids = data;
+
+    expect(ids).toContain(volunteer2Id);
+    expect(ids).toContain(volunteer3Id);
+    expect(ids).not.toContain(volunteer1Id);
+  });
+
   it("cohorts by cohort with OR", async () => {
     const filters: FilterTuple[] = [
       { field: "cohorts", miniOp: "OR", values: [["Fall", String(TEST_YEAR)]] },