diff --git a/src/features/profile/Profile.module.scss b/src/features/profile/Profile.module.scss index cc33745b..60f1c331 100644 --- a/src/features/profile/Profile.module.scss +++ b/src/features/profile/Profile.module.scss @@ -1,23 +1,7 @@ -.narratives { - border: 1px dashed #000; +.profile-panel { + padding: 1rem; } -.narratives * { - border: 1px dashed #000; -} - -.profile { - border: 1px dashed #000; -} - -.profile * { - border: 1px dashed #000; -} - -.profile-narratives { - border: 1px dashed #000; -} - -.profile-nav { - border: 1px dashed #000; +.profile-names { + padding: 1rem; } diff --git a/src/features/profile/Profile.test.tsx b/src/features/profile/Profile.test.tsx index d58d26ca..d6460ae1 100644 --- a/src/features/profile/Profile.test.tsx +++ b/src/features/profile/Profile.test.tsx @@ -107,6 +107,7 @@ describe('Profile related components', () => { narrativesLink={''} pageTitle={''} profileLink={''} + profileData={{}} realname={''} username={''} viewMine={true} @@ -130,7 +131,13 @@ describe('Profile related components', () => { }); test('renders ProfileView', () => { - render(); + render( + + ); }); test('renders ProfileWrapper', () => { diff --git a/src/features/profile/Profile.tsx b/src/features/profile/Profile.tsx index 38ac8c53..533415b8 100644 --- a/src/features/profile/Profile.tsx +++ b/src/features/profile/Profile.tsx @@ -1,8 +1,25 @@ -import { FC, useMemo } from 'react'; -import { Link, useLocation, useParams } from 'react-router-dom'; +import { faEdit } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + Button, + Chip, + Container, + Grid, + Paper, + Stack, + Tab, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Tabs, + Typography, +} from '@mui/material'; +import { FC, useEffect, useMemo, useState } from 'react'; +import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { getUserProfile } from '../../common/api/userProfileApi'; import { parseError } from '../../common/api/utils/parseError'; -import { Button } from '../../common/components'; import { Loader } from '../../common/components/Loader'; import { useAppSelector } from '../../common/hooks'; import { authUsername } from '../auth/authSlice'; @@ -25,13 +42,10 @@ export const ProfileNarrativesMessage: FC<{ yours: boolean; }> = ({ realname, yours }) => { if (yours) { - return This table shows all of your narratives.; + return Narratives owned by me.; } return ( - - This table shows all narratives owned by {realname} which are also - accessible to you. - + Narratives owned by {realname} which are also accessible to me. ); }; @@ -63,11 +77,144 @@ export const ProfileInfobox: FC<{ realname: string }> = ({ realname }) => { return
Profile Infobox for {realname}.
; }; -export const ProfileView: FC<{ realname: string }> = ({ realname }) => { +export const ProfileView: FC<{ + realname: string; + username: string; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + profileData: any; +}> = ({ realname, username, profileData }) => { + const gravatarHash = profileData.synced.gravatarHash; + const avatarSrc = gravatarHash + ? `https://www.gravatar.com/avatar/${gravatarHash}?s=300&r=pg&d=identicon` + : ''; + // Placeholder data for research interests + const researchInterests = [ + 'Biology', + 'Genomics', + 'Data Management', + 'Scientific Communication', + ]; + // Placeholder data for organizations + const organizations = [ + 'Eiusmod sit est aute aliqua nostrud sint eu ex tempor.', + 'Sint non cupidatat reprehenderit proident deserunt esse Lorem.', + 'Tempor reprehenderit commodo voluptate fugiat aliqua.', + 'Reprehenderit dolore aute proident et.', + ]; return ( -
- - +
+ + + + + + {`Profile + + {realname} + {username} + + + + + + + Position + Consectetur culpa commodo + + + Department + Consectetur culpa commodo + + + Organization + Consectetur culpa commodo + + + Location + Consectetur culpa commodo + + + + + + + + + + + + Research or Personal Statement + + + {profileData.userdata.researchStatement} + + + + + Research Interests + + + {researchInterests.map((interest, i) => ( + + ))} + + + + + Organizations + + + {organizations.map((org) => ( + {org} + ))} + + + + + Affiliations + + + + + Position + Organization + Tenure + + + + {/* eslint-disable @typescript-eslint/no-explicit-any */} + {profileData.userdata.affiliations.map( + (affiliation: any) => ( + + {affiliation.title} + {affiliation.organization} + + {affiliation.started} -{' '} + {affiliation.ended || 'Present'} + + + ) + )} + {/* eslint-enable @typescript-eslint/no-explicit-any */} + +
+ + + + +
); }; @@ -76,6 +223,7 @@ export interface ProfileParams { narrativesLink: string; pageTitle: string; profileLink: string; + profileData: unknown; realname: string; username: string; viewMine: boolean; @@ -86,33 +234,66 @@ export const Profile: FC = ({ narrativesLink, pageTitle, profileLink, + profileData, realname, username, viewMine, viewNarratives, }) => { usePageTitle(pageTitle); + const navigate = useNavigate(); + const location = useLocation(); + const [activeTab, setActiveTab] = useState(() => { + switch (location.pathname) { + case profileLink: + return 0; + case narrativesLink: + return 1; + default: + return 0; + } + }); + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setActiveTab(newValue); + }; + + useEffect(() => { + document.querySelector('main')?.scrollTo(0, 0); + }, [activeTab]); + return ( - <> - -
- {viewNarratives ? ( - - ) : ( - - )} - -
- + + + + navigate(profileLink)} + /> + navigate(narrativesLink)} + /> + +
+ {viewNarratives ? ( + + ) : ( + + )} +
+ + ); }; @@ -178,6 +359,7 @@ export const ProfileWrapper: FC = () => { narrativesLink={narrativesLink} pageTitle={pageTitle} profileLink={profileLink} + profileData={profile.profile} realname={realname} username={viewUsername} viewMine={viewMine} diff --git a/src/stories/components/Profile.stories.tsx b/src/stories/components/Profile.stories.tsx index 5b65a391..f171537d 100644 --- a/src/stories/components/Profile.stories.tsx +++ b/src/stories/components/Profile.stories.tsx @@ -15,6 +15,7 @@ const ProfileTemplate: ComponentStory = (args) => { narrativesLink, pageTitle, profileLink, + profileData, realname, username, viewMine, @@ -25,6 +26,7 @@ const ProfileTemplate: ComponentStory = (args) => { narrativesLink={narrativesLink} pageTitle={pageTitle} profileLink={profileLink} + profileData={profileData} realname={realname} username={username} viewMine={viewMine} @@ -40,6 +42,7 @@ Default.args = { narrativesLink: '/profile/narratives', pageTitle: 'Some profile', profileLink: '/profile', + profileData: {}, realname: 'Some Realname', username: 'someusername', viewMine: true,