diff --git a/__tests__/app.test.tsx b/__tests__/app.test.tsx index cfd3130..c58e5b4 100644 --- a/__tests__/app.test.tsx +++ b/__tests__/app.test.tsx @@ -144,7 +144,7 @@ describe('Footer', () => { // Filter this array to get the specific links const blogLink = allLinks.find((link) => ( - link.textContent === 'Blog') + link.textContent === 'News') ); expect(blogLink).toBeInTheDocument(); }); diff --git a/public/static/assets/profilecovers/admin.png b/public/static/assets/profilecovers/admin.png new file mode 100644 index 0000000..2e42c10 Binary files /dev/null and b/public/static/assets/profilecovers/admin.png differ diff --git a/src/app/(profile)/profile/page.tsx b/src/app/(profile)/profile/page.tsx index f95ad7c..5af0bc5 100644 --- a/src/app/(profile)/profile/page.tsx +++ b/src/app/(profile)/profile/page.tsx @@ -2,22 +2,7 @@ // *********** START OF IMPORTS *********** import React, {useEffect, useState} from 'react'; -import { - Avatar, - Card, - CardContent, - CardMedia, - CircularProgress, - Grid, Typography, - TextField, - Button, - CardActions, -} from '@mui/material'; -import {Box} from '@mui/system'; -import {styled} from '@mui/material/styles'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogAction from '@mui/material/DialogActions'; +import {CircularProgress} from '@mui/material'; import {useRouter} from 'next/navigation'; import {useSearchParams} from 'next/navigation'; @@ -27,69 +12,43 @@ import Header from '@/app/modules/header/header'; import Footer from '@/app/modules/footer/footer'; import CookieService from '@/services/cookie_service'; import UserService from '@/services/user_service'; -import Elink from '@/app/modules/elink/elink'; +import PersonalDetails from '@/app/modules/profile/personal'; +import ProfileActions from '@/app/modules/profile/actions'; +import ProfileTasks from '@/app/modules/profile/tasks'; // *********** REDUX IMPORTS *********** // *********** END OF IMPORTS *********** + +// *********** START OF TYPES *********** + type UserDetails = { username: string; email: string; firstName: string; lastName: string; githubLink: string; - addtlLinks: string[]; + webLinks: { [key: string]: string }; + organization: string; + title: string; + profileImage: string; } -const UpdateDialog = styled(Dialog)(({theme}) => ({ - '& .MuiDialogContent-root': { - padding: theme.spacing(2), - }, - '& .MuiDialogActions-root': { - padding: theme.spacing(1), - }, -})); - -// Dialog that shows whether user profile successfully updated or not. -/** - * ProfileUpdateDialog component - * @param {boolean} open - whether the dialog is open - * @param {function} onClose - function to handle the close - * @return {JSX.Element} - ProfileUpdateDialog component - */ -function ProfileUpdateDialog({open, onClose}: - {open: boolean, onClose: any}) { - return ( - - - - Update Succeed! - - - - - - - ); +type AllDetails = { + username: string; + email: string; + firstName: string; + lastName: string; + githubLink: string; + webLinks: { [key: string]: string }; + organization: string; + title: string; + profileImage: string; + submitted_tasks: { [key: string]: string }; } -const ProfileCardContent = styled(CardContent)(({theme}) => ({ - '& .MuiTypography-root': { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - }, - '& .MuiTypography-body1': { - align: 'center', - justifyContent: 'flex-end', - }, - 'marginBottom': 0.5, - 'marginTop': 0.5, -})); +// *********** END OF TYPES *********** const ProfilePage: React.FC = () => { const router = useRouter(); @@ -99,30 +58,58 @@ const ProfilePage: React.FC = () => { const [user, setUser] = useState(userProfile); const [userToken, setUserToken] = useState({token: ''}); - - // prepare for user profile fields update - const [githubLink, setUserGithubLink] = useState(''); - const [emailLink, setUserEmailLink] = useState(''); - const [updateDialogOpen, setUpdateDialogOpen] = useState(false); const [isLoading, setIsLoading] = useState(true); const url = '/account/public/'; - const urlUpdate = ( - userToken !== null - ) && ( - userToken !== undefined - ) ? '/account/update/' : ''; - const [userDetails, setUserDetails] = useState({ username: '', email: '', firstName: '', lastName: '', githubLink: '', - addtlLinks: [], + webLinks: {}, + organization: '', + title: '', + profileImage: 'ducky.jpg', }); + const [submittedTasks, setSubmittedTasks] = useState<[string, string][]>([]); + + const formatUserDetails = (userDetails: AllDetails) => { + const details: UserDetails = { + username: '', + email: '', + firstName: '', + lastName: '', + githubLink: '', + webLinks: {}, + organization: '', + title: '', + profileImage: 'ducky.jpg', + }; + details.username = userDetails.username; + details.email = userDetails.email; + details.firstName = userDetails.firstName; + details.lastName = userDetails.lastName; + details.githubLink = userDetails.githubLink; + details.webLinks = userDetails.webLinks; + details.organization = userDetails.organization; + details.title = userDetails.title; + details.profileImage = userDetails.profileImage; + if (details.title === '') { + details.title = 'User'; + } + if (details.organization === '') { + details.organization = 'N/A'; + } + setUserDetails(details); + + // Convert submitted_tasks to an array of tuples + const submittedTasksArray = Object.entries(userDetails.submitted_tasks); + setSubmittedTasks(submittedTasksArray); + }; + useEffect(() => { const retUser = CookieService.getUserCookie(); if (retUser === null || retUser === undefined) { @@ -139,7 +126,7 @@ const ProfilePage: React.FC = () => { UserService.getUserDetails(url, user) .then((response) => { console.log('userInfo: ', response); - setUserDetails(response.data); + formatUserDetails(response.data); setIsLoading(false); }) .catch((error) => { @@ -148,26 +135,6 @@ const ProfilePage: React.FC = () => { }); }, [userProfile, user, url]); - const handleTextChange = (setState: any) => ( - event: React.ChangeEvent - ) => { - setState(event.target.value); - }; - - const handleProfileUpdateClick = (userToken: any) => { - const updatedProfile = { - email: emailLink === '' ? userDetails.email : emailLink, - githubLink: githubLink === '' ? - userDetails.githubLink : githubLink, - }; - // todo: check return value - // eslint-disable-next-line no-unused-vars - const ret = UserService.updateUserProfile( - userToken.token, updatedProfile, urlUpdate - ); - setUpdateDialogOpen(true); - }; - const renderContent = () => { switch (true) { case (userToken === undefined) || (userToken === null): @@ -177,70 +144,44 @@ const ProfilePage: React.FC = () => { return ; default: return ( - - - - - - - - - {`${userDetails.firstName} - ${userDetails.lastName}`} - -
- - - - - - - - - - - - - - - - - - { - setUpdateDialogOpen(false); - }} - /> - +
+
+

Personal Details

+
+
+ +
+
+

Submitted Tasks

+
+
+ +
+
+

More Actions

+
+
+ +
+
); } }; @@ -250,50 +191,13 @@ const ProfilePage: React.FC = () => {
- +
{ renderContent() } - +