Bc 237 migrate edit profile

src/components/Header/Header.scss

@@ -2,6 +2,6 @@
   font-size: 24px;
   font-weight: 600;
   line-height: 33px;
-  margin-top: 10px;
+  margin: 19px;
   text-align: center;
 }

src/screens/EditProfile/EditProfile.jsx

@@ -5,32 +5,42 @@ import {
   AddPortfolioProject,
   ShowPortfolioProjects,
 } from '../../components/Projects/PortfolioCard/PortfolioCard';
-import { Form } from '../../components/Form/Form';
+import { EditProfileForm } from './EditProfileForm';
 import { Header } from '../../components/Header/Header';
 import { Modal } from '../../components/Modal/Modal';
 
 import { uiActions } from '../../services/redux/slices/uiSlice';
 import { updateUser } from '../../services/api/users';
 import { userForm } from '../../services/formData';
 import './EditProfile.scss';
+import { HiPencil } from 'react-icons/hi';
 import { useEffect } from 'react';
 
 export const EditProfile = ({ currUser }) => {
   const header = {
-    text: "Before you can create or join a project, we'll need to finish your profile first.",
-    title: 'About You',
+    title: 'Edit Profile',
   };
 
   return (
     <>
       <div className="edit-profile">
-        <Header headerTitle={header.title} headerText={header.text} />
-        <AboutUser />
-        <AddPortfolioProject />
-        <ShowPortfolioProjects currUser={currUser} />
-        <Link to="/roulette">
-          <button>Start Collaborating!</button>
-        </Link>
+        <Header headerTitle={header.title} />
+        <div className="profile-picture">
+          <div className="toggle-edit-mode">
+            <HiPencil size={22} />
+          </div>
+          <div className="image"></div>
+          {currUser ? (
+            <p className="currUser">
+              {currUser.first_name} {currUser.last_name}
+            </p>
+          ) : (
+            <p className="currUser">First, Last</p>
+          )}
+          <AboutUser />
+          <AddPortfolioProject />
+          <ShowPortfolioProjects currUser={currUser} />
+        </div>
       </div>
     </>
   );
@@ -70,7 +80,7 @@ const AboutUser = () => {
 
   return (
     <div className="about-user">
-      <Form formData={userForm} formState={[userInfo, setUserInfo, handleUserUpdate]} />
+      <EditProfileForm formData={userForm} formState={[userInfo, setUserInfo, handleUserUpdate]} />
     </div>
   );
 };

src/screens/EditProfile/EditProfile.scss

@@ -1,14 +1,71 @@
 .edit-profile {
-  .about-user {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .profile-picture {
+    position: relative;
+  }
+
+  .toggle-edit-mode {
+    align-items: center;
+    background-color: #d9d9d9;
+    border-radius: 100%;
+    color: #fff;
+    cursor: pointer;
     display: flex;
-    flex-direction: column;
+    height: 29px;
+    justify-content: center;
+    position: absolute;
+    right: 78px;
+    top: 10px;
+    width: 29px;
+  }
+
+  .image {
+    background-color: #c4c4c4;
+    border-radius: 100%;
+    height: 160px;
+    margin: auto;
+    width: 160px;
+  }
+
+  .currUser {
+    font-size: 24px;
+    font-weight: 600;
+    margin: 15px 0px 30px;
+    text-align: center;
+  }
+
+  .name {
+    font-size: 24px;
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+
+  .role {
+    font-size: 18px;
   }
-  .add-portfolio-project {
+
+  .media {
     display: flex;
-    flex-direction: column;
-    form {
-      display: flex;
-      flex-direction: column;
+    justify-content: space-evenly;
+    margin-top: 10px;
+
+    div {
+      background-color: #d9d9d9;
+      height: 30px;
+      width: 30px;
     }
   }
 }
+
+.add-portfolio-project {
+  display: flex;
+  flex-direction: column;
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+}

src/screens/EditProfile/EditProfileForm.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import parseHtml from 'html-react-parser';
+import { handleChange } from '../../services/utils/formHandlers';
+import './EditProfileForm.scss';
+
+export const EditProfileForm = ({ formData, formState }) => {
+  const { button, handlers, inputs } = formData;
+  const [stateObject, setterFunction, handleSubmit] = formState;
+  const [aboutCharCount, setAboutCharCount] = useState(0);
+  const [factCharCount, setFactCharCount] = useState(0);
+  const navigate = useNavigate();
+
+  const showUser = (applicantID) => {
+    navigation.navigate('UserProfile', {
+      userID: applicantID,
+    });
+  };
+
+  const handleContent = (e) => {
+    if (e.target.name === 'about') {
+      setAboutCharCount(e.target.value.length);
+    } else if (e.target.name === 'fun_fact') {
+      setFactCharCount(e.target.value.length);
+    }
+  };
+
+  return (
+    <form className="edit-profile-form" onSubmit={handleSubmit}>
+      <button className="submit-btn" type="submit" onClick={showUser}>
+        Done
+      </button>
+      {inputs.map((input) => (
+        <div className="container">
+          <label htmlFor={input.name} id={input.name}>
+            {parseHtml(input.labelText)}
+          </label>
+          {input.type === 'checkbox' ? (
+            <div key={input.name} className="role-wrapper">
+              {input.options.map((option) => (
+                <div className="role-inputs">
+                  <input
+                    className="checkbox"
+                    key={input.name}
+                    onChange={(e) => handleChange(e, input.name, setterFunction)}
+                    type={input.type}
+                    value={option}
+                  />
+                  <label htmlFor={input.name}>{option}</label>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div>
+              <textarea
+                id={input.name}
+                name={input.name}
+                key={input.name}
+                onChange={(e) => {
+                  handleChange(e, input.name, setterFunction);
+                  handleContent(e);
+                }}
+                type={input.type}
+                value={stateObject[input.name]}
+                maxLength={input.max_chars}
+                required={input.required ? true : null}
+              ></textarea>
+              {input.name === 'about' ? (
+                <p className="charCount">{input.max_chars - aboutCharCount}</p>
+              ) : (
+                <p className="charCount">{input.max_chars - factCharCount}</p>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </form>
+  );
+};

src/screens/EditProfile/EditProfileForm.scss

@@ -0,0 +1,97 @@
+.submit-btn {
+  background-color: white;
+  color: #000000;
+  font-family: 'Nunito';
+  font-size: 16px;
+  font-weight: 600;
+  position: absolute;
+  right: 33px;
+  text-transform: uppercase;
+  top: -45px;
+  width: 2px;
+}
+
+.submit-btn:active {
+  color: #333;
+}
+
+div > label + div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.container {
+  display: flex;
+}
+
+#role {
+  align-self: center;
+  margin-right: 8px;
+}
+
+.role-wrapper {
+  gap: 12px;
+
+  input[type='checkbox'] {
+    appearance: none;
+    border: 4px solid white;
+    box-shadow: 0 0 0 1px black;
+    margin: 0px 8px 0px 5px;
+    position: relative;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+  }
+
+  input[type='checkbox']:checked::before {
+    color: #000000;
+    content: '✓';
+    display: inline-block;
+    font-size: 18px;
+    position: absolute;
+    right: -8.8px;
+    text-align: center;
+    top: -13px;
+  }
+
+  .role-inputs {
+    border: 1px solid #000000;
+    border-radius: 4px;
+    padding: 3px;
+  }
+
+  label {
+    font-size: 12px;
+    margin-bottom: 0.5rem;
+  }
+}
+
+form > div + div.container {
+  display: flex;
+  flex-direction: column;
+}
+
+label#about,
+label#fun_fact {
+  font-weight: 400;
+  margin-top: 25px;
+}
+
+textarea {
+  border: 1px solid #000000;
+  border-radius: 4px;
+  font-family: 'Nunito';
+  height: 133px;
+  position: relative;
+  resize: none;
+  width: 100%;
+}
+
+.charCount {
+  font-size: 10.5px;
+  font-weight: 300;
+  margin-top: 118px;
+  position: absolute;
+  right: 4px;
+}

src/services/formData.js

@@ -70,30 +70,25 @@ export const userForm = {
   },
   inputs: [
     {
-      labelText: 'Tell us a bit about you <small>(max 250 characters)</small>',
+      labelText: 'I am a:',
+      name: 'role',
+      required: true,
+      type: 'checkbox',
+      options: ['Software Developer', 'UX Designer'],
+    },
+    {
+      labelText: 'About me',
       name: 'about',
       max_chars: 250,
       required: true,
       type: 'textarea',
     },
     {
-      labelText: 'Include a fun fact!  <small> (optional, max 250 characters)</small> ',
+      labelText: 'Fun fact  <small> (optional)</small> ',
       name: 'fun_fact',
       max_chars: 250,
       type: 'textarea',
     },
-    {
-      labelText: 'I am a...',
-      name: 'role',
-      required: true,
-      type: 'select',
-      options: ['Select role', 'UX Designer', 'Software Engineer'],
-    },
-    {
-      labelText: 'Link to your portfolio <small>(optional)</small>',
-      name: 'portfolio_link',
-      type: 'text',
-    },
   ],
 };