personal information done

thoughtlessnerd · May 8, 2023 · 09ee761 · 09ee761
1 parent c6dc63f
commit 09ee761
Show file tree

Hide file tree

Showing 3 changed files with 277 additions and 2 deletions.
diff --git a/client/src/components/Dropdown.tsx b/client/src/components/Dropdown.tsx
@@ -0,0 +1,49 @@
+import React, { Dispatch, SetStateAction } from "react";
+
+interface DropdownProps {
+  className?: string;
+  open: boolean;
+  elements: string[];
+  selected: number;
+  activeClass?: string;
+  elementClass?: string;
+  onClick?: (i: number) => void;
+  toggle?: Dispatch<SetStateAction<boolean>>;
+  setValue?: Dispatch<SetStateAction<string>>;
+  setActive?: Dispatch<SetStateAction<number>>;
+}
+
+const Dropdown = (props: DropdownProps) => {
+  return (
+    <div
+      className={props.className}
+      style={{
+        position: "absolute",
+        transformOrigin: "top",
+        transform: `scaleY(${props.open ? 1 : 0})`,
+        overflow: "hidden",
+        transition: "transform 0.2s ease-in-out",
+      }}
+    >
+      {props.elements.map((element, index) => {
+        return (
+          <div
+            key={index}
+            onClick={() => {
+              if (props.toggle) props.toggle(false);
+              if (props.setActive) props.setActive(index);
+              if (props.setValue) props.setValue(element);
+            }}
+            className={`${props.elementClass} ${
+              props.selected === index ? props.activeClass : ""
+            }`}
+          >
+            {element}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Dropdown;
diff --git a/client/src/css/ProfileInfo.css b/client/src/css/ProfileInfo.css
@@ -94,3 +94,72 @@
 .profileInfo-section-links-input:focus {
   outline: none;
 }
+
+.profileInfo-section-personalInfo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.profileInfo-section-personalInfo-element {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: relative;
+}
+
+.profileInfo-section-personalInfo-label {
+  font-weight: 500;
+}
+
+.profileInfo-section-personalInfo-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: relative;
+  width: 100%;
+  background-color: var(--white);
+  top: 100%;
+  border-radius: 1rem;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+}
+
+.profileInfo-section-personalInfo-dropdown-element,
+.profileInfo-section-personalInfo-button {
+  border: none;
+  background-color: var(--white);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 1.2rem;
+  border-radius: 0.8rem;
+}
+
+.profileInfo-section-personalInfo-button-arrow {
+  position: absolute;
+
+  right: 1rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-top: 2px solid var(--gray);
+  border-right: 2px solid var(--gray);
+  transform: rotate(135deg);
+}
+
+.profileInfo-section-personalInfo-button {
+  padding: 0.8rem 1.2rem;
+}
+
+.profileInfo-section-personalInfo-dropdown-element:hover {
+  background-color: var(--primary-hover);
+  cursor: pointer;
+}
+
+.profileInfo-section-personalInfo-dropdown-element-active,
+.profileInfo-section-personalInfo-dropdown-element-active:hover {
+  background-color: var(--primary);
+  cursor: pointer;
+  color: var(--white);
+}
diff --git a/client/src/ui/ProfileInfo.tsx b/client/src/ui/ProfileInfo.tsx
@@ -3,8 +3,7 @@ import "../css/ProfileInfo.css";
 import { useEffect } from "react";
 import LabeledElement from "../components/LabeledElement";
 import LabeledLogo from "../components/LabeledLogo";
-import Colors from "../constants/Colors";
-import Icon from "../components/Icon";
+import Dropdown from "../components/Dropdown";
 
 interface ProfileInfoProps {
   user: any;
@@ -15,11 +14,42 @@ const ProfileInfo = (props: ProfileInfoProps) => {
   const [aboutValue, setAboutValue] = React.useState<string>("");
   const [links, setLinks] = React.useState<any>({});
   const [editLinks, setEditLinks] = React.useState<boolean>(false);
+  const [editPersonalInfo, setEditPersonalInfo] =
+    React.useState<boolean>(false);
+  const [openEducationDropdown, setOpenEducationDropdown] =
+    React.useState<boolean>(false);
+  const [educationDropdownValue, setEducationDropdownValue] =
+    React.useState<string>("Graduation");
+  const [educationDropdownSelected, setEducationDropdownSelected] =
+    React.useState<number>(0);
+
+  const [openProfessionDropdown, setOpenProfessionDropdown] =
+    React.useState<boolean>(false);
+  const [professionDropdownValue, setProfessionDropdownValue] =
+    React.useState<string>("Student");
+  const [professionDropdownSelected, setProfessionDropdownSelected] =
+    React.useState<number>(0);
 
   useEffect(() => setAboutValue(props.user.about), [props.user.about]);
   useEffect(() => {
     setLinks(props.user.links || {});
   }, [props.user.links]);
+  useEffect(() => {
+    let data = props.user.education;
+    if (data) {
+      data = data.split(";");
+      setEducationDropdownValue(data[0]);
+      setEducationDropdownSelected(parseInt(data[1]));
+    }
+  }, [props.user.education]);
+  useEffect(() => {
+    let data = props.user.profession;
+    if (data) {
+      data = data.split(";");
+      setProfessionDropdownValue(data[0]);
+      setProfessionDropdownSelected(parseInt(data[1]));
+    }
+  }, [props.user.profession]);
 
   const saveUserData = async (user: any, field: string, value: any) => {
     const res = await fetch(
@@ -130,6 +160,7 @@ const ProfileInfo = (props: ProfileInfoProps) => {
                 label={
                   <input
                     className="profileInfo-section-links-input"
+                    readOnly={!editLinks}
                     placeholder="Github"
                     value={links?.github}
                     onChange={(e) => {
@@ -160,6 +191,7 @@ const ProfileInfo = (props: ProfileInfoProps) => {
                 label={
                   <input
                     className="profileInfo-section-links-input"
+                    readOnly={!editLinks}
                     placeholder="Facebook"
                     value={links?.facebook}
                     onChange={(e) => {
@@ -190,6 +222,7 @@ const ProfileInfo = (props: ProfileInfoProps) => {
                 label={
                   <input
                     className="profileInfo-section-links-input"
+                    readOnly={!editLinks}
                     placeholder="Twitter"
                     value={links?.twitter}
                     onChange={(e) => {
@@ -220,6 +253,7 @@ const ProfileInfo = (props: ProfileInfoProps) => {
                 label={
                   <input
                     className="profileInfo-section-links-input"
+                    readOnly={!editLinks}
                     placeholder="Instagram"
                     value={links?.instagram}
                     onChange={(e) => {
@@ -250,6 +284,7 @@ const ProfileInfo = (props: ProfileInfoProps) => {
                 label={
                   <input
                     className="profileInfo-section-links-input"
+                    readOnly={!editLinks}
                     placeholder="Your Website"
                     value={links?.website}
                     onChange={(e) => {
@@ -271,6 +306,128 @@ const ProfileInfo = (props: ProfileInfoProps) => {
           </LabeledElement>
         </div>
       </section>
+      <span className="profileInfo-section-split"></span>
+
+      <section className="profileInfo-section">
+        <div
+          className="row"
+          style={{
+            justifyContent: "space-between",
+          }}
+        >
+          <h1 className="profileInfo-section-label">Personal Information</h1>
+          <button
+            className="profileInfo-section-edit"
+            onClick={() => {
+              if (editPersonalInfo) {
+                saveUserData(
+                  props.user,
+                  "education",
+                  educationDropdownValue + ";" + educationDropdownSelected
+                );
+                saveUserData(
+                  props.user,
+                  "profession",
+                  professionDropdownValue + ";" + professionDropdownSelected
+                );
+                setEditPersonalInfo(false);
+                setOpenEducationDropdown(false);
+                setOpenProfessionDropdown(false);
+              } else {
+                setEditPersonalInfo(true);
+              }
+            }}
+          >
+            {editPersonalInfo ? "Save" : "Edit"}
+          </button>
+        </div>
+        <div className="profileInfo-section-personalInfo">
+          <LabeledElement
+            className="profileInfo-section-personalInfo-element"
+            label="Highest Education"
+            labelClass="profileInfo-section-personalInfo-label"
+          >
+            <span
+              className="profileInfo-section-personalInfo-button"
+              onClick={() => {
+                if (editPersonalInfo)
+                  setOpenEducationDropdown(!openEducationDropdown);
+                else setOpenEducationDropdown(false);
+              }}
+            >
+              {educationDropdownValue}
+              <span
+                className="profileInfo-section-personalInfo-button-arrow"
+                style={{
+                  transition: "all 0.3s ease",
+                  transform: !openEducationDropdown
+                    ? "rotate(135deg)"
+                    : "rotate(-45deg)",
+                }}
+              />
+            </span>
+            <Dropdown
+              className="profileInfo-section-personalInfo-dropdown"
+              setValue={setEducationDropdownValue}
+              setActive={setEducationDropdownSelected}
+              toggle={setOpenEducationDropdown}
+              elements={[
+                "Primary",
+                "Secondary",
+                "High School",
+                "Graduation",
+                "Post Graduation",
+              ]}
+              elementClass="profileInfo-section-personalInfo-dropdown-element"
+              activeClass="profileInfo-section-personalInfo-dropdown-element-active"
+              selected={educationDropdownSelected}
+              open={openEducationDropdown}
+            />
+          </LabeledElement>
+          <LabeledElement
+            className="profileInfo-section-personalInfo-element"
+            label="What do you do currently?"
+            labelClass="profileInfo-section-personalInfo-label"
+          >
+            <span
+              className="profileInfo-section-personalInfo-button"
+              onClick={() => {
+                if (editPersonalInfo)
+                  setOpenProfessionDropdown(!openProfessionDropdown);
+                else setOpenProfessionDropdown(false);
+              }}
+            >
+              {professionDropdownValue}
+              <span
+                className="profileInfo-section-personalInfo-button-arrow"
+                style={{
+                  transition: "all 0.3s ease",
+                  transform: !openProfessionDropdown
+                    ? "rotate(135deg)"
+                    : "rotate(-45deg)",
+                }}
+              />
+            </span>
+            <Dropdown
+              className="profileInfo-section-personalInfo-dropdown"
+              setValue={setProfessionDropdownValue}
+              setActive={setProfessionDropdownSelected}
+              toggle={setOpenProfessionDropdown}
+              elements={[
+                "Schooling",
+                "College Student",
+                "Teaching",
+                "Job",
+                "Freelancing",
+              ]}
+              elementClass="profileInfo-section-personalInfo-dropdown-element"
+              activeClass="profileInfo-section-personalInfo-dropdown-element-active"
+              selected={professionDropdownSelected}
+              open={openProfessionDropdown}
+            />
+          </LabeledElement>
+        </div>
+      </section>
     </div>
   );
 };