From d5338d97d42857e80cf6db40db4c5836ede5d447 Mon Sep 17 00:00:00 2001
From: ilham saleh <ilham2saleh@gmail.com>
Date: Fri, 16 Feb 2024 10:17:03 +0000
Subject: [PATCH 01/35] Create user profile image

---
 src/App.css                        |   8 ++
 src/App.js                         |  15 +++-
 src/components/navigation/index.js |   4 +-
 src/pages/userProfile/index.js     | 123 +++++++++++++++++++++++++++++
 4 files changed, 146 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/userProfile/index.js

diff --git a/src/App.css b/src/App.css
index 5ff3d270..06d49ca6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -21,3 +21,11 @@
   font-size: 18px;
   text-align: center;
 }
+
+.profile-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 4rem;
+  
+}
diff --git a/src/App.js b/src/App.js
index e5f74fea..58407e81 100644
--- a/src/App.js
+++ b/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={
@@ -40,11 +51,11 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
-             <Route
+            <Route
               path="cohorts"
               element={
                 <ProtectedRoute>
-                  <Cohorts/>
+                  <Cohorts />
                 </ProtectedRoute>
               }
             />
diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js
index 4df2bc85..dcfc74f2 100644
--- a/src/components/navigation/index.js
+++ b/src/components/navigation/index.js
@@ -6,7 +6,7 @@ import "./style.css"
 import { useTranslation } from "react-i18next"
 
 const Navigation = () => {
-  const {t} = useTranslation()
+  const { t } = useTranslation()
   return (
     <nav>
       <ul>
@@ -17,7 +17,7 @@ const Navigation = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to="/profile/1">
             <ProfileIcon />
             <p>{t("profile")}</p>
           </NavLink>
diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
new file mode 100644
index 00000000..166354af
--- /dev/null
+++ b/src/pages/userProfile/index.js
@@ -0,0 +1,123 @@
+import { useTranslation } from "react-i18next"
+import Form from "../../components/form"
+import TextInput from "../../components/form/textInput"
+import ProfileIcon from "../../assets/icons/profileIcon"
+
+const UserProfile = () => {
+  const { t } = useTranslation()
+  return (
+    <main>
+      <div className="welcome-formheader">
+        <h3>{t("profile")}</h3>
+      </div>
+      <div className="profile-container">
+        <Form className="welcome-form">
+          <div className="welcome-form-profileimg">
+            <p className="text-blue1">{t("photo")}</p>
+            <div className="welcome-form-profileimg-input">
+              <ProfileIcon colour="#28C846" background="#64DC78" />
+              <p className="text-blue1">{t("addHeadShot")}</p>
+            </div>
+            <p className="welcome-form-profileimg-error">
+              {t("uploadValidImage")}
+            </p>
+          </div>
+          <div className="welcome-form-inputs">
+            <TextInput
+              name="firstName"
+              label={`${t("firstName")} *`}
+              placeholder={`${t("enterYourFirstName")} *`}
+              required
+            />
+            <TextInput
+              name="lastName"
+              label={`${t("lastName")} *`}
+              placeholder={`${t("enterYourLastName")} *`}
+              required
+            />
+            <TextInput
+              name="githubUsername"
+              label={`${t("githubUserName")} *`}
+              placeholder={`${t("enterYourGithubUser")} *`}
+              required
+            />
+            {/* {message && <p className="input-message">{message}</p>} */}
+            <p className="text-blue1">{`*${t("required")}`}</p>
+          </div>
+        </Form>
+
+        <Form className="welcome-form">
+          <div className="welcome-form-profileimg">
+            <p className="text-blue1">{t("photo")}</p>
+            <div className="welcome-form-profileimg-input">
+              <ProfileIcon colour="#28C846" background="#64DC78" />
+              <p className="text-blue1">{t("addHeadShot")}</p>
+            </div>
+            <p className="welcome-form-profileimg-error">
+              {t("uploadValidImage")}
+            </p>
+          </div>
+          <div className="welcome-form-inputs">
+            <TextInput
+              name="firstName"
+              label={`${t("firstName")} *`}
+              placeholder={`${t("enterYourFirstName")} *`}
+              required
+            />
+            <TextInput
+              name="lastName"
+              label={`${t("lastName")} *`}
+              placeholder={`${t("enterYourLastName")} *`}
+              required
+            />
+            <TextInput
+              name="githubUsername"
+              label={`${t("githubUserName")} *`}
+              placeholder={`${t("enterYourGithubUser")} *`}
+              required
+            />
+            {/* {message && <p className="input-message">{message}</p>} */}
+            <p className="text-blue1">{`*${t("required")}`}</p>
+          </div>
+        </Form>
+
+        <Form className="welcome-form">
+            <div className="welcome-form-profileimg">
+              <p className="text-blue1">{t("photo")}</p>
+              <div className="welcome-form-profileimg-input">
+                <ProfileIcon colour="#28C846" background="#64DC78" />
+                <p className="text-blue1">{t("addHeadShot")}</p>
+              </div>
+              <p className="welcome-form-profileimg-error">
+                {t("uploadValidImage")}
+              </p>
+            </div>
+            <div className="welcome-form-inputs">
+              <TextInput
+                name="firstName"
+                label={`${t("firstName")} *`}
+                placeholder={`${t("enterYourFirstName")} *`}
+                required
+              />
+              <TextInput
+                name="lastName"
+                label={`${t("lastName")} *`}
+                placeholder={`${t("enterYourLastName")} *`}
+                required
+              />
+              <TextInput
+                name="githubUsername"
+                label={`${t("githubUserName")} *`}
+                placeholder={`${t("enterYourGithubUser")} *`}
+                required
+              />
+              {/* {message && <p className="input-message">{message}</p>} */}
+              <p className="text-blue1">{`*${t("required")}`}</p>
+            </div>
+          </Form>
+      </div>
+    </main>
+  )
+}
+
+export default UserProfile

From 761b276585108267ee629f266a51c59c797b4f42 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 11:32:11 +0000
Subject: [PATCH 02/35] FEAT: added dummy data, some new placeholders

---
 src/pages/userProfile/index.js | 62 +++++++++++++---------------------
 1 file changed, 24 insertions(+), 38 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 166354af..b4278324 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -2,14 +2,34 @@ import { useTranslation } from "react-i18next"
 import Form from "../../components/form"
 import TextInput from "../../components/form/textInput"
 import ProfileIcon from "../../assets/icons/profileIcon"
+import Card from "../../components/card"
+import ProfileCircle from "../../components/profileCircle"
+
+const user = {
+  firstName: "Lukas",
+  lastName: "Dembicki",
+  title: "Software Developer",
+  bio: "Hello I am a coder",
+  githubUsername: "PeachyOmnivore"
+}
+
+const initials = user && user.firstName && user.lastName ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}` : "A";
 
 const UserProfile = () => {
   const { t } = useTranslation()
+
+
   return (
     <main>
       <div className="welcome-formheader">
         <h3>{t("profile")}</h3>
       </div>
+      <Card>
+        <div className="">
+          <ProfileCircle initials={initials}/>
+          <h2>{user.firstName} {user.lastName}</h2>
+          <p>{user.title}</p>
+        </div>
       <div className="profile-container">
         <Form className="welcome-form">
           <div className="welcome-form-profileimg">
@@ -26,19 +46,19 @@ const UserProfile = () => {
             <TextInput
               name="firstName"
               label={`${t("firstName")} *`}
-              placeholder={`${t("enterYourFirstName")} *`}
+              placeholder={user.firstName ? user.firstName : `${t("enterYourFirstName")} *`}
               required
             />
             <TextInput
               name="lastName"
               label={`${t("lastName")} *`}
-              placeholder={`${t("enterYourLastName")} *`}
+              placeholder={user.lastName ? user.lastName : `${t("enterYourLastName")} *`}
               required
             />
             <TextInput
               name="githubUsername"
               label={`${t("githubUserName")} *`}
-              placeholder={`${t("enterYourGithubUser")} *`}
+              placeholder={user.githubUsername ? user.githubUsername : `${t("enterYourGithubUser")} *`}
               required
             />
             {/* {message && <p className="input-message">{message}</p>} */}
@@ -80,42 +100,8 @@ const UserProfile = () => {
             <p className="text-blue1">{`*${t("required")}`}</p>
           </div>
         </Form>
-
-        <Form className="welcome-form">
-            <div className="welcome-form-profileimg">
-              <p className="text-blue1">{t("photo")}</p>
-              <div className="welcome-form-profileimg-input">
-                <ProfileIcon colour="#28C846" background="#64DC78" />
-                <p className="text-blue1">{t("addHeadShot")}</p>
-              </div>
-              <p className="welcome-form-profileimg-error">
-                {t("uploadValidImage")}
-              </p>
-            </div>
-            <div className="welcome-form-inputs">
-              <TextInput
-                name="firstName"
-                label={`${t("firstName")} *`}
-                placeholder={`${t("enterYourFirstName")} *`}
-                required
-              />
-              <TextInput
-                name="lastName"
-                label={`${t("lastName")} *`}
-                placeholder={`${t("enterYourLastName")} *`}
-                required
-              />
-              <TextInput
-                name="githubUsername"
-                label={`${t("githubUserName")} *`}
-                placeholder={`${t("enterYourGithubUser")} *`}
-                required
-              />
-              {/* {message && <p className="input-message">{message}</p>} */}
-              <p className="text-blue1">{`*${t("required")}`}</p>
-            </div>
-          </Form>
       </div>
+      </Card>
     </main>
   )
 }

From 61578a7a0d7eb21a29660763e167fc2595332601 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:14:25 +0000
Subject: [PATCH 03/35] BUILD: CSS page and formatting of look.

---
 src/pages/userProfile/index.js  | 200 ++++++++++++++++++++------------
 src/pages/userProfile/style.css |  11 ++
 2 files changed, 134 insertions(+), 77 deletions(-)
 create mode 100644 src/pages/userProfile/style.css

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index b4278324..e195c1b9 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -4,103 +4,149 @@ import TextInput from "../../components/form/textInput"
 import ProfileIcon from "../../assets/icons/profileIcon"
 import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
+import "./style.css"
 
 const user = {
   firstName: "Lukas",
   lastName: "Dembicki",
   title: "Software Developer",
   bio: "Hello I am a coder",
-  githubUsername: "PeachyOmnivore"
+  githubUsername: "PeachyOmnivore",
 }
 
-const initials = user && user.firstName && user.lastName ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}` : "A";
+const initials =
+  user && user.firstName && user.lastName
+    ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
+    : "A"
 
 const UserProfile = () => {
   const { t } = useTranslation()
 
-
   return (
     <main>
-      <div className="welcome-formheader">
-        <h3>{t("profile")}</h3>
+
+      <div className="welcome">
+        <h2>{t("profile")}</h2>
       </div>
+
       <Card>
-        <div className="">
-          <ProfileCircle initials={initials}/>
-          <h2>{user.firstName} {user.lastName}</h2>
-          <p>{user.title}</p>
+        <div className="profile-information">
+          <ProfileCircle initials={initials} />
+          <section>
+            <h4>
+              {user.firstName} {user.lastName}
+            </h4>
+            <p>{user.title}</p>
+          </section>
         </div>
-      <div className="profile-container">
-        <Form className="welcome-form">
-          <div className="welcome-form-profileimg">
-            <p className="text-blue1">{t("photo")}</p>
-            <div className="welcome-form-profileimg-input">
-              <ProfileIcon colour="#28C846" background="#64DC78" />
-              <p className="text-blue1">{t("addHeadShot")}</p>
+
+        <div className="profile-container">
+          <section>
+            <div className="welcome-formheader">
+              <h3>{t("basicInfo")}</h3>
             </div>
-            <p className="welcome-form-profileimg-error">
-              {t("uploadValidImage")}
-            </p>
-          </div>
-          <div className="welcome-form-inputs">
-            <TextInput
-              name="firstName"
-              label={`${t("firstName")} *`}
-              placeholder={user.firstName ? user.firstName : `${t("enterYourFirstName")} *`}
-              required
-            />
-            <TextInput
-              name="lastName"
-              label={`${t("lastName")} *`}
-              placeholder={user.lastName ? user.lastName : `${t("enterYourLastName")} *`}
-              required
-            />
-            <TextInput
-              name="githubUsername"
-              label={`${t("githubUserName")} *`}
-              placeholder={user.githubUsername ? user.githubUsername : `${t("enterYourGithubUser")} *`}
-              required
-            />
-            {/* {message && <p className="input-message">{message}</p>} */}
-            <p className="text-blue1">{`*${t("required")}`}</p>
-          </div>
-        </Form>
+            <Form className="welcome-form">
+              <div className="welcome-form-profileimg">
+                <p className="text-blue1">{t("photo")}</p>
+                <div className="welcome-form-profileimg-input">
+                  <ProfileIcon colour="#28C846" background="#64DC78" />
+                  <p className="text-blue1">{t("addHeadShot")}</p>
+                </div>
+                <p className="welcome-form-profileimg-error">
+                  {t("uploadValidImage")}
+                </p>
+              </div>
+              <div className="welcome-form-inputs">
+                <TextInput
+                  name="firstName"
+                  label={`${t("firstName")} *`}
+                  placeholder={
+                    user.firstName
+                      ? user.firstName
+                      : `${t("enterYourFirstName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="lastName"
+                  label={`${t("lastName")} *`}
+                  placeholder={
+                    user.lastName
+                      ? user.lastName
+                      : `${t("enterYourLastName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="githubUsername"
+                  label={`${t("githubUserName")} *`}
+                  placeholder={
+                    user.githubUsername
+                      ? user.githubUsername
+                      : `${t("enterYourGithubUser")} *`
+                  }
+                  required
+                />
+                {/* {message && <p className="input-message">{message}</p>} */}
+                <p className="text-blue1">{`*${t("required")}`}</p>
+              </div>
+            </Form>
+          </section>
 
-        <Form className="welcome-form">
-          <div className="welcome-form-profileimg">
-            <p className="text-blue1">{t("photo")}</p>
-            <div className="welcome-form-profileimg-input">
-              <ProfileIcon colour="#28C846" background="#64DC78" />
-              <p className="text-blue1">{t("addHeadShot")}</p>
+          <section>
+            <div className="welcome-formheader">
+              <h3>{t("basicInfo")}</h3>
             </div>
-            <p className="welcome-form-profileimg-error">
-              {t("uploadValidImage")}
-            </p>
-          </div>
-          <div className="welcome-form-inputs">
-            <TextInput
-              name="firstName"
-              label={`${t("firstName")} *`}
-              placeholder={`${t("enterYourFirstName")} *`}
-              required
-            />
-            <TextInput
-              name="lastName"
-              label={`${t("lastName")} *`}
-              placeholder={`${t("enterYourLastName")} *`}
-              required
-            />
-            <TextInput
-              name="githubUsername"
-              label={`${t("githubUserName")} *`}
-              placeholder={`${t("enterYourGithubUser")} *`}
-              required
-            />
-            {/* {message && <p className="input-message">{message}</p>} */}
-            <p className="text-blue1">{`*${t("required")}`}</p>
-          </div>
-        </Form>
-      </div>
+            <Form className="welcome-form">
+              <div className="welcome-form-profileimg">
+                <p className="text-blue1">{t("photo")}</p>
+                <div className="welcome-form-profileimg-input">
+                  <ProfileIcon colour="#28C846" background="#64DC78" />
+                  <p className="text-blue1">{t("addHeadShot")}</p>
+                </div>
+                <p className="welcome-form-profileimg-error">
+                  {t("uploadValidImage")}
+                </p>
+              </div>
+              <div className="welcome-form-inputs">
+                <TextInput
+                  name="firstName"
+                  label={`${t("firstName")} *`}
+                  placeholder={
+                    user.firstName
+                      ? user.firstName
+                      : `${t("enterYourFirstName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="lastName"
+                  label={`${t("lastName")} *`}
+                  placeholder={
+                    user.lastName
+                      ? user.lastName
+                      : `${t("enterYourLastName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="githubUsername"
+                  label={`${t("githubUserName")} *`}
+                  placeholder={
+                    user.githubUsername
+                      ? user.githubUsername
+                      : `${t("enterYourGithubUser")} *`
+                  }
+                  required
+                />
+                {/* {message && <p className="input-message">{message}</p>} */}
+                <p className="text-blue1">{`*${t("required")}`}</p>
+              </div>
+            </Form>
+          </section>
+
+
+        </div>
       </Card>
     </main>
   )
diff --git a/src/pages/userProfile/style.css b/src/pages/userProfile/style.css
new file mode 100644
index 00000000..4cee1586
--- /dev/null
+++ b/src/pages/userProfile/style.css
@@ -0,0 +1,11 @@
+.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;
+}
+

From d3bc3c90dd1ecf7a5a93c1544b5b7dccb6a3638f Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:15:13 +0000
Subject: [PATCH 04/35] FEAT: spacing under header.

---
 src/pages/userProfile/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/userProfile/style.css b/src/pages/userProfile/style.css
index 4cee1586..fdf7fe6e 100644
--- a/src/pages/userProfile/style.css
+++ b/src/pages/userProfile/style.css
@@ -9,3 +9,7 @@
   padding-top: 20px;
 }
 
+.welcome {
+  margin-bottom: 20px;
+}
+

From 41f337861f9b136c33d1d9ae36dd4b43e99970fb Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:19:53 +0000
Subject: [PATCH 05/35] ADD: new translation.

---
 src/locales/en/translation.json |  1 +
 src/locales/se/translation.json |  1 +
 src/pages/userProfile/index.js  | 13 ++-----------
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index aa6094e1..67e9fd21 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -78,6 +78,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?",
diff --git a/src/locales/se/translation.json b/src/locales/se/translation.json
index ab3bace9..32f61d14 100644
--- a/src/locales/se/translation.json
+++ b/src/locales/se/translation.json
@@ -78,6 +78,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?",
diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index e195c1b9..f7134198 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -95,19 +95,10 @@ const UserProfile = () => {
 
           <section>
             <div className="welcome-formheader">
-              <h3>{t("basicInfo")}</h3>
+              <h3>{t("trainingInfo")}</h3>
             </div>
             <Form className="welcome-form">
-              <div className="welcome-form-profileimg">
-                <p className="text-blue1">{t("photo")}</p>
-                <div className="welcome-form-profileimg-input">
-                  <ProfileIcon colour="#28C846" background="#64DC78" />
-                  <p className="text-blue1">{t("addHeadShot")}</p>
-                </div>
-                <p className="welcome-form-profileimg-error">
-                  {t("uploadValidImage")}
-                </p>
-              </div>
+             
               <div className="welcome-form-inputs">
                 <TextInput
                   name="firstName"

From 5da86cf0e2337ec303c22f65f324a3c2bcd23e57 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:39:28 +0000
Subject: [PATCH 06/35] FEAT: disabled capability

---
 src/components/form/textInput/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/form/textInput/index.js b/src/components/form/textInput/index.js
index adf17aa4..481fe0ae 100644
--- a/src/components/form/textInput/index.js
+++ b/src/components/form/textInput/index.js
@@ -1,6 +1,6 @@
 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") {
@@ -8,6 +8,7 @@ const TextInput = ({ value, onChange, name, label, icon, type = "text" , placeho
       <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}

From 6637e3b1a3857dd938591e7423c40e818f65e3bd Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:39:50 +0000
Subject: [PATCH 07/35] FEAT: starting disabled functionality

---
 src/pages/userProfile/index.js | 89 ++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index f7134198..038f6c2e 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -5,6 +5,7 @@ import ProfileIcon from "../../assets/icons/profileIcon"
 import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
+import { useState } from "react"
 
 const user = {
   firstName: "Lukas",
@@ -20,6 +21,7 @@ const initials =
     : "A"
 
 const UserProfile = () => {
+  const [disabledText, setDisabledText] = useState(true)
   const { t } = useTranslation()
 
   return (
@@ -93,6 +95,93 @@ const UserProfile = () => {
             </Form>
           </section>
 
+          <section>
+            <div className="welcome-formheader">
+              <h3>{t("trainingInfo")}</h3>
+            </div>
+            <Form className="welcome-form">
+             
+              <div className="welcome-form-inputs">
+                <TextInput
+                  disabled={disabledText}
+                  name="firstName"
+                  label={`${t("firstName")} *`}
+                  placeholder={
+                    user.firstName
+                      ? user.firstName
+                      : `${t("enterYourFirstName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="lastName"
+                  label={`${t("lastName")} *`}
+                  placeholder={
+                    user.lastName
+                      ? user.lastName
+                      : `${t("enterYourLastName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="githubUsername"
+                  label={`${t("githubUserName")} *`}
+                  placeholder={
+                    user.githubUsername
+                      ? user.githubUsername
+                      : `${t("enterYourGithubUser")} *`
+                  }
+                  required
+                />
+                {/* {message && <p className="input-message">{message}</p>} */}
+                <p className="text-blue1">{`*${t("required")}`}</p>
+              </div>
+            </Form>
+          </section>
+
+          <section>
+            <div className="welcome-formheader">
+              <h3>{t("trainingInfo")}</h3>
+            </div>
+            <Form className="welcome-form">
+             
+              <div className="welcome-form-inputs">
+                <TextInput
+                  name="firstName"
+                  label={`${t("firstName")} *`}
+                  placeholder={
+                    user.firstName
+                      ? user.firstName
+                      : `${t("enterYourFirstName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="lastName"
+                  label={`${t("lastName")} *`}
+                  placeholder={
+                    user.lastName
+                      ? user.lastName
+                      : `${t("enterYourLastName")} *`
+                  }
+                  required
+                />
+                <TextInput
+                  name="githubUsername"
+                  label={`${t("githubUserName")} *`}
+                  placeholder={
+                    user.githubUsername
+                      ? user.githubUsername
+                      : `${t("enterYourGithubUser")} *`
+                  }
+                  required
+                />
+                {/* {message && <p className="input-message">{message}</p>} */}
+                <p className="text-blue1">{`*${t("required")}`}</p>
+              </div>
+            </Form>
+          </section>
+
           <section>
             <div className="welcome-formheader">
               <h3>{t("trainingInfo")}</h3>

From 4044c1b4cbe388c1a9d9ae21b31a1448e2f92be4 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:47:14 +0000
Subject: [PATCH 08/35] ADD: "Save" to translations.

---
 src/locales/en/translation.json | 1 +
 src/locales/se/translation.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 67e9fd21..15a2e3a4 100644
--- a/src/locales/en/translation.json
+++ b/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",
diff --git a/src/locales/se/translation.json b/src/locales/se/translation.json
index 32f61d14..303bf934 100644
--- a/src/locales/se/translation.json
+++ b/src/locales/se/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",

From a95572adbad6eda8416aedc58c6f14103a6b7295 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:57:34 +0000
Subject: [PATCH 09/35] FEAT: some button CSS

---
 src/pages/userProfile/style.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/pages/userProfile/style.css b/src/pages/userProfile/style.css
index fdf7fe6e..35acf430 100644
--- a/src/pages/userProfile/style.css
+++ b/src/pages/userProfile/style.css
@@ -13,3 +13,16 @@
   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;
+}
+

From b957c577b4502ab84229617777996eaf51b895ae Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 12:57:47 +0000
Subject: [PATCH 10/35] FEAT: button flipper.

---
 src/pages/userProfile/index.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 038f6c2e..9f209079 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -6,6 +6,7 @@ import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useState } from "react"
+import Button from "../../components/button"
 
 const user = {
   firstName: "Lukas",
@@ -22,11 +23,11 @@ const initials =
 
 const UserProfile = () => {
   const [disabledText, setDisabledText] = useState(true)
+  const [save, setSave] = useState(false)
   const { t } = useTranslation()
 
   return (
     <main>
-
       <div className="welcome">
         <h2>{t("profile")}</h2>
       </div>
@@ -100,7 +101,6 @@ const UserProfile = () => {
               <h3>{t("trainingInfo")}</h3>
             </div>
             <Form className="welcome-form">
-             
               <div className="welcome-form-inputs">
                 <TextInput
                   disabled={disabledText}
@@ -144,7 +144,6 @@ const UserProfile = () => {
               <h3>{t("trainingInfo")}</h3>
             </div>
             <Form className="welcome-form">
-             
               <div className="welcome-form-inputs">
                 <TextInput
                   name="firstName"
@@ -187,7 +186,6 @@ const UserProfile = () => {
               <h3>{t("trainingInfo")}</h3>
             </div>
             <Form className="welcome-form">
-             
               <div className="welcome-form-inputs">
                 <TextInput
                   name="firstName"
@@ -224,8 +222,11 @@ const UserProfile = () => {
               </div>
             </Form>
           </section>
+        </div>
 
-
+        <div className="profile-buttons">
+          <Button text={t("cancel")} />
+          {save ? <Button text={t("save")}/> : <Button text={t("edit")} />}
         </div>
       </Card>
     </main>

From 6e534b5f6e60c69fc7d18e700c2acbb4df35d5c5 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 16:59:47 +0000
Subject: [PATCH 11/35] FEAT: working CSS for save button.

---
 src/pages/userProfile/style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/userProfile/style.css b/src/pages/userProfile/style.css
index 35acf430..a705dc2b 100644
--- a/src/pages/userProfile/style.css
+++ b/src/pages/userProfile/style.css
@@ -26,3 +26,9 @@
   cursor: pointer;
 }
 
+.profile-buttons > .saveButton {
+  background-color:  #000046;
+  color: #ffffff;
+  cursor: pointer;
+}
+

From 0e08d1b8c893412f512532d09b0ac5bf20c94f89 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 17:00:09 +0000
Subject: [PATCH 12/35] FEAT: flipping capability to buttons.

---
 src/pages/userProfile/index.js | 43 ++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 9f209079..46f82af6 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -5,7 +5,7 @@ import ProfileIcon from "../../assets/icons/profileIcon"
 import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import Button from "../../components/button"
 
 const user = {
@@ -23,9 +23,23 @@ const initials =
 
 const UserProfile = () => {
   const [disabledText, setDisabledText] = useState(true)
-  const [save, setSave] = useState(false)
+  const [saveButton, setSave] = useState(false)
   const { t } = useTranslation()
 
+  // const revert = () => {
+  //   console.log("revert")
+  //   return
+  // }
+
+  // const save = () => {
+  //   console.log("save")
+  //   return
+  // }
+
+  // useEffect(() => {
+  //   console.log("useEffect")
+  // }, [])
+
   return (
     <main>
       <div className="welcome">
@@ -225,8 +239,29 @@ const UserProfile = () => {
         </div>
 
         <div className="profile-buttons">
-          <Button text={t("cancel")} />
-          {save ? <Button text={t("save")}/> : <Button text={t("edit")} />}
+          <Button
+            text={t("cancel")}
+            onClick={() => {
+              setSave(false)
+            }}
+          />
+
+          {saveButton ? (
+            <Button
+              classes="saveButton"
+              text={t("save")}
+              onClick={() => {
+                setSave(false)
+              }}
+            />
+          ) : (
+            <Button
+              text={t("edit")}
+              onClick={() => {
+                setSave(true)
+              }}
+            />
+          )}
         </div>
       </Card>
     </main>

From f2a2c6997e410928ae036e9bd81ac4d7fe7a34d3 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Mon, 19 Feb 2024 17:10:54 +0000
Subject: [PATCH 13/35] BUILD: functions for future use.

---
 src/pages/userProfile/index.js | 45 ++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 46f82af6..a7c6625f 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -26,19 +26,19 @@ const UserProfile = () => {
   const [saveButton, setSave] = useState(false)
   const { t } = useTranslation()
 
-  // const revert = () => {
-  //   console.log("revert")
-  //   return
-  // }
+  const revert = () => {
+    console.log("revert")
+    return
+  }
 
-  // const save = () => {
-  //   console.log("save")
-  //   return
-  // }
+  const save = () => {
+    console.log("save")
+    return
+  }
 
-  // useEffect(() => {
-  //   console.log("useEffect")
-  // }, [])
+  useEffect(() => {
+    console.log("useEffect")
+  }, [])
 
   return (
     <main>
@@ -75,6 +75,7 @@ const UserProfile = () => {
               </div>
               <div className="welcome-form-inputs">
                 <TextInput
+                  disabled={disabledText}
                   name="firstName"
                   label={`${t("firstName")} *`}
                   placeholder={
@@ -85,6 +86,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="lastName"
                   label={`${t("lastName")} *`}
                   placeholder={
@@ -95,6 +97,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="githubUsername"
                   label={`${t("githubUserName")} *`}
                   placeholder={
@@ -105,7 +108,6 @@ const UserProfile = () => {
                   required
                 />
                 {/* {message && <p className="input-message">{message}</p>} */}
-                <p className="text-blue1">{`*${t("required")}`}</p>
               </div>
             </Form>
           </section>
@@ -128,6 +130,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="lastName"
                   label={`${t("lastName")} *`}
                   placeholder={
@@ -138,6 +141,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="githubUsername"
                   label={`${t("githubUserName")} *`}
                   placeholder={
@@ -148,7 +152,6 @@ const UserProfile = () => {
                   required
                 />
                 {/* {message && <p className="input-message">{message}</p>} */}
-                <p className="text-blue1">{`*${t("required")}`}</p>
               </div>
             </Form>
           </section>
@@ -160,6 +163,7 @@ const UserProfile = () => {
             <Form className="welcome-form">
               <div className="welcome-form-inputs">
                 <TextInput
+                  disabled={disabledText}
                   name="firstName"
                   label={`${t("firstName")} *`}
                   placeholder={
@@ -170,6 +174,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="lastName"
                   label={`${t("lastName")} *`}
                   placeholder={
@@ -180,6 +185,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="githubUsername"
                   label={`${t("githubUserName")} *`}
                   placeholder={
@@ -190,7 +196,6 @@ const UserProfile = () => {
                   required
                 />
                 {/* {message && <p className="input-message">{message}</p>} */}
-                <p className="text-blue1">{`*${t("required")}`}</p>
               </div>
             </Form>
           </section>
@@ -202,6 +207,7 @@ const UserProfile = () => {
             <Form className="welcome-form">
               <div className="welcome-form-inputs">
                 <TextInput
+                  disabled={disabledText}
                   name="firstName"
                   label={`${t("firstName")} *`}
                   placeholder={
@@ -212,6 +218,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="lastName"
                   label={`${t("lastName")} *`}
                   placeholder={
@@ -222,6 +229,7 @@ const UserProfile = () => {
                   required
                 />
                 <TextInput
+                  disabled={disabledText}
                   name="githubUsername"
                   label={`${t("githubUserName")} *`}
                   placeholder={
@@ -229,20 +237,22 @@ const UserProfile = () => {
                       ? user.githubUsername
                       : `${t("enterYourGithubUser")} *`
                   }
-                  required
                 />
                 {/* {message && <p className="input-message">{message}</p>} */}
-                <p className="text-blue1">{`*${t("required")}`}</p>
               </div>
             </Form>
           </section>
         </div>
 
+        <p className="text-blue1">{`*${t("required")}`}</p>
+
         <div className="profile-buttons">
           <Button
             text={t("cancel")}
             onClick={() => {
               setSave(false)
+              setDisabledText(true)
+              revert()
             }}
           />
 
@@ -252,6 +262,8 @@ const UserProfile = () => {
               text={t("save")}
               onClick={() => {
                 setSave(false)
+                setDisabledText(true)
+                save()
               }}
             />
           ) : (
@@ -259,6 +271,7 @@ const UserProfile = () => {
               text={t("edit")}
               onClick={() => {
                 setSave(true)
+                setDisabledText(false)
               }}
             />
           )}

From 563b5ba48558feac61d149246b0c0ea3e194e793 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 12:51:47 +0000
Subject: [PATCH 14/35] RENAME: wrongly named file removed and added in right
 name.

---
 src/components/professionalinfo/{indxe.js => index.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/professionalinfo/{indxe.js => index.js} (100%)

diff --git a/src/components/professionalinfo/indxe.js b/src/components/professionalinfo/index.js
similarity index 100%
rename from src/components/professionalinfo/indxe.js
rename to src/components/professionalinfo/index.js

From 7700047ad00f4ec84da7a268ce6ce4af5808e152 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 12:52:02 +0000
Subject: [PATCH 15/35] FEAT: new components added.

---
 src/pages/userProfile/index.js | 202 ++++-----------------------------
 1 file changed, 24 insertions(+), 178 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index a7c6625f..b341c343 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -1,12 +1,15 @@
 import { useTranslation } from "react-i18next"
-import Form from "../../components/form"
-import TextInput from "../../components/form/textInput"
-import ProfileIcon from "../../assets/icons/profileIcon"
 import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useEffect, useState } from "react"
 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"
+
 
 const user = {
   firstName: "Lukas",
@@ -24,8 +27,14 @@ const initials =
 const UserProfile = () => {
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
+  const [isTeacher, setisTeacher] = useState(false)
+
   const { t } = useTranslation()
 
+  const userGet = () => {
+    
+  }
+
   const revert = () => {
     console.log("revert")
     return
@@ -59,188 +68,25 @@ const UserProfile = () => {
 
         <div className="profile-container">
           <section>
-            <div className="welcome-formheader">
-              <h3>{t("basicInfo")}</h3>
-            </div>
-            <Form className="welcome-form">
-              <div className="welcome-form-profileimg">
-                <p className="text-blue1">{t("photo")}</p>
-                <div className="welcome-form-profileimg-input">
-                  <ProfileIcon colour="#28C846" background="#64DC78" />
-                  <p className="text-blue1">{t("addHeadShot")}</p>
-                </div>
-                <p className="welcome-form-profileimg-error">
-                  {t("uploadValidImage")}
-                </p>
-              </div>
-              <div className="welcome-form-inputs">
-                <TextInput
-                  disabled={disabledText}
-                  name="firstName"
-                  label={`${t("firstName")} *`}
-                  placeholder={
-                    user.firstName
-                      ? user.firstName
-                      : `${t("enterYourFirstName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="lastName"
-                  label={`${t("lastName")} *`}
-                  placeholder={
-                    user.lastName
-                      ? user.lastName
-                      : `${t("enterYourLastName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="githubUsername"
-                  label={`${t("githubUserName")} *`}
-                  placeholder={
-                    user.githubUsername
-                      ? user.githubUsername
-                      : `${t("enterYourGithubUser")} *`
-                  }
-                  required
-                />
-                {/* {message && <p className="input-message">{message}</p>} */}
-              </div>
-            </Form>
+            <BasicInfo disabledText={disabledText} data={user} />
           </section>
 
-          <section>
-            <div className="welcome-formheader">
-              <h3>{t("trainingInfo")}</h3>
-            </div>
-            <Form className="welcome-form">
-              <div className="welcome-form-inputs">
-                <TextInput
-                  disabled={disabledText}
-                  name="firstName"
-                  label={`${t("firstName")} *`}
-                  placeholder={
-                    user.firstName
-                      ? user.firstName
-                      : `${t("enterYourFirstName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="lastName"
-                  label={`${t("lastName")} *`}
-                  placeholder={
-                    user.lastName
-                      ? user.lastName
-                      : `${t("enterYourLastName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="githubUsername"
-                  label={`${t("githubUserName")} *`}
-                  placeholder={
-                    user.githubUsername
-                      ? user.githubUsername
-                      : `${t("enterYourGithubUser")} *`
-                  }
-                  required
-                />
-                {/* {message && <p className="input-message">{message}</p>} */}
-              </div>
-            </Form>
-          </section>
+          {isTeacher ? (
+            <section>
+              <ProfessionalInfo disabledText={disabledText} data={user} />
+            </section>
+          ) : (
+            <section>
+              <TrainingInfo disabledText={disabledText} data={user} />
+            </section>
+          )}
 
           <section>
-            <div className="welcome-formheader">
-              <h3>{t("trainingInfo")}</h3>
-            </div>
-            <Form className="welcome-form">
-              <div className="welcome-form-inputs">
-                <TextInput
-                  disabled={disabledText}
-                  name="firstName"
-                  label={`${t("firstName")} *`}
-                  placeholder={
-                    user.firstName
-                      ? user.firstName
-                      : `${t("enterYourFirstName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="lastName"
-                  label={`${t("lastName")} *`}
-                  placeholder={
-                    user.lastName
-                      ? user.lastName
-                      : `${t("enterYourLastName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="githubUsername"
-                  label={`${t("githubUserName")} *`}
-                  placeholder={
-                    user.githubUsername
-                      ? user.githubUsername
-                      : `${t("enterYourGithubUser")} *`
-                  }
-                  required
-                />
-                {/* {message && <p className="input-message">{message}</p>} */}
-              </div>
-            </Form>
+            <ContactInfo disabledText={disabledText} data={user} />
           </section>
 
           <section>
-            <div className="welcome-formheader">
-              <h3>{t("trainingInfo")}</h3>
-            </div>
-            <Form className="welcome-form">
-              <div className="welcome-form-inputs">
-                <TextInput
-                  disabled={disabledText}
-                  name="firstName"
-                  label={`${t("firstName")} *`}
-                  placeholder={
-                    user.firstName
-                      ? user.firstName
-                      : `${t("enterYourFirstName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="lastName"
-                  label={`${t("lastName")} *`}
-                  placeholder={
-                    user.lastName
-                      ? user.lastName
-                      : `${t("enterYourLastName")} *`
-                  }
-                  required
-                />
-                <TextInput
-                  disabled={disabledText}
-                  name="githubUsername"
-                  label={`${t("githubUserName")} *`}
-                  placeholder={
-                    user.githubUsername
-                      ? user.githubUsername
-                      : `${t("enterYourGithubUser")} *`
-                  }
-                />
-                {/* {message && <p className="input-message">{message}</p>} */}
-              </div>
-            </Form>
+            <Bio disabledText={disabledText} data={user} />
           </section>
         </div>
 

From 97447b40bcb3e933c622dd3a1df199c33e811c26 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 14:43:26 +0000
Subject: [PATCH 16/35] FEAT: state built for holding temp user information.

---
 src/pages/userProfile/index.js | 70 ++++++++++++++++++++++++----------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index b341c343..f285e9b8 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -11,30 +11,42 @@ import Bio from "../../components/bio"
 import ProfessionalInfo from "../../components/professionalinfo"
 
 
-const user = {
-  firstName: "Lukas",
-  lastName: "Dembicki",
-  title: "Software Developer",
-  bio: "Hello I am a coder",
-  githubUsername: "PeachyOmnivore",
-}
-
-const initials =
-  user && user.firstName && user.lastName
-    ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
-    : "A"
-
 const UserProfile = () => {
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
   const [isTeacher, setisTeacher] = useState(false)
+  const [user, setUser] = useState({
+    firstName: "",
+    lastName: "",
+    githubUsername: "",
+    bio: "",
+    email: "",
+    mobile: "",
+    password: "",
+    role: "",
+    specialism: "",
+    cohort: "",
+    startDate: "",
+    endDate: "",
+    imageUrl: "",
+  })
+
+  const initials =
+  user && user.firstName && user.lastName
+    ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
+    : "A"
 
-  const { t } = useTranslation()
+  const onInput = (event) => {
+    const { name, value } = event.target
 
-  const userGet = () => {
-    
+    setUser({
+      ...user,
+      [name]: value,
+    })
   }
 
+  const { t } = useTranslation()
+
   const revert = () => {
     console.log("revert")
     return
@@ -68,25 +80,41 @@ const UserProfile = () => {
 
         <div className="profile-container">
           <section>
-            <BasicInfo disabledText={disabledText} data={user} />
+            <BasicInfo
+              onInput={onInput}
+              disabledText={disabledText}
+              data={user}
+            />
           </section>
 
           {isTeacher ? (
             <section>
-              <ProfessionalInfo disabledText={disabledText} data={user} />
+              <ProfessionalInfo
+                onInput={onInput}
+                disabledText={disabledText}
+                data={user}
+              />
             </section>
           ) : (
             <section>
-              <TrainingInfo disabledText={disabledText} data={user} />
+              <TrainingInfo
+                onInput={onInput}
+                disabledText={disabledText}
+                data={user}
+              />
             </section>
           )}
 
           <section>
-            <ContactInfo disabledText={disabledText} data={user} />
+            <ContactInfo
+              onInput={onInput}
+              disabledText={disabledText}
+              data={user}
+            />
           </section>
 
           <section>
-            <Bio disabledText={disabledText} data={user} />
+            <Bio onInput={onInput} disabledText={disabledText} data={user} />
           </section>
         </div>
 

From 07c49552c1bbcfbc1a4e8a904cadd690faa7f8ab Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 15:04:11 +0000
Subject: [PATCH 17/35] FEAT: profile page now locks text and changes style
 based on if editing.

---
 src/pages/userProfile/index.js  | 5 ++++-
 src/pages/userProfile/style.css | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index f285e9b8..0444b86c 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -36,6 +36,9 @@ const UserProfile = () => {
     ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
     : "A"
 
+  let classes = ""
+  if(saveButton === false){classes = "locked-input"}
+
   const onInput = (event) => {
     const { name, value } = event.target
 
@@ -79,7 +82,7 @@ const UserProfile = () => {
         </div>
 
         <div className="profile-container">
-          <section>
+          <section className={`${classes}`}>
             <BasicInfo
               onInput={onInput}
               disabledText={disabledText}
diff --git a/src/pages/userProfile/style.css b/src/pages/userProfile/style.css
index a705dc2b..acb543e9 100644
--- a/src/pages/userProfile/style.css
+++ b/src/pages/userProfile/style.css
@@ -32,3 +32,6 @@
   cursor: pointer;
 }
 
+.locked-input form input {
+  background: white;
+}
\ No newline at end of file

From d60dc41b6375518607b77686ec881274d0a9f6aa Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 15:16:07 +0000
Subject: [PATCH 18/35] FEAT: splitword is working, all components have new
 conditional style

---
 src/pages/userProfile/index.js  | 44 +++++++++++++++++++--------------
 src/pages/userProfile/style.css |  6 +++++
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 0444b86c..13043d4f 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -16,19 +16,19 @@ const UserProfile = () => {
   const [saveButton, setSave] = useState(false)
   const [isTeacher, setisTeacher] = useState(false)
   const [user, setUser] = useState({
-    firstName: "",
-    lastName: "",
-    githubUsername: "",
-    bio: "",
-    email: "",
-    mobile: "",
-    password: "",
-    role: "",
-    specialism: "",
-    cohort: "",
-    startDate: "",
-    endDate: "",
-    imageUrl: "",
+    firstName: "Lukas",
+    lastName: "Dembicki",
+    githubUsername: "PeachyOmnivore",
+    bio: "Hello this is my bio",
+    email: "email@email.com",
+    mobile: "07770777077",
+    password: "Password123!",
+    role: "Student",
+    specialism: "Full-Stack",
+    cohort: "11",
+    startDate: "121212",
+    endDate: "121212",
+    imageUrl: "image@image.com",
   })
 
   const initials =
@@ -39,6 +39,9 @@ const UserProfile = () => {
   let classes = ""
   if(saveButton === false){classes = "locked-input"}
 
+  const splitWord = user.bio.trim(/\s+/g, "").length
+
+
   const onInput = (event) => {
     const { name, value } = event.target
 
@@ -91,7 +94,7 @@ const UserProfile = () => {
           </section>
 
           {isTeacher ? (
-            <section>
+            <section className={`${classes}`}>
               <ProfessionalInfo
                 onInput={onInput}
                 disabledText={disabledText}
@@ -99,7 +102,7 @@ const UserProfile = () => {
               />
             </section>
           ) : (
-            <section>
+            <section className={`${classes}`}>
               <TrainingInfo
                 onInput={onInput}
                 disabledText={disabledText}
@@ -108,7 +111,7 @@ const UserProfile = () => {
             </section>
           )}
 
-          <section>
+          <section className={`${classes}`}>
             <ContactInfo
               onInput={onInput}
               disabledText={disabledText}
@@ -116,8 +119,13 @@ const UserProfile = () => {
             />
           </section>
 
-          <section>
-            <Bio onInput={onInput} disabledText={disabledText} data={user} />
+          <section className={`${classes}`}>
+            <Bio 
+
+            onInput={onInput} 
+            disabledText={disabledText} 
+            data={user}
+            splitWord={splitWord} />
           </section>
         </div>
 
diff --git a/src/pages/userProfile/style.css b/src/pages/userProfile/style.css
index acb543e9..0f52ed05 100644
--- a/src/pages/userProfile/style.css
+++ b/src/pages/userProfile/style.css
@@ -34,4 +34,10 @@
 
 .locked-input form input {
   background: white;
+  color: black;
+}
+
+.locked-input textarea {
+  background: white;
+  color: black;
 }
\ No newline at end of file

From eef10cf8b5e101fac4126e72f2598b3018d07d1b Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 15:39:43 +0000
Subject: [PATCH 19/35] FEAT: Revert function works.

---
 src/pages/userProfile/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 13043d4f..acc51486 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -30,6 +30,7 @@ const UserProfile = () => {
     endDate: "121212",
     imageUrl: "image@image.com",
   })
+  const [tempUser, setTempUser] = useState(user)
 
   const initials =
   user && user.firstName && user.lastName
@@ -53,7 +54,9 @@ const UserProfile = () => {
 
   const { t } = useTranslation()
 
+  
   const revert = () => {
+    setUser(tempUser)
     console.log("revert")
     return
   }

From 0544233b7ae354ea3f9567c4b7a4bea2d41525a1 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 16:53:40 +0000
Subject: [PATCH 20/35] UPDATE: preparing for get request.

---
 src/pages/userProfile/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index acc51486..4a2d0a35 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -3,6 +3,8 @@ import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useEffect, useState } from "react"
+import { useParams } from 'react-router-dom';
+import { get } from '../../service/apiClient.js'
 import Button from "../../components/button"
 import BasicInfo from "../../components/basic-info"
 import ContactInfo from "../../components/contactInfo"
@@ -11,7 +13,9 @@ import Bio from "../../components/bio"
 import ProfessionalInfo from "../../components/professionalinfo"
 
 
+
 const UserProfile = () => {
+  const {id} = useParams()
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
   const [isTeacher, setisTeacher] = useState(false)
@@ -30,7 +34,7 @@ const UserProfile = () => {
     endDate: "121212",
     imageUrl: "image@image.com",
   })
-  const [tempUser, setTempUser] = useState(user)
+  const [tempUser] = useState(user)
 
   const initials =
   user && user.firstName && user.lastName
@@ -67,6 +71,7 @@ const UserProfile = () => {
   }
 
   useEffect(() => {
+
     console.log("useEffect")
   }, [])
 

From d77d90b34d30c76f3795cf7beb14089b553eda17 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 17:10:57 +0000
Subject: [PATCH 21/35] FEAT: retrieving users.

---
 src/pages/userProfile/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 4a2d0a35..5593e758 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -4,7 +4,7 @@ import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useEffect, useState } from "react"
 import { useParams } from 'react-router-dom';
-import { get } from '../../service/apiClient.js'
+import { getUserById } from '../../service/apiClient.js'
 import Button from "../../components/button"
 import BasicInfo from "../../components/basic-info"
 import ContactInfo from "../../components/contactInfo"
@@ -36,6 +36,9 @@ const UserProfile = () => {
   })
   const [tempUser] = useState(user)
 
+  const getUsers = () => getUserById(id)
+  setUser(getUsers)
+
   const initials =
   user && user.firstName && user.lastName
     ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`

From 53ffb4ae750ef5d2373e1449dc3ab9427fa5d9b1 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Tue, 20 Feb 2024 17:27:57 +0000
Subject: [PATCH 22/35] SAVE: Commiting current work for move to another
 branch.

---
 src/pages/userProfile/index.js | 42 ++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 5593e758..2e0f3067 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -3,8 +3,8 @@ import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useEffect, useState } from "react"
-import { useParams } from 'react-router-dom';
-import { getUserById } from '../../service/apiClient.js'
+import { useParams } from "react-router-dom"
+import { getUserById } from "../../service/apiClient.js"
 import Button from "../../components/button"
 import BasicInfo from "../../components/basic-info"
 import ContactInfo from "../../components/contactInfo"
@@ -12,10 +12,8 @@ import TrainingInfo from "../../components/trainingInfo"
 import Bio from "../../components/bio"
 import ProfessionalInfo from "../../components/professionalinfo"
 
-
-
 const UserProfile = () => {
-  const {id} = useParams()
+  const { id } = useParams()
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
   const [isTeacher, setisTeacher] = useState(false)
@@ -36,20 +34,26 @@ const UserProfile = () => {
   })
   const [tempUser] = useState(user)
 
-  const getUsers = () => getUserById(id)
-  setUser(getUsers)
+  useEffect(() => {
+    getUserById(id).then((user) => {
+      setUser(user)
+    })
+  }, [id])
+
+  console.log(user)
 
   const initials =
-  user && user.firstName && user.lastName
-    ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
-    : "A"
+    user && user.firstName && user.lastName
+      ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
+      : "A"
 
   let classes = ""
-  if(saveButton === false){classes = "locked-input"}
+  if (saveButton === false) {
+    classes = "locked-input"
+  }
 
   const splitWord = user.bio.trim(/\s+/g, "").length
 
-
   const onInput = (event) => {
     const { name, value } = event.target
 
@@ -61,7 +65,6 @@ const UserProfile = () => {
 
   const { t } = useTranslation()
 
-  
   const revert = () => {
     setUser(tempUser)
     console.log("revert")
@@ -74,7 +77,6 @@ const UserProfile = () => {
   }
 
   useEffect(() => {
-
     console.log("useEffect")
   }, [])
 
@@ -131,12 +133,12 @@ const UserProfile = () => {
           </section>
 
           <section className={`${classes}`}>
-            <Bio 
-
-            onInput={onInput} 
-            disabledText={disabledText} 
-            data={user}
-            splitWord={splitWord} />
+            <Bio
+              onInput={onInput}
+              disabledText={disabledText}
+              data={user}
+              splitWord={splitWord}
+            />
           </section>
         </div>
 

From 3ffe67989d24ab3b8e68f4218385e13bdbd58d8c Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Thu, 22 Feb 2024 11:41:32 +0000
Subject: [PATCH 23/35] Playing around with cancel button.

---
 src/pages/userProfile/index.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 2e0f3067..8af0b764 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -25,22 +25,23 @@ const UserProfile = () => {
     email: "email@email.com",
     mobile: "07770777077",
     password: "Password123!",
-    role: "Student",
+    role: "STUDENT",
     specialism: "Full-Stack",
     cohort: "11",
     startDate: "121212",
     endDate: "121212",
     imageUrl: "image@image.com",
   })
-  const [tempUser] = useState(user)
-
-  useEffect(() => {
+ 
+  useEffect(() => { 
     getUserById(id).then((user) => {
-      setUser(user)
+      setUser(user.data.user)
     })
   }, [id])
-
-  console.log(user)
+  
+  const [tempUser] = useState(user)
+  console.log("temp user", tempUser)
+  console.log("USER", user)
 
   const initials =
     user && user.firstName && user.lastName
@@ -52,7 +53,7 @@ const UserProfile = () => {
     classes = "locked-input"
   }
 
-  const splitWord = user.bio.trim(/\s+/g, "").length
+  // const splitWord = user.bio.trim(/\s+/g, "").length
 
   const onInput = (event) => {
     const { name, value } = event.target
@@ -67,6 +68,7 @@ const UserProfile = () => {
 
   const revert = () => {
     setUser(tempUser)
+
     console.log("revert")
     return
   }
@@ -76,9 +78,6 @@ const UserProfile = () => {
     return
   }
 
-  useEffect(() => {
-    console.log("useEffect")
-  }, [])
 
   return (
     <main>
@@ -137,7 +136,7 @@ const UserProfile = () => {
               onInput={onInput}
               disabledText={disabledText}
               data={user}
-              splitWord={splitWord}
+              // splitWord={splitWord}
             />
           </section>
         </div>

From 6ae8141b6be8883ee30c02be4ab4ac0ee0087282 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Thu, 22 Feb 2024 16:17:38 +0000
Subject: [PATCH 24/35] FIX: dummy data

---
 src/pages/userProfile/index.js | 49 ++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 8af0b764..19daa607 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"
 import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 import { getUserById } from "../../service/apiClient.js"
 import Button from "../../components/button"
@@ -18,30 +18,35 @@ const UserProfile = () => {
   const [saveButton, setSave] = useState(false)
   const [isTeacher, setisTeacher] = useState(false)
   const [user, setUser] = useState({
-    firstName: "Lukas",
-    lastName: "Dembicki",
-    githubUsername: "PeachyOmnivore",
-    bio: "Hello this is my bio",
-    email: "email@email.com",
-    mobile: "07770777077",
-    password: "Password123!",
-    role: "STUDENT",
-    specialism: "Full-Stack",
-    cohort: "11",
-    startDate: "121212",
-    endDate: "121212",
-    imageUrl: "image@image.com",
+    firstName: "",
+    lastName: "",
+    githubUsername: "",
+    bio: "",
+    email: "",
+    mobile: "",
+    password: "",
+    role: "",
+    specialism: "",
+    cohort: "",
+    startDate: "",
+    endDate: "",
+    imageUrl: "",
   })
- 
-  useEffect(() => { 
+
+  const [tempUser, setTempUser] = useState(user)
+  console.log("ID....", id)
+  console.log("TEMP USER....", tempUser)
+  console.log("USER....", user)
+  
+  useEffect(() => {
     getUserById(id).then((user) => {
       setUser(user.data.user)
+      setTempUser(user.data.user)
+      console.log("USE EFFECT RUNNING")
+      console.log("USER INFO INSIDE CALLBACK....", user.data.user)
     })
   }, [id])
-  
-  const [tempUser] = useState(user)
-  console.log("temp user", tempUser)
-  console.log("USER", user)
+
 
   const initials =
     user && user.firstName && user.lastName
@@ -68,7 +73,6 @@ const UserProfile = () => {
 
   const revert = () => {
     setUser(tempUser)
-
     console.log("revert")
     return
   }
@@ -78,7 +82,6 @@ const UserProfile = () => {
     return
   }
 
-
   return (
     <main>
       <div className="welcome">
@@ -90,7 +93,7 @@ const UserProfile = () => {
           <ProfileCircle initials={initials} />
           <section>
             <h4>
-              {user.firstName} {user.lastName}
+              {/* {user.firstName} {user.lastName} */}
             </h4>
             <p>{user.title}</p>
           </section>

From 87c83db37f01863d190e130e7fba1560afe2401e Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 10:20:20 +0000
Subject: [PATCH 25/35] BUILD: apiClient getUserProfileById()

---
 src/service/apiClient.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/service/apiClient.js b/src/service/apiClient.js
index 799fb2fe..3fc567ad 100644
--- a/src/service/apiClient.js
+++ b/src/service/apiClient.js
@@ -45,7 +45,7 @@ async function postComment(comment) {
 
 async function getCohorts() {
   const res = await get("cohorts")
-  return res.data 
+  return res.data
 }
 
 async function getTeachers() {
@@ -91,8 +91,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)
@@ -137,7 +141,7 @@ async function toggleLike(postId) {
 }
 
 async function getStudents() {
-  const response = await get('students')
+  const response = await get("students")
   return response.data.students
 }
 
@@ -161,5 +165,6 @@ export {
   getUserById,
   getStudents,
   getSelfTeacher,
-  getSelfStudent
+  getSelfStudent,
+  getUserProfileById
 }

From 3ec87cc1e13a44609da33b6b89587379a90eea05 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 10:21:06 +0000
Subject: [PATCH 26/35] UPDATE: new GET request added

---
 src/pages/userProfile/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 19daa607..51976662 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -4,7 +4,7 @@ import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useCallback, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
-import { getUserById } from "../../service/apiClient.js"
+import { getUserProfileById } from "../../service/apiClient.js"
 import Button from "../../components/button"
 import BasicInfo from "../../components/basic-info"
 import ContactInfo from "../../components/contactInfo"
@@ -39,7 +39,7 @@ const UserProfile = () => {
   console.log("USER....", user)
   
   useEffect(() => {
-    getUserById(id).then((user) => {
+    getUserProfileById(id).then((user) => {
       setUser(user.data.user)
       setTempUser(user.data.user)
       console.log("USE EFFECT RUNNING")

From 6ed88e15b5323f75d0a2ce3f6a2916993ef56846 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 10:30:30 +0000
Subject: [PATCH 27/35] FEAT: UpdateProfile on save

---
 src/pages/userProfile/index.js | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 51976662..ab9afe73 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -2,9 +2,9 @@ import { useTranslation } from "react-i18next"
 import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
-import { useCallback, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
-import { getUserProfileById } from "../../service/apiClient.js"
+import { getUserProfileById, updateProfile } from "../../service/apiClient.js"
 import Button from "../../components/button"
 import BasicInfo from "../../components/basic-info"
 import ContactInfo from "../../components/contactInfo"
@@ -37,7 +37,7 @@ const UserProfile = () => {
   console.log("ID....", id)
   console.log("TEMP USER....", tempUser)
   console.log("USER....", user)
-  
+
   useEffect(() => {
     getUserProfileById(id).then((user) => {
       setUser(user.data.user)
@@ -47,7 +47,6 @@ const UserProfile = () => {
     })
   }, [id])
 
-
   const initials =
     user && user.firstName && user.lastName
       ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
@@ -78,6 +77,22 @@ const UserProfile = () => {
   }
 
   const save = () => {
+    updateProfile(
+      id,
+      user.firstName,
+      user.lastName,
+      user.githubUsername,
+      user.bio,
+      user.email,
+      user.mobile,
+      user.password,
+      user.role,
+      user.specialism,
+      user.cohort,
+      user.startDate,
+      user.endDate,
+      user.imageUrl
+    )
     console.log("save")
     return
   }
@@ -92,9 +107,7 @@ const UserProfile = () => {
         <div className="profile-information">
           <ProfileCircle initials={initials} />
           <section>
-            <h4>
-              {/* {user.firstName} {user.lastName} */}
-            </h4>
+            <h4>{/* {user.firstName} {user.lastName} */}</h4>
             <p>{user.title}</p>
           </section>
         </div>

From 9959ac144282d34dc1f0ec5ce0d3bbb8c1256dfd Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 12:18:56 +0000
Subject: [PATCH 28/35] UPDATE: where profile info comes from.

---
 src/pages/userProfile/index.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index ab9afe73..0aca59d7 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -16,7 +16,7 @@ const UserProfile = () => {
   const { id } = useParams()
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
-  const [isTeacher, setisTeacher] = useState(false)
+  const [isTeacher, setisTeacher] = useState(true)
   const [user, setUser] = useState({
     firstName: "",
     lastName: "",
@@ -40,10 +40,8 @@ const UserProfile = () => {
 
   useEffect(() => {
     getUserProfileById(id).then((user) => {
-      setUser(user.data.user)
-      setTempUser(user.data.user)
-      console.log("USE EFFECT RUNNING")
-      console.log("USER INFO INSIDE CALLBACK....", user.data.user)
+      setUser(user.data.profile)
+      setTempUser(user.data.profile)
     })
   }, [id])
 
@@ -107,7 +105,7 @@ const UserProfile = () => {
         <div className="profile-information">
           <ProfileCircle initials={initials} />
           <section>
-            <h4>{/* {user.firstName} {user.lastName} */}</h4>
+            <h4>{user.firstName} {user.lastName}</h4>
             <p>{user.title}</p>
           </section>
         </div>

From 73ac371176317923e8f1ba381dbc9c8f6f03b37f Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 12:31:51 +0000
Subject: [PATCH 29/35] UPDATE: Save function also resets tempUser.

---
 src/pages/userProfile/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 0aca59d7..ec4c865d 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -91,6 +91,7 @@ const UserProfile = () => {
       user.endDate,
       user.imageUrl
     )
+    setTempUser(user)
     console.log("save")
     return
   }

From 838468862aa7f9f370749c68de8e11cbfc991947 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 14:25:33 +0000
Subject: [PATCH 30/35] FEAT: checks for teacher role.

---
 src/pages/userProfile/index.js | 80 +++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index ec4c865d..f933a362 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -4,7 +4,7 @@ import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
-import { getUserProfileById, updateProfile } from "../../service/apiClient.js"
+import { getUserById, getUserProfileById, updateProfile } from "../../service/apiClient.js"
 import Button from "../../components/button"
 import BasicInfo from "../../components/basic-info"
 import ContactInfo from "../../components/contactInfo"
@@ -16,8 +16,9 @@ const UserProfile = () => {
   const { id } = useParams()
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
-  const [isTeacher, setisTeacher] = useState(true)
-  const [user, setUser] = useState({
+  const [isTeacher, setIsTeacher] = useState(true)
+  const [user, setUser] = useState()
+  const [profile, setProfile] = useState({
     firstName: "",
     lastName: "",
     githubUsername: "",
@@ -33,21 +34,32 @@ const UserProfile = () => {
     imageUrl: "",
   })
 
-  const [tempUser, setTempUser] = useState(user)
+  
+  if(user.role === "TBA"){setIsTeacher(false)}
+  if(user.role === "STUDENT"){setIsTeacher(false)}
+  if(user.role === "TEACHER"){setIsTeacher(true)}
+
+  const [tempUser, setTempUser] = useState(profile)
   console.log("ID....", id)
   console.log("TEMP USER....", tempUser)
-  console.log("USER....", user)
+  console.log("Profile....", profile)
+  console.log("User....",user)
 
   useEffect(() => {
-    getUserProfileById(id).then((user) => {
-      setUser(user.data.profile)
-      setTempUser(user.data.profile)
+    getUserProfileById(id).then((profile) => {
+      setProfile(profile.data.profile)
+      setTempUser(profile.data.profile)
+    })
+
+    getUserById(id).then((user) => {
+      setUser(user)
     })
+
   }, [id])
 
   const initials =
-    user && user.firstName && user.lastName
-      ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`
+    profile && profile.firstName && profile.lastName
+      ? `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`
       : "A"
 
   let classes = ""
@@ -55,13 +67,13 @@ const UserProfile = () => {
     classes = "locked-input"
   }
 
-  // const splitWord = user.bio.trim(/\s+/g, "").length
+  // const splitWord = profile.bio.trim(/\s+/g, "").length
 
   const onInput = (event) => {
     const { name, value } = event.target
 
-    setUser({
-      ...user,
+    setProfile({
+      ...profile,
       [name]: value,
     })
   }
@@ -69,7 +81,7 @@ const UserProfile = () => {
   const { t } = useTranslation()
 
   const revert = () => {
-    setUser(tempUser)
+    setProfile(tempUser)
     console.log("revert")
     return
   }
@@ -77,21 +89,21 @@ const UserProfile = () => {
   const save = () => {
     updateProfile(
       id,
-      user.firstName,
-      user.lastName,
-      user.githubUsername,
-      user.bio,
-      user.email,
-      user.mobile,
-      user.password,
-      user.role,
-      user.specialism,
-      user.cohort,
-      user.startDate,
-      user.endDate,
-      user.imageUrl
+      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(user)
+    setTempUser(profile)
     console.log("save")
     return
   }
@@ -106,7 +118,7 @@ const UserProfile = () => {
         <div className="profile-information">
           <ProfileCircle initials={initials} />
           <section>
-            <h4>{user.firstName} {user.lastName}</h4>
+            <h4>{profile.firstName} {profile.lastName}</h4>
             <p>{user.title}</p>
           </section>
         </div>
@@ -116,7 +128,7 @@ const UserProfile = () => {
             <BasicInfo
               onInput={onInput}
               disabledText={disabledText}
-              data={user}
+              data={profile}
             />
           </section>
 
@@ -125,7 +137,7 @@ const UserProfile = () => {
               <ProfessionalInfo
                 onInput={onInput}
                 disabledText={disabledText}
-                data={user}
+                data={profile}
               />
             </section>
           ) : (
@@ -133,7 +145,7 @@ const UserProfile = () => {
               <TrainingInfo
                 onInput={onInput}
                 disabledText={disabledText}
-                data={user}
+                data={profile}
               />
             </section>
           )}
@@ -142,7 +154,7 @@ const UserProfile = () => {
             <ContactInfo
               onInput={onInput}
               disabledText={disabledText}
-              data={user}
+              data={profile}
             />
           </section>
 
@@ -150,7 +162,7 @@ const UserProfile = () => {
             <Bio
               onInput={onInput}
               disabledText={disabledText}
-              data={user}
+              data={profile}
               // splitWord={splitWord}
             />
           </section>

From d3e391505c8b21e3ca08fdf76c3f219b7e8c70a9 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 14:33:42 +0000
Subject: [PATCH 31/35] FEAT: mostly working profile page

---
 src/pages/userProfile/index.js | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index f933a362..0f78a2a6 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -4,7 +4,11 @@ import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
 import { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
-import { getUserById, getUserProfileById, updateProfile } from "../../service/apiClient.js"
+import {
+  getUserById,
+  getUserProfileById,
+  updateProfile,
+} from "../../service/apiClient.js"
 import Button from "../../components/button"
 import BasicInfo from "../../components/basic-info"
 import ContactInfo from "../../components/contactInfo"
@@ -13,6 +17,7 @@ import Bio from "../../components/bio"
 import ProfessionalInfo from "../../components/professionalinfo"
 
 const UserProfile = () => {
+  const { t } = useTranslation()
   const { id } = useParams()
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
@@ -33,17 +38,7 @@ const UserProfile = () => {
     endDate: "",
     imageUrl: "",
   })
-
-  
-  if(user.role === "TBA"){setIsTeacher(false)}
-  if(user.role === "STUDENT"){setIsTeacher(false)}
-  if(user.role === "TEACHER"){setIsTeacher(true)}
-
   const [tempUser, setTempUser] = useState(profile)
-  console.log("ID....", id)
-  console.log("TEMP USER....", tempUser)
-  console.log("Profile....", profile)
-  console.log("User....",user)
 
   useEffect(() => {
     getUserProfileById(id).then((profile) => {
@@ -52,11 +47,16 @@ const UserProfile = () => {
     })
 
     getUserById(id).then((user) => {
-      setUser(user)
+      setUser(user.data.user)
     })
-
   }, [id])
 
+  console.log("ID....", id)
+  console.log("TEMP USER....", tempUser)
+  console.log("Profile....", profile)
+  console.log("User....", user)
+
+
   const initials =
     profile && profile.firstName && profile.lastName
       ? `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`
@@ -78,7 +78,6 @@ const UserProfile = () => {
     })
   }
 
-  const { t } = useTranslation()
 
   const revert = () => {
     setProfile(tempUser)
@@ -118,8 +117,10 @@ const UserProfile = () => {
         <div className="profile-information">
           <ProfileCircle initials={initials} />
           <section>
-            <h4>{profile.firstName} {profile.lastName}</h4>
-            <p>{user.title}</p>
+            <h4>
+              {profile.firstName} {profile.lastName}
+            </h4>
+            {/* <p>{user.title}</p> */}
           </section>
         </div>
 

From 98aa8cb60ca924b86dc4f41a49a32f88f8970f35 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 14:34:04 +0000
Subject: [PATCH 32/35] REMOVE: setIsTeacher. Not implemented.

---
 src/pages/userProfile/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 0f78a2a6..62728ed7 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -21,7 +21,7 @@ const UserProfile = () => {
   const { id } = useParams()
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
-  const [isTeacher, setIsTeacher] = useState(true)
+  const [isTeacher] = useState(true)
   const [user, setUser] = useState()
   const [profile, setProfile] = useState({
     firstName: "",

From 04745d20556fbe3795cd562f3f13ec6b11844244 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 15:25:37 +0000
Subject: [PATCH 33/35] FEAT: Buttons only appear if you are viewing your
 profile.

---
 src/pages/userProfile/index.js | 81 ++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 62728ed7..ac30ea9d 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"
 import Card from "../../components/card"
 import ProfileCircle from "../../components/profileCircle"
 import "./style.css"
-import { useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 import {
   getUserById,
@@ -15,8 +15,10 @@ 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)
@@ -51,12 +53,6 @@ const UserProfile = () => {
     })
   }, [id])
 
-  console.log("ID....", id)
-  console.log("TEMP USER....", tempUser)
-  console.log("Profile....", profile)
-  console.log("User....", user)
-
-
   const initials =
     profile && profile.firstName && profile.lastName
       ? `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`
@@ -78,7 +74,6 @@ const UserProfile = () => {
     })
   }
 
-
   const revert = () => {
     setProfile(tempUser)
     console.log("revert")
@@ -107,6 +102,44 @@ const UserProfile = () => {
     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">
@@ -170,37 +203,7 @@ const UserProfile = () => {
         </div>
 
         <p className="text-blue1">{`*${t("required")}`}</p>
-
-        <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>
+        {checkCurrentUser()}
       </Card>
     </main>
   )

From e22e4b4b5d45ca963406fd41cfa513d608697f9c Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 15:28:39 +0000
Subject: [PATCH 34/35] FIX: changed isTeacher to false.

---
 src/pages/userProfile/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index ac30ea9d..41a5c028 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -23,7 +23,7 @@ const UserProfile = () => {
   const { id } = useParams()
   const [disabledText, setDisabledText] = useState(true)
   const [saveButton, setSave] = useState(false)
-  const [isTeacher] = useState(true)
+  const [isTeacher] = useState(false)
   const [user, setUser] = useState()
   const [profile, setProfile] = useState({
     firstName: "",

From a7c6c09a4fa04052a639d954ef9a5b347e9dc9b1 Mon Sep 17 00:00:00 2001
From: Lukas Dembicki <lad_777@hotmail.com>
Date: Fri, 23 Feb 2024 15:29:49 +0000
Subject: [PATCH 35/35] FEAT: added console.logs

---
 src/pages/userProfile/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/userProfile/index.js b/src/pages/userProfile/index.js
index 41a5c028..494d51e4 100644
--- a/src/pages/userProfile/index.js
+++ b/src/pages/userProfile/index.js
@@ -53,6 +53,9 @@ const UserProfile = () => {
     })
   }, [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)}`