Create `DecisionForm` component

[zaviermiller]

Description

We need a component that will allow users to make a final decision on an applicant.

Technical Details

• This component should take the following props:
  • onChange: (formData: DecisionFormData) => void
• Follow the Figma design (don't worry about the dialog or the title, just create the form).
• Use the MUI Radio Group to implement the different options for the decision itself
• Use the MUI Text Field component with the multiline prop set to true for the reason field
• Use the MUI Text Field with the select prop to create the role field.
  • Match the options in the Figma design for now.
• Create a folder called forms in the folder /apps/applicant-tracking/src/types and in that folder create a file called decisions.ts
• Inside this file create a zod type called zDecisionFormData. This will look something like: const zDecisionForm = z.object({ ... }).
• This zod type should have a type for each of the fields in the form.
• For the decision field, make the zod type a z.literal that can take on the following: "Accepted", "Rejected", "Waitlisted"
• You might have to figure out how this should work, use the link above and search the text "literal" on the page, which will give you some solid examples.
• For the reason field, make the zod type a z.string. This field should be optional.
• For the role field make the zod type another z.literal with the options from the select.
• Use the following code to turn your zod type into a TypeScript type: type DecisionFormData = z.infer<typeof zDecisionFormData>
• If you have over this type, you should see the following:

type DecisionFormData = {
  decision: "Accepted" | "Rejected" | "Waitlisted";
  reason?: string;
  role: "Developer" | "Designer" | "Learning Based Project" | "Operations";
}

• Next, use this type to create a state in your form component that will keep track of what the user types in the form (watch the React video for a refresher on how to do this!)

Teachables

Testing Steps

To test, put your component on the page and define a dummy onChange function for it. Something like:

const onChange = (data: DecisionFormData) => {
  console.log(data)
}

Open the JavaScript console (Ctrl + I, and go to the "Console" tab), and try filling the form out. You should see data being printed out as you type!

Dependencies