diff --git a/apps/member-profile/app/routes/_profile.resume-books.$id.tsx b/apps/member-profile/app/routes/_profile.resume-books.$id.tsx
index 113ff6d2..2bd8eefa 100644
--- a/apps/member-profile/app/routes/_profile.resume-books.$id.tsx
+++ b/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() {
-
-
-
-
-
+
& DescriptionProps) {
- const { sponsors } = useLoaderData();
+function SponsorField() {
+ const { sponsors, submission } = useLoaderData();
+ const { errors } = getErrors(useActionData());
+
+ const [selectedCompanies, setSelectedCompanies] = useState({
+ 1: submission?.preferredCompany1 || '',
+ 2: submission?.preferredCompany2 || '',
+ 3: submission?.preferredCompany3 || '',
+ });
+
+ function chooseCompany(e: React.FormEvent, 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 (
+
+ );
+ })}
+ >
+ );
return (
-
+
+
+
+
+
+
+
);
}
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 54fdc237..121f4b24 100644
--- a/packages/ui/src/components/select.tsx
+++ b/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}
>