diff --git a/src/App.css b/src/App.css index 4cf215e0..483d870b 100644 --- a/src/App.css +++ b/src/App.css @@ -22,6 +22,13 @@ text-align: center; } +.profile-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 4rem; +} + .headshot { width: 50px; height: 50px; diff --git a/src/App.js b/src/App.js index ba5c0842..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 = () => { } /> } /> + + + + } + /> + { +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
{label && } { + const currentUserId = useContext(AuthContext).userId + const { t } = useTranslation() + const { id } = useParams() + const [disabledText, setDisabledText] = useState(true) + const [saveButton, setSave] = useState(false) + const [isTeacher] = useState(false) + const [user, setUser] = useState() + const [profile, setProfile] = useState({ + firstName: "", + lastName: "", + githubUsername: "", + bio: "", + email: "", + mobile: "", + password: "", + role: "", + specialism: "", + cohort: "", + startDate: "", + endDate: "", + imageUrl: "", + }) + const [tempUser, setTempUser] = useState(profile) + + useEffect(() => { + getUserProfileById(id).then((profile) => { + setProfile(profile.data.profile) + setTempUser(profile.data.profile) + }) + + getUserById(id).then((user) => { + setUser(user.data.user) + }) + }, [id]) + + console.log("USER INFORMATION ---->", user) + console.log("PROFILE INFORMATION ---->", profile) + + const initials = + profile && profile.firstName && profile.lastName + ? `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}` + : "A" + + let classes = "" + if (saveButton === false) { + classes = "locked-input" + } + + // const splitWord = profile.bio.trim(/\s+/g, "").length + + const onInput = (event) => { + const { name, value } = event.target + + setProfile({ + ...profile, + [name]: value, + }) + } + + const revert = () => { + setProfile(tempUser) + console.log("revert") + return + } + + const save = () => { + updateProfile( + id, + profile.firstName, + profile.lastName, + profile.githubUsername, + profile.bio, + profile.email, + profile.mobile, + profile.password, + profile.role, + profile.specialism, + profile.cohort, + profile.startDate, + profile.endDate, + profile.imageUrl + ) + setTempUser(profile) + console.log("save") + return + } + + const checkCurrentUser = () => { + console.log("CURRENT ID", currentUserId, "PROFILE ID", id) + if (Number(currentUserId) === Number(id)) { + return ( +
+
+ ) + } + } + + return ( +
+
+

{t("profile")}

+
+ + +
+ +
+

+ {profile.firstName} {profile.lastName} +

+ {/*

{user.title}

*/} +
+
+ +
+
+ +
+ + {isTeacher ? ( +
+ +
+ ) : ( +
+ +
+ )} + +
+ +
+ +
+ +
+
+ +

{`*${t("required")}`}

+ {checkCurrentUser()} + +
+ ) +} + +export default UserProfile diff --git a/src/pages/userProfile/style.css b/src/pages/userProfile/style.css new file mode 100644 index 00000000..0f52ed05 --- /dev/null +++ b/src/pages/userProfile/style.css @@ -0,0 +1,43 @@ +.profile-information { + display: grid; + grid-template-columns: 70px 1fr; +} + +.welcome-formheader { + border-top: solid rgba(128, 128, 128, 0.226) 2px; + margin-top: 20px; + padding-top: 20px; +} + +.welcome { + margin-bottom: 20px; +} + +.profile-buttons { + display: grid; + grid-template-columns: 170px 170px; + gap: 20px; + justify-content: end; +} + +.profile-buttons > button { + background-color: #F0F5FA; + color: #64648C; + cursor: pointer; +} + +.profile-buttons > .saveButton { + background-color: #000046; + color: #ffffff; + cursor: pointer; +} + +.locked-input form input { + background: white; + color: black; +} + +.locked-input textarea { + background: white; + color: black; +} \ No newline at end of file diff --git a/src/service/apiClient.js b/src/service/apiClient.js index 53299f8a..95981694 100644 --- a/src/service/apiClient.js +++ b/src/service/apiClient.js @@ -54,7 +54,7 @@ async function postComment(comment) { async function getCohorts() { const res = await get("cohorts") - return res.data + return res.data } async function getTeachers() { @@ -96,8 +96,12 @@ async function getUsers() { } async function getUserById(userId) { -   return get(`users/${userId}`) - } + return get(`users/${userId}`) +} + +async function getUserProfileById(userId) { + return get(`users/profile/${userId}`) +} async function put(endpoint, data, auth = true) { return await request("PUT", endpoint, data, auth) @@ -142,7 +146,7 @@ async function toggleLike(postId) { } async function getStudents() { - const response = await get('students') + const response = await get("students") return response.data.students } @@ -166,5 +170,6 @@ export { getUserById, getStudents, getSelfTeacher, - getSelfStudent + getSelfStudent, + getUserProfileById }