[resumes][chore] remove tracking of state

3 years ago · 4d6413a56b
parent 64c5275062
commit 4d6413a56b
3 changed files with 17 additions and 30 deletions
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@ -68,25 +68,23 @@ export default function SubmitResumeForm() {
    },
  ];

-  const [title, setTitle] = useState('');
-  const [role, setRole] = useState(roleItems[0].label);
-  const [experience, setExperience] = useState(experienceItems[0].label);
-  const [location, setLocation] = useState(locationItems[0].label);
-  const [resumeFile, setResumeFile] = useState<File | null>(null);
+  const [resumeFile, setResumeFile] = useState<File | null>();
  const [invalidFileUploadError, setInvalidFileUploadError] = useState<
    string | null
  >(null);
-  const [additionalInfo, setAdditionalInfo] = useState('');

  const {
    register,
    handleSubmit,
+    setValue,
+    reset,
    formState: { errors },
  } = useForm<IFormInput>();

  // TODO: Add Create resume mutation
  const onSubmit: SubmitHandler<IFormInput> = (data) => {
    alert(JSON.stringify(data));
+    onClickReset();
  };

  const onUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
@ -102,6 +100,11 @@ export default function SubmitResumeForm() {
    setResumeFile(file);
  };

+  const onClickReset = () => {
+    reset();
+    setResumeFile(null);
+  };
+
  const fileUploadError = useMemo(() => {
    if (invalidFileUploadError != null) {
      return invalidFileUploadError;
@ -111,15 +114,6 @@ export default function SubmitResumeForm() {
    }
  }, [errors?.file, invalidFileUploadError]);

-  const onReset = () => {
-    setTitle('');
-    setLocation(locationItems[0].label);
-    setExperience(experienceItems[0].label);
-    setRole(roleItems[0].label);
-    setResumeFile(null);
-    setAdditionalInfo('');
-  };
-
  return (
    <>
      <Head>
@ -135,11 +129,11 @@ export default function SubmitResumeForm() {
              <div className="mb-4">
                <TextInput
                  {...register('title', { required: true })}
+                  defaultValue=""
                  errorMessage={errors?.title && 'Title cannot be empty!'}
                  label="Title"
                  placeholder={TITLE_PLACEHOLDER}
-                  value={title}
-                  onChange={setTitle}
+                  onChange={(val) => setValue('title', val)}
                />
              </div>
              <div className="mb-4">
@ -147,8 +141,7 @@ export default function SubmitResumeForm() {
                  {...register('role', { required: true })}
                  label="Role"
                  options={roleItems}
-                  value={role}
-                  onChange={setRole}
+                  onChange={(val) => setValue('role', val)}
                />
              </div>
              <div className="mb-4">
@ -156,8 +149,7 @@ export default function SubmitResumeForm() {
                  {...register('experience', { required: true })}
                  label="Experience Level"
                  options={experienceItems}
-                  value={experience}
-                  onChange={setExperience}
+                  onChange={(val) => setValue('experience', val)}
                />
              </div>
              <div className="mb-4">
@ -166,8 +158,7 @@ export default function SubmitResumeForm() {
                  label="Location"
                  name="location"
                  options={locationItems}
-                  value={location}
-                  onChange={setLocation}
+                  onChange={(val) => setValue('location', val)}
                />
              </div>
              <p className="text-sm font-medium text-slate-700">
@ -207,10 +198,10 @@ export default function SubmitResumeForm() {
                {/* TODO: Use TextInputArea instead */}
                <TextInput
                  {...register('additionalInformation')}
+                  defaultValue=""
                  label="Additional Information"
                  placeholder={ADDITIONAL_INFO_PLACEHOLDER}
-                  value={additionalInfo}
-                  onChange={setAdditionalInfo}
+                  onChange={(val) => setValue('additionalInformation', val)}
                />
              </div>
              <div className="mt-4 flex justify-end gap-4">
@ -220,7 +211,7 @@ export default function SubmitResumeForm() {
                  label="Clear"
                  size="md"
                  variant="tertiary"
-                  onClick={onReset}
+                  onClick={onClickReset}
                />
                <Button
                  addonPosition="start"
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@ -35,7 +35,6 @@ function Select<T>(
    label,
    isLabelHidden,
    options,
-    value,
    onChange,
    ...props
  }: Props<T>,
--- a/packages/ui/src/TextInput/TextInput.tsx
+++ b/packages/ui/src/TextInput/TextInput.tsx
@ -34,7 +34,6 @@ type Props = Readonly<{
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
  onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
  startIcon?: React.ComponentType<React.ComponentProps<'svg'>>;
-  value?: string;
 }> &
  Readonly<Attributes>;

@ -58,7 +57,6 @@ function TextInput(
    label,
    startIcon: StartIcon,
    type = 'text',
-    value,
    onChange,
    ...props
  }: Props,
@ -102,7 +100,6 @@ function TextInput(
          disabled={disabled}
          id={id}
          type={type}
-          value={value != null ? value : undefined}
          onChange={(event) => {
            if (!onChange) {
              return;