Skip to content

Commit

Permalink
refactor(ProfilePage): Extract subcomponents for improved modularity …
Browse files Browse the repository at this point in the history 
…and code reuse.
  • Loading branch information
@ZL-Asica
ZL-Asica committed Oct 10, 2024
1 parent a1b30e6 commit ad54da3
Showing 1 changed file with 87 additions and 120 deletions.
207 changes: 87 additions & 120 deletions src/components/ProfilePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ export default function ProfilePage() {
const { userProfile: profileData, loading } = useUserProfile({ uid: id });
const [signOutDialogOpen, setSignOutDialogOpen] = useState(false);

const theme = useTheme();

const handleEditClick = () => {
navigate('/edit-profile');
};
Expand All @@ -38,136 +36,105 @@ export default function ProfilePage() {
}

return (
<Box sx={{ maxWidth: 700, margin: 'auto', padding: 3 }}>
<Box sx={{ maxWidth: 700, margin: 'auto', padding: 1.5 }}>
{/* Profile Header with Avatar and Name */}
<Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', mb: 4 }}>
<Avatar
sx={{ width: 100, height: 100, bgcolor: theme.palette.primary, mb: 2 }}
src={profileData?.profilePic || ''}
alt={profileData?.name}
>
{profileData?.name?.[0]}
</Avatar>
<Typography variant="h4" sx={{ fontWeight: 'bold' }}>
{profileData?.name}
</Typography>
</Box>
<ProfileHeader name={profileData?.name} profilePic={profileData?.profilePic} />

{/* Contact Info Section */}
<Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 1 }}>
Contact Info
</Typography>

<Card variant="outlined" sx={{ mb: 3, borderRadius: 2 }}>
<CardContent>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Email sx={{ mr: 1, color: 'grey.600' }} />
<Typography variant="body2" color="textSecondary">
Email
</Typography>
</Box>
<Typography variant="body2">{profileData?.email}</Typography>
</Box>

<Divider sx={{ my: 1 }} />

<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Phone sx={{ mr: 1, color: 'grey.600' }} />
<Typography variant="body2" color="textSecondary">
Phone
</Typography>
</Box>
<Typography variant="body2">{profileData?.phoneNumber}</Typography>
</Box>
</CardContent>
</Card>
<InfoSection title="Contact Info">
<ContentBox icon={Email} title="Email" content={profileData?.email} />
<CustomDivider />
<ContentBox icon={Phone} title="Phone" content={profileData?.phone} />
</InfoSection>

{/* Bio Section */}
<Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 1 }}>
Bio
</Typography>

<Card variant="outlined" sx={{ mb: 3, borderRadius: 2 }}>
<CardContent>
<Typography variant="body2" color="textSecondary">
{profileData?.description}
</Typography>
</CardContent>
</Card>
<InfoSection title="Bio">
<Typography variant="body2" color="textSecondary">
{profileData?.bio}
</Typography>
</InfoSection>

{/* Study Info Section */}
<Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 1 }}>
Study Info
</Typography>

<Card variant="outlined" sx={{ mb: 3, borderRadius: 2 }}>
<CardContent>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<CalendarToday sx={{ mr: 1, color: 'grey.600' }} />
<Typography variant="body2" color="textSecondary">
Year
</Typography>
</Box>
<Typography variant="body2">{profileData?.year}</Typography>
</Box>

<Divider sx={{ my: 1 }} />

<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<School sx={{ mr: 1, color: 'grey.600' }} />
<Typography variant="body2" color="textSecondary">
{profileData?.major && profileData.major.includes(',') ? 'Majors' : 'Major'}
</Typography>
</Box>
<Typography variant="body2">{profileData?.major}</Typography>
</Box>

<Divider sx={{ my: 1 }} />

<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<ListAlt sx={{ mr: 1, color: 'grey.600' }} />
<Typography variant="body2" color="textSecondary">
Selected Courses
</Typography>
</Box>
<Typography variant="body2">{profileData?.selectedCourses?.join(', ')}</Typography>
</Box>
</CardContent>
</Card>
<InfoSection title="Study Info">
<ContentBox icon={CalendarToday} title="Year" content={profileData?.year} />
<CustomDivider />
<ContentBox icon={School} title="Major" content={profileData?.major} />
<CustomDivider />
<ContentBox icon={ListAlt} title="Courses" content={profileData?.courses} />
</InfoSection>

{/* Edit and Sign Out Buttons */}
<Box
sx={{
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
mt: 4,
}}
>
<Button variant="contained" onClick={handleEditClick} sx={{ mb: 2, width: '150px' }}>
Edit Profile
</Button>
<Button
variant="contained"
color="secondary"
sx={{
backgroundColor: 'theme.palette.secondary.main',
width: '150px',
}}
onClick={handleSignOutDialogOpen}
>
Sign Out
</Button>
</Box>
<ActionButtons onEditClick={handleEditClick} onSignOutClick={handleSignOutDialogOpen} />

{/* Sign Out Confirmation Dialog */}
<SignOutDialog open={signOutDialogOpen} onClose={() => setSignOutDialogOpen(false)} />
</Box>
);
}

const ProfileHeader = ({ name, profilePic }) => {
const theme = useTheme();
return (
<Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', mb: 4 }}>
<Avatar
sx={{ width: 100, height: 100, bgcolor: theme.palette.primary.main, mb: 2 }}
src={profilePic || ''}
alt={name}
>
{name?.[0]}
</Avatar>
<Typography variant="h4" sx={{ fontWeight: 'bold' }}>
{name}
</Typography>
</Box>
);
};

const InfoSection = ({ title, children }) => (
<>
<Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 1 }}>
{title}
</Typography>
<Card variant="outlined" sx={{ mb: 3, borderRadius: 2 }}>
<CardContent>{children}</CardContent>
</Card>
</>
);

const ContentBox = ({ icon: IconComponent, title, content }) => (
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<IconComponent sx={{ mr: 1, color: 'grey.600' }} />
<Typography variant="body2" color="textSecondary">
{title}
</Typography>
</Box>
<Typography variant="body2">{content}</Typography>
</Box>
);

const CustomDivider = () => <Divider sx={{ my: 1 }} />;

const ActionButtons = ({ onEditClick, onSignOutClick }) => (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
mt: 4,
}}
>
<Button variant="contained" onClick={onEditClick} sx={{ mb: 2, width: '150px' }}>
Edit Profile
</Button>
<Button
variant="contained"
color="secondary"
sx={{ width: '150px', backgroundColor: 'secondary.main' }}
onClick={onSignOutClick}
>
Sign Out
</Button>
</Box>
);

0 comments on commit ad54da3

Please sign in to comment.