Fix an issue with profile form

client/src/components/auth/Register.tsx

@@ -59,7 +59,6 @@ export default function SignUp() {
                 name="name"
                 required
                 fullWidth
-                id="name"
                 label="Name"
                 autoFocus
               />
@@ -68,7 +67,6 @@ export default function SignUp() {
               <TextField
                 required
                 fullWidth
-                id="email"
                 label="Email Address"
                 name="email"
               />
@@ -80,7 +78,6 @@ export default function SignUp() {
                 name="password"
                 label="Password"
                 type="password"
-                id="password"
               />
             </Grid>
             <Grid size={{ xs: 12 }}>
@@ -90,7 +87,6 @@ export default function SignUp() {
                 name="password2"
                 label="Repeat Password"
                 type="password"
-                id="password2"
               />
             </Grid>
           </Grid>

client/src/components/profile-forms/ProfileForm.tsx

@@ -19,10 +19,10 @@ const initialState = {
   company: "",
   website: "",
   location: "",
-  status: "",
   skills: "",
   githubusername: "",
   bio: "",
+  status: "",
   twitter: "",
   facebook: "",
   linkedin: "",
@@ -82,16 +82,19 @@ const ProfileForm = () => {
     youtube,
     linkedin,
     instagram,
-    status,
   } = formData;
 
   const onChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => setFormData({ ...formData, [e.target.name]: e.target.value });
+  ) => {
+    return setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     const editing = profile ? true : false;
     e.preventDefault();
+    const form = new FormData();
+    const status = form.get("status") as string;
     if (facebook?.length > 100) {
       dispatch(createAlert("Facebook link is longer 100 characters", "danger"));
     } else if (linkedin?.length > 100) {
@@ -108,9 +111,9 @@ const ProfileForm = () => {
       dispatch(createAlert("Skills is longer 100 characters", "danger"));
     } else if (skills.length === 0) {
       dispatch(createAlert("Skills is required", "danger"));
-    } else if (skills.length > 100 || skills.length === 0) {
-      dispatch(createAlert("Status is required", "danger"));
     } else if (status?.length === 0) {
+      dispatch(createAlert("Status is required", "danger"));
+    } else if (location?.length === 0) {
       dispatch(createAlert("Location is longer 100 characters", "danger"));
     } else if (githubusername?.length > 50) {
       dispatch(
@@ -217,7 +220,7 @@ const ProfileForm = () => {
           </Grid>
           <Grid size={{ xs: 6 }}>
             <TextField
-              name="githubUser"
+              name="githubusername"
               fullWidth
               label="Github Username"
               onChange={onChange}
@@ -239,7 +242,6 @@ const ProfileForm = () => {
               required
               placeholder="Select Profesional status"
               defaultValue={""}
-              value={status}
             >
               <MenuItem value="">None</MenuItem>
               <MenuItem value="Developer">Developer</MenuItem>

client/src/utils/hooks.ts

@@ -3,6 +3,6 @@ import type { TypedUseSelectorHook } from "react-redux";
 import type { RootState, AppDispatch } from "../store";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
+// taken from the redux wiki. Same as normal hook but typed
 export const useAppDispatch: () => AppDispatch = useDispatch;
-export const useAppDispatch2 = () => useDispatch<AppDispatch>;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;