Remove the code from Select and add defaultValues

Author: ruth-avelar

app/core/components/FormFields/SelectField.tsx

@@ -3,14 +3,13 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import type { SelectChangeEvent } from "@mui/material/Select";
 import Select from "@mui/material/Select";
-import React, { useEffect } from "react";
+import React from "react";
 import { useField, useControlField } from "remix-validated-form";
 
 interface SelectFieldProps {
   name: string;
   label: string;
   options: string[];
-  value?: string;
   onChange?: (
     event?: SelectChangeEvent<string>,
     child?: React.ReactNode
@@ -28,7 +27,6 @@ const SelectField: React.FC<SelectFieldProps> = ({
   options,
   style,
   onChange,
-  value,
 }) => {
   const { error } = useField(name);
   const [selectedValue, setSelectedValue] = useControlField<string>(name);
@@ -37,12 +35,6 @@ const SelectField: React.FC<SelectFieldProps> = ({
     setSelectedValue(event.target.value);
   };
 
-  useEffect(() => {
-    if (value !== undefined) {
-      setSelectedValue(value);
-    }
-  },[value, setSelectedValue])
-
   return (
     <div>
       <FormControl style={style} error={!!error}>
@@ -71,4 +63,4 @@ const SelectField: React.FC<SelectFieldProps> = ({
   );
 };
 
-export default SelectField;
+export default SelectField;

app/core/layouts/Header.tsx

@@ -9,7 +9,7 @@ import { useOptionalUser } from "~/utils";
 interface IProps {
   title: string;
   existApplicant?: boolean;
-  applicantId?: string;
+  applicantId?: string | number;
 }
 export interface MenuItemArgs {
   text: string;

app/routes/applicants.$applicantId._index.tsx

@@ -199,7 +199,7 @@ export default function Applicant() {
 
   return (
     <>
-      <Header title="Applicants" />
+      <Header title="Applicants" applicantId={applicantId} />
       <Container>
         <Paper sx={{ p: 2 }}>
           <Grid container spacing={2}>

app/routes/applicationForm.$applicantId._index.tsx

@@ -196,19 +196,19 @@ export default function FormPage() {
   const [startDate, setStartDate] = useState(getCurrentDate());
   const [editMode, setEditMode] = useState(false)
 
-  const editForm = () => {
+  const editForm = async() => {
     if (profile.email === applicantByEmail?.email) {
       setEditMode(true)
     }
   }
 
-  useEffect(() => {
-    editForm()
+  useEffect( () => {
+   editForm()
   })
-  
+
   return (
     <Container>
-      <Header title="Applicants"/>
+      <Header title="Applicants" applicantId={applicantByEmail?.id.toString()} />
       <Paper sx={{ p: 2 }}>
         <img src="/HeaderImage.png" alt="Wizeline" style={{ width: "100%" }} />
         <Typography component="div" variant="h2">
@@ -226,6 +226,12 @@ export default function FormPage() {
           validator={validator}
           action="./createapplicant"
           method="post"
+          defaultValues={{
+            //TODO: add the selects info to edit the form 
+       
+            gender: editMode ? applicantByEmail?.gender : ""
+            
+          }}
         >
           <Grid container spacing={10}>
             <Grid item xs={6}>
@@ -243,7 +249,7 @@ export default function FormPage() {
                 label="I identify as:"
                 options={["Male", "Female", "Non-binary", "Prefer not to say"]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ?  applicantByEmail?.gender : ''}
+               
               />
               <LabeledTextField
                 label="Full Name"
@@ -275,7 +281,7 @@ export default function FormPage() {
                   "Vietnam",
                 ]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ?  applicantByEmail?.country : ''}
+                // value={editMode ?  applicantByEmail?.country : ''}
               />
               <LabeledTextField
                 name="dayOfBirth"
@@ -391,7 +397,7 @@ export default function FormPage() {
                   "Wife",
                 ]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ?  (applicantByEmail?.emergencyRelationship ?? '') : ''}
+                // value={editMode ?  (applicantByEmail?.emergencyRelationship ?? '') : ''}
               />
               <LabeledTextField
                 label="Emergency phone number"
@@ -425,7 +431,7 @@ export default function FormPage() {
                   "Proficient (C1,C2)",
                 ]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ? applicantByEmail?.englishLevel : ''}
+                // value={editMode ? applicantByEmail?.englishLevel : ''}
               />
               <LabeledTextField
                 label="Degree and field you are studying"
@@ -486,7 +492,7 @@ export default function FormPage() {
                   "Project Management",
                 ]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ? (applicantByEmail?.interestedRoles ?? '') : ''}
+                // value={editMode ? (applicantByEmail?.interestedRoles ?? '') : ''}
               />
               <LabeledTextField
                 label="Preferred tools, programs, frameworks, programming languages or libraries"
@@ -542,14 +548,14 @@ export default function FormPage() {
                   "University talk",
                 ]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ? applicantByEmail?.howDidYouHearAboutUs : ''}
+                // value={editMode ? applicantByEmail?.howDidYouHearAboutUs : ''}
               />
               <SelectField
                 name="participatedAtWizeline"
                 label="Have you participated in any program at Wizeline before?"
                 options={["Yes", "No"]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ? (applicantByEmail?.participatedAtWizeline ? 'true' : 'false') : ''}
+                // value={editMode ? (applicantByEmail?.participatedAtWizeline ? 'true' : 'false') : ''}
               />
               <SelectField
                 name="wizelinePrograms"
@@ -562,7 +568,7 @@ export default function FormPage() {
                   "Does not apply",
                 ]}
                 style={{ width: "100%", marginBottom: "20px" }}
-                value={editMode ? (applicantByEmail?.wizelinePrograms ?? '') : ''}
+                // value={editMode ? (applicantByEmail?.wizelinePrograms ?? '') : ''}
               />
               <LabeledTextField
                 label="Any additional comments?"