Merge pull request #2253 from dubinc/sheets-partner-table-fix

Show selected partners in tables

Author: steven-tey

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

@@ -1,24 +1,27 @@
 import { fetcher } from "@dub/utils";
 import { useParams } from "next/navigation";
-import useSWR from "swr";
+import useSWR, { SWRConfiguration } from "swr";
 import { z } from "zod";
 import { EnrolledPartnerProps } from "../types";
 import { partnersQuerySchema } from "../zod/schemas/partners";
 import useWorkspace from "./use-workspace";
 
 const partialQuerySchema = partnersQuerySchema.partial();
 
-export default function usePartners({
-  query,
-  enabled = true,
-}: {
-  query?: z.infer<typeof partialQuerySchema>;
-  enabled?: boolean;
-} = {}) {
+export default function usePartners(
+  {
+    query,
+    enabled = true,
+  }: {
+    query?: z.infer<typeof partialQuerySchema>;
+    enabled?: boolean;
+  } = {},
+  swrOptions: SWRConfiguration = {},
+) {
   const { programId } = useParams();
   const { id: workspaceId } = useWorkspace();
 
-  const { data, error } = useSWR<EnrolledPartnerProps[]>(
+  const { data, isLoading, error } = useSWR<EnrolledPartnerProps[]>(
     enabled && workspaceId
       ? `/api/partners?${new URLSearchParams({
           workspaceId: workspaceId,
@@ -27,11 +30,12 @@ export default function usePartners({
         } as Record<string, any>).toString()}`
       : undefined,
     fetcher,
+    swrOptions,
   );
 
   return {
     data,
-    loading: !data && !error,
+    loading: isLoading,
     error,
   };
 }

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

@@ -421,10 +421,10 @@ function DiscountSheetContent({
             {!isDefault && program?.id && (
               <DiscountPartnersTable
                 partnerIds={partnerIds || []}
-                partners={discountPartners || []}
-                setPartners={(value: string[]) => {
+                setPartnerIds={(value: string[]) => {
                   setValue("partnerIds", value);
                 }}
+                discountPartners={discountPartners || []}
                 loading={isLoadingDiscountPartners}
               />
             )}

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

@@ -136,7 +136,10 @@ function RewardSheetContent({ setIsOpen, event, reward }: RewardSheetProps) {
 
   useEffect(() => {
     if (rewardPartners && rewardPartners.length > 0) {
-      setValue("partnerIds", rewardPartners.map(partner => partner.id));
+      setValue(
+        "partnerIds",
+        rewardPartners.map((partner) => partner.id),
+      );
     }
   }, [rewardPartners, setValue]);
 
@@ -544,16 +547,14 @@ function RewardSheetContent({ setIsOpen, event, reward }: RewardSheetProps) {
               </>
             )}
 
-            {displayPartners && program?.id && (
-              <RewardPartnersTable
-                partnerIds={partnerIds || []}
-                partners={rewardPartners || []}
-                setPartners={(value: string[]) => {
-                  setValue("partnerIds", value);
-                }}
-                loading={isLoadingRewardPartners}
-              />
-            )}
+            <RewardPartnersTable
+              partnerIds={partnerIds || []}
+              setPartnerIds={(value: string[]) => {
+                setValue("partnerIds", value);
+              }}
+              rewardPartners={rewardPartners || []}
+              loading={isLoadingRewardPartners}
+            />
           </div>
         </div>
 

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

@@ -10,24 +10,22 @@ import { useDebounce } from "use-debounce";
 
 interface DiscountPartnersTableProps {
   partnerIds: string[];
-  partners: EnrolledPartnerProps[];
-  setPartners: (value: string[]) => void;
+  setPartnerIds: (value: string[]) => void;
+  discountPartners: EnrolledPartnerProps[];
   loading: boolean;
 }
 
 export function DiscountPartnersTable({
   partnerIds,
-  partners,
-  setPartners,
+  setPartnerIds,
+  discountPartners,
   loading,
 }: DiscountPartnersTableProps) {
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebounce(search, 500);
-  const [selectedPartners, setSelectedPartners] =
-    useState<Pick<EnrolledPartnerProps, "id" | "name" | "email" | "image">[]>();
-
-  // Get all partners for the table
-  const { data: allPartners } = usePartners({});
+  const [selectedPartners, setSelectedPartners] = useState<
+    Pick<EnrolledPartnerProps, "id" | "name" | "email" | "image">[]
+  >([]);
 
   // Get filtered partners for the combobox
   const { data: searchPartners } = usePartners({
@@ -36,7 +34,23 @@ export function DiscountPartnersTable({
     },
   });
 
-  const options = useMemo(
+  // Create a map for faster partner lookups
+  const partnersMap = useMemo(() => {
+    if (!searchPartners) return new Map();
+    return new Map(
+      searchPartners.map((partner) => [
+        partner.id,
+        {
+          id: partner.id,
+          name: partner.name,
+          email: partner.email,
+          image: partner.image,
+        },
+      ]),
+    );
+  }, [searchPartners]);
+
+  const partnersOptions = useMemo(
     () =>
       searchPartners?.map((partner) => ({
         icon: (
@@ -48,38 +62,70 @@ export function DiscountPartnersTable({
         ),
         value: partner.id,
         label: partner.name,
-      })),
+      })) || [],
     [searchPartners],
   );
 
   const selectedPartnersOptions = useMemo(
     () =>
-      partnerIds
-        .map((id) => options?.find(({ value }) => value === id)!)
-        .filter(Boolean),
-    [partnerIds, options],
+      partnersOptions.filter((partner) => partnerIds.includes(partner.value)),
+    [partnerIds, partnersOptions],
   );
 
+  // Update selectedPartners when discountPartners changes
   useEffect(() => {
-    setSelectedPartners(partners);
-  }, [partners]);
+    if (discountPartners && discountPartners.length > 0) {
+      setSelectedPartners(discountPartners);
+    }
+  }, [discountPartners]);
 
   const handlePartnerSelection = (
     selectedOptions: typeof selectedPartnersOptions,
   ) => {
-    // Get all currently selected IDs
-    const currentIds = new Set(partnerIds);
+    // Get all currently selected partner IDs that are not in the current search results
+    const currentSelectedIds = new Set(partnerIds);
 
-    // Add new selections
-    selectedOptions.forEach(({ value }) => {
-      currentIds.add(value);
+    // Remove deselected partners from current search results
+    partnersOptions.forEach((option) => {
+      if (
+        !selectedOptions.some((selected) => selected.value === option.value)
+      ) {
+        currentSelectedIds.delete(option.value);
+      }
     });
 
-    setPartners(Array.from(currentIds));
+    // Add newly selected partners
+    selectedOptions.forEach((option) => {
+      currentSelectedIds.add(option.value);
+    });
+
+    // Convert to array and update partnerIds
+    const newPartnerIds = Array.from(currentSelectedIds);
+    setPartnerIds(newPartnerIds);
+
+    // Update selectedPartners to maintain all selected partners
+    const newSelectedPartners = newPartnerIds
+      .map((id) => {
+        // First check existing selected partners
+        const existingPartner = selectedPartners?.find((p) => p.id === id);
+        if (existingPartner) return existingPartner;
+
+        // Then check discountPartners
+        const discountPartner = discountPartners?.find((p) => p.id === id);
+        if (discountPartner) return discountPartner;
+
+        // Finally check the partnersMap for new selections
+        return partnersMap.get(id) || null;
+      })
+      .filter(
+        (partner): partner is NonNullable<typeof partner> => partner !== null,
+      );
+
+    setSelectedPartners(newSelectedPartners);
   };
 
   const table = useTable({
-    data: selectedPartners || [],
+    data: selectedPartners,
     columns: [
       {
         header: "Partner",
@@ -122,7 +168,9 @@ export function DiscountPartnersTable({
               icon={<X className="size-4" />}
               className="size-4 rounded-md border-0 bg-neutral-50 p-0 hover:bg-neutral-100"
               onClick={() => {
-                setPartners(partnerIds.filter((id) => id !== row.original.id));
+                setPartnerIds(
+                  partnerIds.filter((id) => id !== row.original.id),
+                );
                 setSelectedPartners(
                   selectedPartners?.filter(
                     (partner) => partner.id !== row.original.id,
@@ -154,7 +202,7 @@ export function DiscountPartnersTable({
       </label>
 
       <Combobox
-        options={options}
+        options={partnersOptions}
         selected={selectedPartnersOptions}
         setSelected={handlePartnerSelection}
         caret