fix the partners selection and search

Author: devkiran

apps/web/app/api/programs/[programId]/rewards/partners/route.ts

@@ -33,15 +33,20 @@ export const GET = withWorkspace(
             partner: {
               select: {
                 id: true,
+                name: true,
+                image: true,
+                email: true,
               },
             },
           },
         },
       },
     });
 
-    return NextResponse.json(
-      partners.map(({ programEnrollment: { partner } }) => partner.id),
+    const flatPartners = partners.map(
+      ({ programEnrollment: { partner } }) => partner,
     );
+
+    return NextResponse.json(flatPartners);
   },
 );

apps/web/lib/swr/use-reward-partners.ts

@@ -2,6 +2,7 @@ import { fetcher } from "@dub/utils";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { z } from "zod";
+import { EnrolledPartnerProps } from "../types";
 import { rewardPartnersQuerySchema } from "../zod/schemas/rewards";
 import useWorkspace from "./use-workspace";
 
@@ -17,7 +18,7 @@ export default function useRewardPartners({
   const { programId } = useParams();
   const { id: workspaceId } = useWorkspace();
 
-  const { data, error, isLoading } = useSWR<string[]>(
+  const { data, error, isLoading } = useSWR<EnrolledPartnerProps[]>(
     enabled && workspaceId && programId
       ? `/api/programs/${programId}/rewards/partners?${new URLSearchParams({
           workspaceId,

apps/web/ui/partners/add-edit-reward-sheet.tsx

@@ -136,7 +136,7 @@ function RewardSheetContent({ setIsOpen, event, reward }: RewardSheetProps) {
 
   useEffect(() => {
     if (rewardPartners && rewardPartners.length > 0) {
-      setValue("partnerIds", rewardPartners);
+      setValue("partnerIds", rewardPartners.map(partner => partner.id));
     }
   }, [rewardPartners, setValue]);
 

apps/web/ui/partners/reward-partners-table.tsx

@@ -21,15 +21,19 @@ export function RewardPartnersTable({
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebounce(search, 500);
 
-  const { data: partners } = usePartners({
+  // Get all partners for the table
+  const { data: allPartners } = usePartners({});
+
+  // Get filtered partners for the combobox
+  const { data: searchPartners } = usePartners({
     query: {
       search: debouncedSearch,
     },
   });
 
   const options = useMemo(
     () =>
-      partners?.map((partner) => ({
+      searchPartners?.map((partner) => ({
         icon: (
           <img
             alt={partner.name}
@@ -40,7 +44,7 @@ export function RewardPartnersTable({
         value: partner.id,
         label: partner.name,
       })),
-    [partners],
+    [searchPartners],
   );
 
   const selectedPartnersOptions = useMemo(
@@ -54,21 +58,30 @@ export function RewardPartnersTable({
   const selectedPartners = useMemo(
     () =>
       partnerIds
-        .map((id) => partners?.find((partner) => partner.id === id))
+        .map((id) => allPartners?.find((partner) => partner.id === id))
         .filter((p): p is NonNullable<typeof p> => p != null)
         .map((partner) => ({
           id: partner.id,
           name: partner.name,
           email: partner.email,
           image: partner.image,
         })),
-    [partnerIds, partners],
+    [partnerIds, allPartners],
   );
 
   const handlePartnerSelection = (
     selectedOptions: typeof selectedPartnersOptions,
   ) => {
-    const newSelectedIds = selectedOptions.map(({ value }) => value);
+    // Get all currently selected IDs
+    const currentIds = new Set(partnerIds);
+    
+    // Add new selections
+    selectedOptions.forEach(({ value }) => {
+      currentIds.add(value);
+    });
+    
+    // Convert back to array
+    const newSelectedIds = Array.from(currentIds);
     setPartners(newSelectedIds);
   };
 
@@ -115,6 +128,7 @@ export function RewardPartnersTable({
     resourceName: (p) => `eligible partner${p ? "s" : ""}`,
     getRowId: (row: EnrolledPartnerProps) => row.id,
     loading,
+    rowCount: selectedPartners.length,
   });
 
   return (