prevent duplicates

apps/member-profile/app/routes/_profile.resume-books.$id.tsx

@@ -17,6 +17,7 @@ import {
   useSearchParams,
 } from '@remix-run/react';
 import dayjs from 'dayjs';
+import { useState } from 'react';
 import { match } from 'ts-pattern';
 
 import {
@@ -36,9 +37,7 @@ import { FORMATTED_RACE, Race, WorkAuthorizationStatus } from '@oyster/types';
 import {
   Button,
   Checkbox,
-  type DescriptionProps,
   Divider,
-  type FieldProps,
   Form,
   getErrors,
   Input,
@@ -585,26 +584,7 @@ function ResumeBookForm() {
         </Radio.Group>
       </Form.Field>
 
-      <SponsorField
-        defaultValue={submission?.preferredCompany1}
-        description="Which company would you accept an offer from right now?"
-        error={errors.preferredCompany1}
-        name={keys.preferredCompany1}
-      />
-
-      <SponsorField
-        defaultValue={submission?.preferredCompany2}
-        description="Maybe not your #1, but which company is a close second?"
-        error={errors.preferredCompany2}
-        name={keys.preferredCompany2}
-      />
-
-      <SponsorField
-        defaultValue={submission?.preferredCompany3}
-        description="Third?"
-        error={errors.preferredCompany3}
-        name={keys.preferredCompany3}
-      />
+      <SponsorField />
 
       <Form.Field
         description={
@@ -635,31 +615,105 @@ function ResumeBookForm() {
   );
 }
 
-function SponsorField({
-  defaultValue,
-  description,
-  error,
-  name,
-}: FieldProps<string> & DescriptionProps) {
-  const { sponsors } = useLoaderData<typeof loader>();
+function SponsorField() {
+  const { sponsors, submission } = useLoaderData<typeof loader>();
+  const { errors } = getErrors(useActionData<typeof action>());
+
+  const [selectedCompanies, setSelectedCompanies] = useState({
+    1: submission?.preferredCompany1 || '',
+    2: submission?.preferredCompany2 || '',
+    3: submission?.preferredCompany3 || '',
+  });
+
+  function chooseCompany(e: React.FormEvent<HTMLSelectElement>, rank: number) {
+    const value = e.currentTarget.value;
+
+    // If the company that we're selecting is already selected in a
+    // different option, we'll clear that option forcing the user
+    // to pick a different company.
+    const duplicateCompanies = Object.keys(selectedCompanies)
+      .filter((key) => {
+        return (
+          key !== rank.toString() &&
+          selectedCompanies[key as unknown as 1 | 2 | 3] === value
+        );
+      })
+      .map((key) => {
+        return [key, ''];
+      });
+
+    setSelectedCompanies((companies) => {
+      return {
+        ...companies,
+        ...Object.fromEntries(duplicateCompanies),
+        [rank]: value,
+      };
+    });
+  }
+
+  const options = (
+    <>
+      {sponsors.map((sponsor) => {
+        return (
+          <option key={sponsor.id} value={sponsor.id as string}>
+            {sponsor.name}
+          </option>
+        );
+      })}
+    </>
+  );
 
   return (
     <Form.Field
-      description={description}
-      error={error}
-      label="Of all the ColorStack sponsors, which company are you most interested in working for?"
-      labelFor={name}
+      error={
+        errors.preferredCompany1 ||
+        errors.preferredCompany2 ||
+        errors.preferredCompany3
+      }
+      label="Of all the ColorStack sponsors, which are you most interested in working for?"
+      labelFor={keys.preferredCompany1}
       required
     >
-      <Select defaultValue={defaultValue} id={name} name={name} required>
-        {sponsors.map((sponsor) => {
-          return (
-            <option key={sponsor.id} value={sponsor.id!}>
-              {sponsor.name}
-            </option>
-          );
-        })}
-      </Select>
+      <div className="flex flex-col gap-2">
+        <Select
+          id={keys.preferredCompany1}
+          name={keys.preferredCompany1}
+          onChange={(e) => {
+            chooseCompany(e, 1);
+          }}
+          placeholder="Choose your #1 company..."
+          required
+          value={selectedCompanies[1]}
+        >
+          {options}
+        </Select>
+
+        <Select
+          id={keys.preferredCompany2}
+          name={keys.preferredCompany2}
+          onChange={(e) => {
+            chooseCompany(e, 2);
+          }}
+          placeholder="Choose your #2 company..."
+          required
+          value={selectedCompanies[2]}
+        >
+          {options}
+        </Select>
+
+        <Select
+          id={keys.preferredCompany3}
+          name={keys.preferredCompany3}
+          onChange={(e) => {
+            chooseCompany(e, 3);
+          }}
+          placeholder="Choose your #3 company..."
+          required
+          value={selectedCompanies[3]}
+        >
+          {options}
+        </Select>
+      </div>
     </Form.Field>
   );
 }

packages/ui/src/components/select.tsx

@@ -14,13 +14,13 @@ export type SelectProps = Pick<
   | 'placeholder'
   | 'readOnly'
   | 'required'
+  | 'value'
 > & {
   width?: 'fit';
 };
 
 export function Select({
   children,
-  defaultValue = '',
   placeholder = 'Select...',
   required,
   width,
@@ -42,7 +42,6 @@ export function Select({
         // iOS has weird default styling for select elements - we'll undo those.
         'bg-inherit'
       )}
-      defaultValue={defaultValue}
       required={required}
       {...rest}
     >