From 44496eb2fae0ba18fac2204342bb2de3444396fb Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 3 Feb 2024 11:09:05 +0200
Subject: [PATCH] Better add badge owner flow Closes #1651

---
 app/features/badges/routes/badges.$id.edit.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/features/badges/routes/badges.$id.edit.tsx b/app/features/badges/routes/badges.$id.edit.tsx
index ba4e5c0f7..176649952 100644
--- a/app/features/badges/routes/badges.$id.edit.tsx
+++ b/app/features/badges/routes/badges.$id.edit.tsx
@@ -170,9 +170,7 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
 
   const ownerDifferences = getOwnerDifferences(owners, data.owners);
 
-  const userIdsToOmitFromCombobox = React.useMemo(() => {
-    return new Set(data.owners.map((m) => m.id));
-  }, [data]);
+  const userInputKey = owners.map((o) => `${o.id}-${o.count}`).join("-");
 
   return (
     <div className="stack md">
@@ -183,10 +181,20 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
           <UserSearch
             className="mx-auto"
             inputName="new-owner"
+            key={userInputKey}
             onChange={(user) => {
-              setOwners([...owners, { count: 1, ...user }]);
+              setOwners((previousOwners) => {
+                const existingOwner = previousOwners.find(
+                  (o) => o.id === user.id,
+                );
+                if (existingOwner) {
+                  return previousOwners.map((o) =>
+                    o.id === user.id ? { ...o, count: o.count + 1 } : o,
+                  );
+                }
+                return [...previousOwners, { count: 1, ...user }];
+              });
             }}
-            userIdsToOmit={userIdsToOmitFromCombobox}
           />
         </div>
       </div>