189 create user profile page

src/App.css

@@ -22,6 +22,13 @@
   text-align: center;
 }
 
+.profile-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 4rem;
+}
+
 .headshot {
   width: 50px;
   height: 50px;

src/App.js

@@ -11,6 +11,8 @@ import Welcome from "./pages/welcome"
 import MyCohort from "./pages/myCohort"
 import Cohorts from "./pages/cohorts"
 import UserSearchResult from "./pages/UserSearchResult"
+import UserProfile from "./pages/userProfile"
+
 
 const App = () => {
   return (
@@ -23,6 +25,15 @@ const App = () => {
             <Route path="loading" element={<Loading />} />
             <Route path="verification" element={<Verification />} />
 
+            <Route
+              path="profile/:id"
+              element={
+                <ProtectedRoute>
+                  <UserProfile />
+                </ProtectedRoute>
+              }
+            />
+
             <Route
               index
               element={

src/components/form/textInput/index.js

@@ -1,13 +1,14 @@
 import { useState } from "react";
 
-const TextInput = ({ value, onChange, name, label, icon, type = "text" , placeholder, required}) => {
+const TextInput = ({ value, onChange, name, label, icon, type = "text" , placeholder, required, disabled}) => {
   const [input, setInput] = useState("");
   const [showpassword, setShowpassword] = useState(false);
   if (type === "password") {
     return (
       <div className="inputwrapper">
         <label htmlFor={name}>{label}</label>
         <input
+          disabled={disabled}
           type={type}
           name={name}
           value={value}
@@ -44,6 +45,7 @@ const TextInput = ({ value, onChange, name, label, icon, type = "text" , placeho
       <div className="inputwrapper">
         {label && <label htmlFor={name}>{label}</label>}
         <input
+          disabled={disabled}
           type={type}
           name={name}
           value={value}

src/locales/en/translation.json

@@ -68,6 +68,7 @@
   "register": "Register",
   "required": "Required",
   "requiredFields": "Required fields need to be complete",
+  "save" : "Save",
   "searchResults": "Search Results",
   "seeExercises": "See Exercises",
   "sendMessage": "send message",
@@ -78,6 +79,7 @@
   "submit": "Submit",
   "teachers": "Teachers",
   "tellUsAboutYourselfMessage": "Tell use about yourself, your educational and professional highlight to date",
+  "trainingInfo" : "Training Info",
   "units": "Units",
   "uploadValidImage": "Please upload a valid image file",
   "userExist": "Already a user?",

src/locales/sv/translation.json

@@ -68,6 +68,7 @@
   "register": "Registrera dig",
   "required": "Obligatorisk",
   "requiredFields": "Fyll i alla obligatoriska fält",
+  "save" : "Spara",
   "searchResults": "Sökresultat",
   "seeExercises": "Visa övningar",
   "sendMessage": "Skicka meddelande",
@@ -78,6 +79,7 @@
   "submit": "Skicka in",
   "teachers": "Lärare",
   "tellUsAboutYourselfMessage": "Berätta om dig själv, din pedagogiska och professionella höjdpunkt hittills",
+  "trainingInfo" : "Skolningsinformation",
   "units": "Enheter",
   "uploadValidImage": "Ladda upp en giltig bildfil",
   "userExist": "Redan en användare?",

src/pages/userProfile/index.js

@@ -0,0 +1,215 @@
+import { useTranslation } from "react-i18next"
+import Card from "../../components/card"
+import ProfileCircle from "../../components/profileCircle"
+import "./style.css"
+import { useContext, useEffect, useState } from "react"
+import { useParams } from "react-router-dom"
+import {
+  getUserById,
+  getUserProfileById,
+  updateProfile,
+} from "../../service/apiClient.js"
+import Button from "../../components/button"
+import BasicInfo from "../../components/basic-info"
+import ContactInfo from "../../components/contactInfo"
+import TrainingInfo from "../../components/trainingInfo"
+import Bio from "../../components/bio"
+import ProfessionalInfo from "../../components/professionalinfo"
+import { AuthContext } from "../../context/auth"
+
+const UserProfile = () => {
+  const currentUserId = useContext(AuthContext).userId
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [disabledText, setDisabledText] = useState(true)
+  const [saveButton, setSave] = useState(false)
+  const [isTeacher] = useState(false)
+  const [user, setUser] = useState()
+  const [profile, setProfile] = useState({
+    firstName: "",
+    lastName: "",
+    githubUsername: "",
+    bio: "",
+    email: "",
+    mobile: "",
+    password: "",
+    role: "",
+    specialism: "",
+    cohort: "",
+    startDate: "",
+    endDate: "",
+    imageUrl: "",
+  })
+  const [tempUser, setTempUser] = useState(profile)
+
+  useEffect(() => {
+    getUserProfileById(id).then((profile) => {
+      setProfile(profile.data.profile)
+      setTempUser(profile.data.profile)
+    })
+
+    getUserById(id).then((user) => {
+      setUser(user.data.user)
+    })
+  }, [id])
+
+  console.log("USER INFORMATION ---->", user)
+  console.log("PROFILE INFORMATION ---->", profile)
+
+  const initials =
+    profile && profile.firstName && profile.lastName
+      ? `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`
+      : "A"
+
+  let classes = ""
+  if (saveButton === false) {
+    classes = "locked-input"
+  }
+
+  // const splitWord = profile.bio.trim(/\s+/g, "").length
+
+  const onInput = (event) => {
+    const { name, value } = event.target
+
+    setProfile({
+      ...profile,
+      [name]: value,
+    })
+  }
+
+  const revert = () => {
+    setProfile(tempUser)
+    console.log("revert")
+    return
+  }
+
+  const save = () => {
+    updateProfile(
+      id,
+      profile.firstName,
+      profile.lastName,
+      profile.githubUsername,
+      profile.bio,
+      profile.email,
+      profile.mobile,
+      profile.password,
+      profile.role,
+      profile.specialism,
+      profile.cohort,
+      profile.startDate,
+      profile.endDate,
+      profile.imageUrl
+    )
+    setTempUser(profile)
+    console.log("save")
+    return
+  }
+
+  const checkCurrentUser = () => {
+    console.log("CURRENT ID", currentUserId, "PROFILE ID", id)
+    if (Number(currentUserId) === Number(id)) {
+      return (
+        <div className="profile-buttons">
+          <Button
+            text={t("cancel")}
+            onClick={() => {
+              setSave(false)
+              setDisabledText(true)
+              revert()
+            }}
+          />
+
+          {saveButton ? (
+            <Button
+              classes="saveButton"
+              text={t("save")}
+              onClick={() => {
+                setSave(false)
+                setDisabledText(true)
+                save()
+              }}
+            />
+          ) : (
+            <Button
+              text={t("edit")}
+              onClick={() => {
+                setSave(true)
+                setDisabledText(false)
+              }}
+            />
+          )}
+        </div>
+      )
+    }
+  }
+
+  return (
+    <main>
+      <div className="welcome">
+        <h2>{t("profile")}</h2>
+      </div>
+
+      <Card>
+        <div className="profile-information">
+          <ProfileCircle initials={initials} />
+          <section>
+            <h4>
+              {profile.firstName} {profile.lastName}
+            </h4>
+            {/* <p>{user.title}</p> */}
+          </section>
+        </div>
+
+        <div className="profile-container">
+          <section className={`${classes}`}>
+            <BasicInfo
+              onInput={onInput}
+              disabledText={disabledText}
+              data={profile}
+            />
+          </section>
+
+          {isTeacher ? (
+            <section className={`${classes}`}>
+              <ProfessionalInfo
+                onInput={onInput}
+                disabledText={disabledText}
+                data={profile}
+              />
+            </section>
+          ) : (
+            <section className={`${classes}`}>
+              <TrainingInfo
+                onInput={onInput}
+                disabledText={disabledText}
+                data={profile}
+              />
+            </section>
+          )}
+
+          <section className={`${classes}`}>
+            <ContactInfo
+              onInput={onInput}
+              disabledText={disabledText}
+              data={profile}
+            />
+          </section>
+
+          <section className={`${classes}`}>
+            <Bio
+              onInput={onInput}
+              disabledText={disabledText}
+              data={profile}
+              // splitWord={splitWord}
+            />
+          </section>
+        </div>
+
+        <p className="text-blue1">{`*${t("required")}`}</p>
+        {checkCurrentUser()}
+      </Card>
+    </main>
+  )
+}
+
+export default UserProfile

src/pages/userProfile/style.css

@@ -0,0 +1,43 @@
+.profile-information {
+  display: grid;
+  grid-template-columns: 70px 1fr;
+}
+
+.welcome-formheader {
+  border-top: solid rgba(128, 128, 128, 0.226) 2px;
+  margin-top: 20px;
+  padding-top: 20px;
+}
+
+.welcome {
+  margin-bottom: 20px;
+}
+
+.profile-buttons {
+  display: grid;
+  grid-template-columns: 170px 170px;
+  gap: 20px;
+  justify-content: end;
+}
+
+.profile-buttons > button {
+  background-color:  #F0F5FA;
+  color: #64648C;
+  cursor: pointer;
+}
+
+.profile-buttons > .saveButton {
+  background-color:  #000046;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.locked-input form input {
+  background: white;
+  color: black;
+}
+
+.locked-input textarea {
+  background: white;
+  color: black;
+}

src/service/apiClient.js

@@ -54,7 +54,7 @@ async function postComment(comment) {
 
 async function getCohorts() {
   const res = await get("cohorts")
-  return res.data 
+  return res.data
 }
 
 async function getTeachers() {
@@ -96,8 +96,12 @@ async function getUsers() {
 }
 
 async function getUserById(userId) {
-    return get(`users/${userId}`)
-  }
+  return get(`users/${userId}`)
+}
+
+async function getUserProfileById(userId) {
+  return get(`users/profile/${userId}`)
+}
 
 async function put(endpoint, data, auth = true) {
   return await request("PUT", endpoint, data, auth)
@@ -142,7 +146,7 @@ async function toggleLike(postId) {
 }
 
 async function getStudents() {
-  const response = await get('students')
+  const response = await get("students")
   return response.data.students
 }
 
@@ -166,5 +170,6 @@ export {
   getUserById,
   getStudents,
   getSelfTeacher,
-  getSelfStudent
+  getSelfStudent,
+  getUserProfileById
 }