[resumes][fix] filter out selected options

apps/portal/src/components/resumes/shared/ResumeExperienceTypeahead.tsx

@@ -18,16 +18,18 @@ type BaseProps = Pick<
 type Props = BaseProps &
   Readonly<{
     onSelect: (option: TypeaheadOption | null) => void;
-    value?: TypeaheadOption | null;
+    selectedValues?: Set<string>;
   }>;
 
 export default function ResumeExperienceTypeahead({
   onSelect,
-  value,
+  selectedValues = new Set(),
   ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const options = EXPERIENCES.filter(
+    ({ value }) => !selectedValues.has(value),
+  ).filter(
     ({ label }) =>
       label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1,
   );
@@ -38,7 +40,6 @@ export default function ResumeExperienceTypeahead({
       noResultsMessage="No available experiences."
       nullable={true}
       options={options}
-      value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
       {...props}

apps/portal/src/components/resumes/shared/ResumeLocationTypeahead.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
@@ -18,12 +18,12 @@ type BaseProps = Pick<
 type Props = BaseProps &
   Readonly<{
     onSelect: (option: TypeaheadOption | null) => void;
-    value?: TypeaheadOption | null;
+    selectedValues?: Set<string>;
   }>;
 
 export default function ResumeLocationTypeahead({
   onSelect,
-  value,
+  selectedValues = new Set(),
   ...props
 }: Props) {
   const [query, setQuery] = useState('');
@@ -34,21 +34,27 @@ export default function ResumeLocationTypeahead({
     },
   ]);
 
-  const { data } = countries;
+  const options = useMemo(() => {
+    const { data } = countries;
+    if (data == null) {
+      return [];
+    }
+
+    return data
+      .map(({ id, name }) => ({
+        id,
+        label: name,
+        value: id,
+      }))
+      .filter(({ value }) => !selectedValues.has(value));
+  }, [countries, selectedValues]);
 
   return (
     <Typeahead
       label="Location"
       noResultsMessage="No location found"
       nullable={true}
-      options={
-        data?.map(({ id, name }) => ({
-          id,
-          label: name,
-          value: id,
-        })) ?? []
-      }
-      value={value}
+      options={options}
       onQueryChange={setQuery}
       onSelect={onSelect}
       {...props}

apps/portal/src/components/resumes/shared/ResumeRoleTypeahead.tsx

@@ -18,12 +18,12 @@ type BaseProps = Pick<
 type Props = BaseProps &
   Readonly<{
     onSelect: (option: TypeaheadOption | null) => void;
-    value?: TypeaheadOption | null;
+    selectedValues?: Set<string>;
   }>;
 
 export default function ResumeRoleTypeahead({
   onSelect,
-  value,
+  selectedValues = new Set(),
   ...props
 }: Props) {
   const [query, setQuery] = useState('');
@@ -33,6 +33,7 @@ export default function ResumeRoleTypeahead({
       label,
       value: slug,
     }))
+    .filter(({ value }) => !selectedValues.has(value))
     .filter(
       ({ label }) =>
         label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1,
@@ -44,7 +45,6 @@ export default function ResumeRoleTypeahead({
       noResultsMessage="No available roles."
       nullable={true}
       options={options}
-      value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
       {...props}

apps/portal/src/pages/resumes/index.tsx

@@ -354,6 +354,9 @@ export default function ResumeHomePage() {
           <ResumeExperienceTypeahead
             isLabelHidden={true}
             placeholder="Select experiences"
+            selectedValues={
+              new Set(userFilters[filterId].map(({ value }) => value))
+            }
             onSelect={onSelect}
           />
         );
@@ -362,6 +365,9 @@ export default function ResumeHomePage() {
           <ResumeLocationTypeahead
             isLabelHidden={true}
             placeholder="Select locations"
+            selectedValues={
+              new Set(userFilters[filterId].map(({ value }) => value))
+            }
             onSelect={onSelect}
           />
         );
@@ -370,6 +376,9 @@ export default function ResumeHomePage() {
           <ResumeRoleTypeahead
             isLabelHidden={true}
             placeholder="Select roles"
+            selectedValues={
+              new Set(userFilters[filterId].map(({ value }) => value))
+            }
             onSelect={onSelect}
           />
         );