From 318c1c7c367ccdd43b72223ecc75d565f4d19d67 Mon Sep 17 00:00:00 2001
From: QkoSad <malakrapon@gmail.com>
Date: Sat, 28 Sep 2024 18:13:40 +0300
Subject: [PATCH] Fixed profile form

---
 client/src/actions/post.ts                    |   1 -
 client/src/actions/profile.ts                 |   1 -
 .../components/dashboard/DashboardActions.tsx |  12 ++
 .../components/profile-forms/ProfileForm.tsx  | 127 ++++++++++++++----
 4 files changed, 113 insertions(+), 28 deletions(-)

diff --git a/client/src/actions/post.ts b/client/src/actions/post.ts
index 80f39d7..f3d8112 100755
--- a/client/src/actions/post.ts
+++ b/client/src/actions/post.ts
@@ -179,7 +179,6 @@ export const addComment =
 
       dispatch(createAlert("Comment Added", "success"));
     } catch (err: unknown) {
-      console.log(err);
       if (err instanceof AxiosError) {
         if (
           err !== undefined &&
diff --git a/client/src/actions/profile.ts b/client/src/actions/profile.ts
index 81d04b1..d06c3ae 100755
--- a/client/src/actions/profile.ts
+++ b/client/src/actions/profile.ts
@@ -96,7 +96,6 @@ export const createProfile =
     try {
       const res = await api.post("/profile", formData);
 
-      console.log(res);
       dispatch(getProfile(res.data));
 
       dispatch(
diff --git a/client/src/components/dashboard/DashboardActions.tsx b/client/src/components/dashboard/DashboardActions.tsx
index 2e8b8d4..d80a14c 100755
--- a/client/src/components/dashboard/DashboardActions.tsx
+++ b/client/src/components/dashboard/DashboardActions.tsx
@@ -1,8 +1,12 @@
 import { Box, Button } from "@mui/material";
 import React from "react";
 import { Link } from "react-router-dom";
+import { useAppSelector } from "../../utils/hooks";
 
 const DashboardActions = () => {
+  const { profile }: { profile: any } = useAppSelector(
+    (state) => state.profile,
+  );
   return (
     <Box
       sx={{
@@ -34,6 +38,14 @@ const DashboardActions = () => {
       >
         Add Education
       </Button>
+      <Button
+        sx={{ marginX: "1rem" }}
+        component={Link}
+        to={`/profile/${profile.user._id}`}
+        variant="outlined"
+      >
+        View Profile
+      </Button>
     </Box>
   );
 };
diff --git a/client/src/components/profile-forms/ProfileForm.tsx b/client/src/components/profile-forms/ProfileForm.tsx
index bd1cba5..7b16f03 100755
--- a/client/src/components/profile-forms/ProfileForm.tsx
+++ b/client/src/components/profile-forms/ProfileForm.tsx
@@ -33,9 +33,10 @@ const initialState = {
 const ProfileForm = () => {
   const dispatch = useAppDispatch();
 
+  const [formData, setFormData] = useState(initialState);
+
   const { profile, loading }: { profile: any; loading: boolean } =
     useAppSelector((state) => state.profile);
-  const [formData, setFormData] = useState(initialState);
 
   const creatingProfile = useMatch("/create-profile");
 
@@ -69,23 +70,28 @@ const ProfileForm = () => {
     }
   }, [loading, dispatch, profile]);
 
+  const {
+    website,
+    location,
+    skills,
+    githubusername,
+    company,
+    bio,
+    twitter,
+    facebook,
+    youtube,
+    linkedin,
+    instagram,
+    status,
+  } = formData;
+
+  const onChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => setFormData({ ...formData, [e.target.name]: e.target.value });
+
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     const editing = profile ? true : false;
     e.preventDefault();
-
-    const data = new FormData(e.currentTarget);
-    const website = data.get("website") as string;
-    const location = data.get("location") as string;
-    const skills = data.get("skills") as string;
-    const githubusername = data.get("githubUser") as string;
-    const company = data.get("company") as string;
-    const bio = data.get("bio") as string;
-    const twitter = data.get("twitter") as string;
-    const facebook = data.get("facebook") as string;
-    const youtube = data.get("youtube") as string;
-    const linkedin = data.get("linkedin") as string;
-    const instagram = data.get("instagram") as string;
-    const status = data.get("status") as string;
     if (facebook?.length > 100) {
       dispatch(createAlert("Facebook link is longer 100 characters", "danger"));
     } else if (linkedin?.length > 100) {
@@ -100,7 +106,11 @@ const ProfileForm = () => {
       dispatch(createAlert("Website link is longer 100 characters", "danger"));
     } else if (skills.length > 100) {
       dispatch(createAlert("Skills is longer 100 characters", "danger"));
-    } else if (location?.length > 50) {
+    } 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("Location is longer 100 characters", "danger"));
     } else if (githubusername?.length > 50) {
       dispatch(
@@ -148,7 +158,14 @@ const ProfileForm = () => {
       <Box component="form" noValidate onSubmit={onSubmit} sx={{ mt: 3 }}>
         <Grid container spacing={2}>
           <Grid size={{ xs: 6 }}>
-            <TextField name="company" fullWidth label="Company" autoFocus />
+            <TextField
+              name="company"
+              fullWidth
+              label="Company"
+              autoFocus
+              onChange={onChange}
+              value={company}
+            />
           </Grid>
           <Grid size={{ xs: 6 }}>
             <Typography paddingY="1rem">
@@ -156,7 +173,13 @@ const ProfileForm = () => {
             </Typography>
           </Grid>
           <Grid size={{ xs: 6 }}>
-            <TextField name="website" fullWidth label="Website" />
+            <TextField
+              name="website"
+              fullWidth
+              label="Website"
+              onChange={onChange}
+              value={website}
+            />
           </Grid>
           <Grid size={{ xs: 6 }}>
             <Typography paddingY="1rem">
@@ -164,7 +187,13 @@ const ProfileForm = () => {
             </Typography>
           </Grid>
           <Grid size={{ xs: 6 }}>
-            <TextField name="location" fullWidth label="Location" />
+            <TextField
+              name="location"
+              fullWidth
+              label="Location"
+              onChange={onChange}
+              value={location}
+            />
           </Grid>
           <Grid size={{ xs: 6 }}>
             <Typography paddingY="1rem">
@@ -172,7 +201,14 @@ const ProfileForm = () => {
             </Typography>
           </Grid>
           <Grid size={{ xs: 6 }}>
-            <TextField name="skills" required fullWidth label="Skills" />
+            <TextField
+              name="skills"
+              required
+              fullWidth
+              label="Skills"
+              onChange={onChange}
+              value={skills}
+            />
           </Grid>
           <Grid size={{ xs: 6 }}>
             <Typography>
@@ -180,7 +216,13 @@ const ProfileForm = () => {
             </Typography>
           </Grid>
           <Grid size={{ xs: 6 }}>
-            <TextField name="githubUser" fullWidth label="Github Username" />
+            <TextField
+              name="githubUser"
+              fullWidth
+              label="Github Username"
+              onChange={onChange}
+              value={githubusername}
+            />
           </Grid>
           <Grid size={{ xs: 6 }}>
             <Typography>
@@ -197,6 +239,7 @@ const ProfileForm = () => {
               required
               placeholder="Select Profesional status"
               defaultValue={""}
+              value={status}
             >
               <MenuItem value="">None</MenuItem>
               <MenuItem value="Developer">Developer</MenuItem>
@@ -225,6 +268,8 @@ const ProfileForm = () => {
               multiline
               rows={4}
               fullWidth
+              onChange={onChange}
+              value={bio}
               label="A short bio of yourself"
             />
           </Grid>
@@ -239,23 +284,53 @@ const ProfileForm = () => {
           {displaySocialInputs ? (
             <>
               <Grid size={{ xs: 6 }}>
-                <TextField fullWidth name="twitter" label="Twitter URL" />
+                <TextField
+                  fullWidth
+                  name="twitter"
+                  label="Twitter URL"
+                  onChange={onChange}
+                  value={twitter}
+                />
               </Grid>
               <Grid size={{ xs: 6 }}></Grid>
               <Grid size={{ xs: 6 }}>
-                <TextField fullWidth name="facebook" label="FaceBook URL" />
+                <TextField
+                  fullWidth
+                  name="facebook"
+                  label="FaceBook URL"
+                  onChange={onChange}
+                  value={facebook}
+                />
               </Grid>
               <Grid size={{ xs: 6 }}></Grid>
               <Grid size={{ xs: 6 }}>
-                <TextField fullWidth name="youtube" label="YouTube URL" />
+                <TextField
+                  fullWidth
+                  name="youtube"
+                  label="YouTube URL"
+                  onChange={onChange}
+                  value={youtube}
+                />
               </Grid>
               <Grid size={{ xs: 6 }}></Grid>
               <Grid size={{ xs: 6 }}>
-                <TextField fullWidth name="linkedin" label="Linkedin URL" />
+                <TextField
+                  fullWidth
+                  name="linkedin"
+                  label="Linkedin URL"
+                  onChange={onChange}
+                  value={linkedin}
+                />
               </Grid>
               <Grid size={{ xs: 6 }}></Grid>
               <Grid size={{ xs: 6 }}>
-                <TextField fullWidth name="instagram" label="Instagram URL" />
+                <TextField
+                  fullWidth
+                  name="instagram"
+                  label="Instagram URL"
+                  onChange={onChange}
+                  value={instagram}
+                />
               </Grid>
             </>
           ) : null}