Bc 246 chiu migrate sign up

client/src/screens/UserProfile/UserProfile.jsx

@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+// components
+import { ShowPortfolioProjects } from '../../components/Projects/PortfolioCard/PortfolioCard';
+import { EditProfile } from '../EditProfile/EditProfile';
+// assets
+import { uiActions } from '../../services/redux/slices/uiSlice';
+import './UserProfile.scss';
+import { getOneUser } from '../../services/api/users';
+
+export const UserProfile = () => {
+ const { user: reduxUser, editMode } = useSelector((state) => state.ui);
+ const [currUser, setCurrUser] = useState({
+ first_name: '',
+ last_name: '',
+ role: '',
+ email: '',
+ about: '',
+ fun_fact: '',
+ portfolio_link: '',
+ });
+ const dispatch = useDispatch();
+ const params = useParams();
+ const validUrl = `http://${reduxUser.portfolio_link}`;
+
+ useEffect(() => {
+ const setUser = async () => {
+ if (params.id === reduxUser._id) {
+ setCurrUser(reduxUser);
+ } else {
+ const res = await getOneUser(params.id);
+ setCurrUser(res);
+ }
+ };
+ setUser();
+ }, [params]);
+
+ const handleToggleMode = () => {
+ dispatch(uiActions.toggleEditMode());
+ };
+
+ if (editMode) {
+ return (
+ <>
+ <button onClick={handleToggleMode}>back to profile</button>
+ <EditProfile currUser={currUser} />
+ </>
+ );
+ } else {
+ const { about, email, fun_fact, first_name, last_name, role, _id: currUserId } = currUser;
+ return (
+ <div className="user-profile">
+ <h3 className="header">Profile</h3>
+ <div className="image">im an image</div>
+ <div className="title-wrapper">
+ {currUserId === reduxUser._id && <button onClick={handleToggleMode}>edit profile</button>}
+ <h2 className="title-name">
+ {first_name} {last_name}
+ </h2>
+ <h2 className="title-role">{role}</h2>
+ </div>
+ {/*
+ <div className="links">
+ <a href={`mailto:${email}`} target="">
+ E-mail
+ </a>
+ <a href={validUrl} target="_blank">
+ Portfolio
+ </a>
+ </div>
+ */}
+ <div className="content">
+ <div className="about">
+ <h3>About</h3>
+ <p>{about}</p>
+ </div>
+
+ {fun_fact && (
+ <div className="fun-fact">
+ <h3>Fun Fact</h3>
+ <p>{fun_fact}</p>
+ </div>
+ )}
+ </div>
+
+ <ShowPortfolioProjects currUser={currUser} />
+ </div>
+ );
+ }
+};

client/src/screens/UserProfile/UserProfile.scss

@@ -0,0 +1,47 @@
+.user-profile {
+ font-family: 'Nunito', sans-serif;
+ .title-wrapper {
+ margin-top: 1rem;
+ text-align: center;
+ .title-name {
+ font-weight: 600;
+ font-size: 24px;
+ }
+ .title-role {
+ font-weight: normal;
+ font-size: 18px;
+ }
+ }
+
+ .image {
+ background-color: gray;
+ height: 150px;
+ margin: 1rem auto 0;
+ width: 150px;
+ }
+
+ .links {
+ display: flex;
+ font-size: 1rem;
+ justify-content: space-between;
+ margin: 1rem auto;
+ width: 200px;
+ a {
+ color: black;
+ }
+ }
+
+ .content {
+ margin: auto;
+ width: 300px;
+ h3 {
+ font-weight: 100;
+ font-size: 1.5rem;
+ text-decoration: underline;
+ }
+ p {
+ margin: 0.5rem 0 0.5rem 2.5rem;
+ width: 250px;
+ }
+ }
+}