Skip to content

Commit 6475685

Browse files
sirQuailsirQuail
committed
Implemented copilot suggestions
spearated profile picture modal for better readablity
1 parent 71a9999 commit 6475685

File tree

2 files changed

+144
-123
lines changed

2 files changed

+144
-123
lines changed

‎client/src/components/ProfilePictureModal.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { Avatar, Box, Fade, IconButton } from '@mui/material';
2+
import React from 'react';
3+
import EditIcon from '@mui/icons-material/Edit';
4+
import DeleteIcon from '@mui/icons-material/Delete';
5+
import { Trainee } from '../models';
6+
7+
interface ProfilePictureModalProps {
8+
data: Trainee | undefined;
9+
onUploadModalOpen: () => void;
10+
onConfirmationDialogOpen: () => void;
11+
}
12+
13+
export const ProfilePictureModal = ({
14+
data,
15+
onUploadModalOpen,
16+
onConfirmationDialogOpen,
17+
}: ProfilePictureModalProps) => {
18+
const [isHovering, setIsHovering] = React.useState<boolean>(false);
19+
20+
return (
21+
<Box
22+
onMouseEnter={() => {
23+
setIsHovering(true);
24+
}}
25+
onMouseLeave={() => {
26+
setIsHovering(false);
27+
}}
28+
height={180}
29+
width={180}
30+
display="flex"
31+
justifyContent="center"
32+
position="relative"
33+
>
34+
<Avatar
35+
src={data?.imageURL}
36+
alt={data?.displayName}
37+
variant="square"
38+
sx={{
39+
width: '100%',
40+
height: '100%',
41+
filter: isHovering ? 'brightness(0.7)' : 'none',
42+
}}
43+
/>
44+
45+
{isHovering && (
46+
<Box
47+
sx={{
48+
display: 'flex',
49+
position: 'absolute',
50+
justifyContent: 'center',
51+
alignItems: 'center',
52+
gap: 5,
53+
top: 0,
54+
bottom: 0,
55+
left: 0,
56+
right: 0,
57+
}}
58+
>
59+
<Fade in={isHovering}>
60+
<IconButton onClick={onUploadModalOpen} aria-label="Edit profile picture">
61+
<EditIcon
62+
sx={{
63+
color: 'white',
64+
fontSize: 40,
65+
'&:hover': { transform: 'scale(1.1)' },
66+
'&:active': { transform: 'scale(0.9)' },
67+
}}
68+
/>
69+
</IconButton>
70+
</Fade>
71+
<Fade in={isHovering}>
72+
<IconButton onClick={onConfirmationDialogOpen} aria-label="Delete profile picture">
73+
<DeleteIcon
74+
sx={{
75+
color: 'white',
76+
fontSize: 40,
77+
'&:hover': { transform: 'scale(1.1)' },
78+
'&:active': { transform: 'scale(0.9)' },
79+
}}
80+
/>
81+
</IconButton>
82+
</Fade>
83+
</Box>
84+
)}
85+
</Box>
86+
);
87+
};

‎client/src/components/ProfileSidebar.tsx‎

Lines changed: 57 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import { Avatar, Box, Fade, IconButton, Link, Stack, Typography } from '@mui/material';
1+
import { Box, IconButton, Link, Stack, Typography } from '@mui/material';
22
import { SidebarJobPath, SidebarLearningStatus } from '.';
33

44
import { LearningStatus } from '../models';
55
import LinkedInLogo from '../assets/LinkedIn_logo.png';
66
import githubLogo from '../assets/github.png';
77
import slackLogo from '../assets/slack.png';
88
import { useTraineeInfoData } from '../hooks';
9-
import React from 'react';
10-
import EditIcon from '@mui/icons-material/Edit';
11-
import DeleteIcon from '@mui/icons-material/Delete';
9+
import { ProfilePictureModal } from './ProfilePictureModal';
1210

1311
interface ProfileSidebarProps {
1412
traineeId: string;
@@ -30,129 +28,65 @@ export const ProfileSidebar = ({ traineeId }: ProfileSidebarProps) => {
3028
const [isHovering, setIsHovering] = React.useState<boolean>(false);
3129

3230
return (
33-
<Box
34-
display="flex"
35-
flexDirection="column"
36-
alignItems="center"
37-
gap={2}
38-
color="black"
39-
bgcolor="#d1fbe6"
40-
height="100vh"
41-
paddingX={4}
42-
paddingY={4}
43-
>
44-
{/* Profile image */}
31+
<>
4532
<Box
46-
onMouseEnter={() => {
47-
setIsHovering(true);
48-
}}
49-
onMouseLeave={() => {
50-
setIsHovering(false);
51-
}}
52-
height={180}
53-
width={180}
5433
display="flex"
55-
justifyContent="center"
56-
position="relative"
34+
flexDirection="column"
35+
alignItems="center"
36+
gap={2}
37+
color="black"
38+
bgcolor="#d1fbe6"
39+
height="100vh"
40+
paddingX={4}
41+
paddingY={4}
5742
>
58-
<Avatar
59-
src={data?.imageURL}
60-
alt={data?.displayName}
61-
variant="square"
62-
sx={{
63-
width: '100%',
64-
height: '100%',
65-
filter: isHovering ? 'brightness(0.7)' : 'none',
66-
}}
67-
/>
68-
{isHovering && (
69-
<Box
70-
sx={{
71-
display: 'flex',
72-
position: 'absolute',
73-
justifyContent: 'center',
74-
alignItems: 'center',
75-
gap: 5,
43+
<ProfilePictureModal data={data} onUploadModalOpen={() => null} onConfirmationDialogOpen={() => null} />
7644

77-
height: 180,
78-
width: 180,
79-
}}
80-
>
81-
<Fade in={isHovering}>
82-
<EditIcon
83-
sx={{
84-
color: 'white',
85-
fontSize: 40,
86-
'&:hover': { transform: 'scale(1.1)' },
87-
'&:active': { transform: 'scale(0.9)' },
88-
}}
89-
onClick={() => {
90-
// todo edit profile picture
91-
}}
92-
></EditIcon>
93-
</Fade>
94-
<Fade in={isHovering}>
95-
<DeleteIcon
96-
sx={{
97-
color: 'white',
98-
fontSize: 40,
99-
'&:hover': { transform: 'scale(1.1)' },
100-
'&:active': { transform: 'scale(0.9)' },
101-
}}
102-
onClick={() => {
103-
// todo delete profile picture
104-
}}
105-
></DeleteIcon>
106-
</Fade>
107-
</Box>
108-
)}
45+
<Stack direction="column" spacing={1} justifyContent="center" alignItems="center">
46+
{/* Name */}
47+
<Typography variant="h6" fontWeight="bold">
48+
{data?.displayName}
49+
</Typography>
50+
{/* Pronouns */}
51+
<Typography variant="body1" color="text.secondary">
52+
{data?.personalInfo?.pronouns}
53+
</Typography>
54+
{/* Learning Status */}
55+
{data?.educationInfo?.learningStatus === LearningStatus.Graduated ? (
56+
<SidebarJobPath jobPath={data?.employmentInfo?.jobPath}></SidebarJobPath>
57+
) : (
58+
<SidebarLearningStatus learningStatus={data?.educationInfo?.learningStatus}></SidebarLearningStatus>
59+
)}
60+
{/* Cohort */}
61+
<Typography variant="body1" color="text.secondary">
62+
Cohort {data?.educationInfo?.currentCohort || 'not assigned'}
63+
</Typography>
64+
</Stack>
65+
{/* social media contact info */}
66+
<div style={{ display: 'flex', justifyContent: 'center', gap: '16px' }}>
67+
{slackId && (
68+
<Link href={`slack://user?team=T0EJTUQ87&id=${slackId}`}>
69+
<IconButton aria-label="Slack Id">
70+
<img src={slackLogo} alt="Slack" width="32" height="32" style={{ borderRadius: '50%' }} />
71+
</IconButton>
72+
</Link>
73+
)}
74+
{githubHandle && (
75+
<Link href={`https://github.com/${githubHandle}`} target="_blank" rel="noopener">
76+
<IconButton aria-label="GitHub handel">
77+
<img src={githubLogo} alt="GitHub" width="32" height="32" style={{ borderRadius: '50%' }} />
78+
</IconButton>
79+
</Link>
80+
)}
81+
{linkedIn && (
82+
<Link href={linkedIn} target="_blank" rel="noopener">
83+
<IconButton aria-label="LinkedIn URL">
84+
<img src={LinkedInLogo} alt="LinkedIn" width="32" height="32" />
85+
</IconButton>
86+
</Link>
87+
)}
88+
</div>
10989
</Box>
110-
111-
<Stack direction="column" spacing={1} justifyContent="center" alignItems="center">
112-
{/* Name */}
113-
<Typography variant="h6" fontWeight="bold">
114-
{data?.displayName}
115-
</Typography>
116-
{/* Pronouns */}
117-
<Typography variant="body1" color="text.secondary">
118-
{data?.personalInfo?.pronouns}
119-
</Typography>
120-
{/* Learning Status */}
121-
{data?.educationInfo?.learningStatus === LearningStatus.Graduated ? (
122-
<SidebarJobPath jobPath={data?.employmentInfo?.jobPath}></SidebarJobPath>
123-
) : (
124-
<SidebarLearningStatus learningStatus={data?.educationInfo?.learningStatus}></SidebarLearningStatus>
125-
)}
126-
{/* Cohort */}
127-
<Typography variant="body1" color="text.secondary">
128-
Cohort {data?.educationInfo?.currentCohort || 'not assigned'}
129-
</Typography>
130-
</Stack>
131-
132-
{/* social media contact info */}
133-
<div style={{ display: 'flex', justifyContent: 'center', gap: '16px' }}>
134-
{slackId && (
135-
<Link href={`slack://user?team=T0EJTUQ87&id=${slackId}`}>
136-
<IconButton aria-label="Slack Id">
137-
<img src={slackLogo} alt="Slack" width="32" height="32" style={{ borderRadius: '50%' }} />
138-
</IconButton>
139-
</Link>
140-
)}
141-
{githubHandle && (
142-
<Link href={`https://github.com/${githubHandle}`} target="_blank" rel="noopener">
143-
<IconButton aria-label="GitHub handel">
144-
<img src={githubLogo} alt="GitHub" width="32" height="32" style={{ borderRadius: '50%' }} />
145-
</IconButton>
146-
</Link>
147-
)}
148-
{linkedIn && (
149-
<Link href={linkedIn} target="_blank" rel="noopener">
150-
<IconButton aria-label="LinkedIn URL">
151-
<img src={LinkedInLogo} alt="LinkedIn" width="32" height="32" />
152-
</IconButton>
153-
</Link>
154-
)}
155-
</div>
156-
</Box>
90+
</>
15791
);
15892
};

0 commit comments

Comments
 (0)