[resumes][refactor] use same lists

apps/portal/src/components/resumes/browse/constants.ts

@@ -23,19 +23,33 @@ export const ROLES = [
     label: 'Full-Stack Engineer',
     value: 'Full-Stack Engineer',
   },
-  { checked: false, label: 'Frontend Engineer', value: 'frontend-engineer' },
-  { checked: false, label: 'Backend Engineer', value: 'backend-engineer' },
-  { checked: false, label: 'DevOps Engineer', value: 'devops-engineer' },
-  { checked: false, label: 'iOS Engineer', value: 'ios-engineer' },
-  { checked: false, label: 'Android Engineer', value: 'android-engineer' },
+  { checked: false, label: 'Frontend Engineer', value: 'Frontend Engineer' },
+  { checked: false, label: 'Backend Engineer', value: 'Backend Engineer' },
+  { checked: false, label: 'DevOps Engineer', value: 'DevOps Engineer' },
+  { checked: false, label: 'iOS Engineer', value: 'iOS Engineer' },
+  { checked: false, label: 'Android Engineer', value: 'Android Engineer' },
 ];
 
 export const EXPERIENCE = [
-  { checked: false, label: 'Freshman', value: 'freshman' },
-  { checked: false, label: 'Sophomore', value: 'sophomore' },
-  { checked: false, label: 'Junior', value: 'junior' },
-  { checked: false, label: 'Senior', value: 'senior' },
-  { checked: false, label: 'Fresh Grad (0-1 years)', value: 'freshgrad' },
+  { checked: false, label: 'Freshman', value: 'Freshman' },
+  { checked: false, label: 'Sophomore', value: 'Sophomore' },
+  { checked: false, label: 'Junior', value: 'Junior' },
+  { checked: false, label: 'Senior', value: 'Senior' },
+  {
+    checked: false,
+    label: 'Fresh Grad (0-1 years)',
+    value: 'Fresh Grad (0-1 years)',
+  },
+  {
+    checked: false,
+    label: 'Mid-level (2 - 5 years)',
+    value: 'Mid-level (2 - 5 years)',
+  },
+  {
+    checked: false,
+    label: 'Senior (5+ years)',
+    value: 'Senior (5+ years)',
+  },
 ];
 
 export const LOCATION = [

apps/portal/src/components/resumes/comments/CommentsForm.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
-import { Button, Dialog, TextInput } from '@tih/ui';
+import { Button, Dialog, TextArea } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
@@ -86,45 +86,39 @@ export default function CommentsForm({
       <form
         className="w-full space-y-8 divide-y divide-gray-200"
         onSubmit={handleSubmit(onSubmit)}>
-        {/* TODO: Convert TextInput to TextArea */}
         <div className="mt-4 space-y-4">
-          <TextInput
+          <TextArea
             {...(register('general'), {})}
             label="General"
             placeholder="General comments about the resume"
-            type="text"
             onChange={(value) => onValueChange('general', value)}
           />
 
-          <TextInput
+          <TextArea
             {...(register('education'), {})}
             label="Education"
             placeholder="Comments about the Education section"
-            type="text"
             onChange={(value) => onValueChange('education', value)}
           />
 
-          <TextInput
+          <TextArea
             {...(register('experience'), {})}
             label="Experience"
             placeholder="Comments about the Experience section"
-            type="text"
             onChange={(value) => onValueChange('experience', value)}
           />
 
-          <TextInput
+          <TextArea
             {...(register('projects'), {})}
             label="Projects"
             placeholder="Comments about the Projects section"
-            type="text"
             onChange={(value) => onValueChange('projects', value)}
           />
 
-          <TextInput
+          <TextArea
             {...(register('skills'), {})}
             label="Skills"
             placeholder="Comments about the Skills section"
-            type="text"
             onChange={(value) => onValueChange('skills', value)}
           />
         </div>

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

@@ -7,6 +7,12 @@ import { useForm } from 'react-hook-form';
 import { PaperClipIcon } from '@heroicons/react/24/outline';
 import { Button, Select, TextArea, TextInput } from '@tih/ui';
 
+import {
+  EXPERIENCE,
+  LOCATION,
+  ROLES,
+} from '~/components/resumes/browse/constants';
+
 import { trpc } from '~/utils/trpc';
 
 const TITLE_PLACEHOLDER =
@@ -26,52 +32,6 @@ type IFormInput = {
 };
 
 export default function SubmitResumeForm() {
-  // TODO: Use enums instead
-  const roleItems = [
-    {
-      label: 'Frontend Engineer',
-      value: 'Frontend Engineer',
-    },
-    {
-      label: 'Full-Stack Engineer',
-      value: 'Full-Stack Engineer',
-    },
-    {
-      label: 'Backend Engineer',
-      value: 'Backend Engineer',
-    },
-  ];
-
-  const experienceItems = [
-    {
-      label: 'Fresh Graduate (0 - 1 years)',
-      value: 'Fresh Graduate (0 - 1 years)',
-    },
-    {
-      label: 'Mid',
-      value: 'Mid',
-    },
-    {
-      label: 'Senior',
-      value: 'Senior',
-    },
-  ];
-
-  const locationItems = [
-    {
-      label: 'United States',
-      value: 'United States',
-    },
-    {
-      label: 'Singapore',
-      value: 'Singapore',
-    },
-    {
-      label: 'India',
-      value: 'India',
-    },
-  ];
-
   const resumeCreateMutation = trpc.useMutation('resumes.resume.user.create');
   const router = useRouter();
 
@@ -148,7 +108,7 @@ export default function SubmitResumeForm() {
                 <Select
                   {...register('role', { required: true })}
                   label="Role"
-                  options={roleItems}
+                  options={ROLES}
                   required={true}
                   onChange={(val) => setValue('role', val)}
                 />
@@ -157,7 +117,7 @@ export default function SubmitResumeForm() {
                 <Select
                   {...register('experience', { required: true })}
                   label="Experience Level"
-                  options={experienceItems}
+                  options={EXPERIENCE}
                   required={true}
                   onChange={(val) => setValue('experience', val)}
                 />
@@ -167,7 +127,7 @@ export default function SubmitResumeForm() {
                   {...register('location', { required: true })}
                   label="Location"
                   name="location"
-                  options={locationItems}
+                  options={LOCATION}
                   required={true}
                   onChange={(val) => setValue('location', val)}
                 />