Dedupe tags when selecting in app form

client/src/app/pages/applications/components/application-form/application-form.tsx

@@ -16,9 +16,10 @@ import { yupResolver } from "@hookform/resolvers/yup";
 
 import { SimpleSelect, OptionWithValue } from "@app/components/SimpleSelect";
 import { DEFAULT_SELECT_MAX_HEIGHT } from "@app/Constants";
-import { Application, Tag } from "@app/api/models";
+import { Application, Tag, TagRef } from "@app/api/models";
 import {
   customURLValidation,
+  dedupeArrayOfObjects,
   duplicateNameCheck,
   getAxiosErrorMessage,
 } from "@app/utils/utils";
@@ -103,8 +104,11 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
     };
   });
 
-  const manualTags =
-    application?.tags?.filter((t) => t?.source ?? "" === "") ?? [];
+  const manualTags: TagRef[] = useMemo(() => {
+    const rawManualTags: TagRef[] =
+      application?.tags?.filter((t) => t?.source ?? "" === "") ?? [];
+    return dedupeArrayOfObjects<TagRef>(rawManualTags, "name");
+  }, [application?.tags]);
 
   const nonManualTags =
     application?.tags?.filter((t) => t?.source ?? "" !== "") ?? [];

client/src/app/utils/utils.ts

@@ -75,6 +75,18 @@ export const dedupeFunction = (arr: any[]) =>
       index === self.findIndex((t) => t.value === value.value)
   );
 
+export const dedupeArrayOfObjects = <T>(arr: Array<T>, key: keyof T) => {
+  const seen = new Set();
+  return arr.filter((item) => {
+    const value = item[key];
+    if (seen.has(value)) {
+      return false;
+    }
+    seen.add(value);
+    return true;
+  });
+};
+
 export const numStr = (num: number | undefined): string => {
   if (num === undefined) return "";
   return String(num);