Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract Common Modal Components To Reduce Duplication #144

Merged
merged 6 commits into from
Jan 25, 2025
Merged

Extract Common Modal Components To Reduce Duplication #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7c16041
refactor(modals): extract common Modal wrapping to ModalWrapper
AdrianAndersen Dec 27, 2024
9f68d13
refactor(modals): extract sub header logic to SubHeader component
AdrianAndersen Dec 27, 2024
adcc84c
refactor(Settings): extract Switch wrapping markup to SwitchWrapper
AdrianAndersen Dec 27, 2024
1063529
fix(agenda): correct modal title
AdrianAndersen Jan 25, 2025
056e2d7
fix(SubHeader): adjust optional sx
AdrianAndersen Jan 25, 2025
654bd7f
fix(SubHeader): fix empty sx
AdrianAndersen Jan 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 12 additions & 62 deletions src/components/modals/Agenda/Agenda.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { Alert, AlertTitle, Avatar, Box, Stack, Typography, useTheme } from "@mu
import React from "react";

import AgendaEntry from "@/components/modals/Agenda/AgendaSession";
import ModalWrapper from "@/components/modals/ModalWrapper";
import SubHeader from "@/components/modals/SubHeader";
import { PLANNED_SESSIONS_NEXT_WHOLE_WEEKS } from "@/lib/consts";
import { capitalizeFirstCharacter, isClassInThePast } from "@/lib/helpers/date";
import { classConfigRecurrentId, classRecurrentId } from "@/lib/helpers/recurrentId";
Expand Down Expand Up @@ -111,40 +113,7 @@ export default function Agenda({
const inactiveChains = Object.keys(chainConfigs).filter((chain) => !chainConfigs[chain]?.active);

return (
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
width: "95%",
maxHeight: "80%",
overflowY: "auto",
maxWidth: 500,
minHeight: 300,
transform: "translate(-50%, -50%)",
borderRadius: "0.25em",
boxShadow: 24,
p: 4,
backgroundColor: "white",
'[data-mui-color-scheme="dark"] &': {
backgroundColor: "#181818",
},
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 1,
paddingBottom: 2,
}}
>
{userSessions.length > 0 ? <CalendarMonth /> : <CalendarToday />}
<Typography variant="h6" component="h2">
Min timeplan
</Typography>
</Box>
<ModalWrapper title={"Min timeplan"} icon={userSessions.length > 0 ? <CalendarMonth /> : <CalendarToday />}>
{Object.keys(chainConfigs).length === 0 ? (
<Alert severity="info" sx={{ mt: 1.5 }}>
<AlertTitle>Mangler medlemskap</AlertTitle>
Expand Down Expand Up @@ -179,9 +148,7 @@ export default function Agenda({
{PLANNED_SESSIONS_NEXT_WHOLE_WEEKS} ukene. Kontroller at planen din stemmer overens med
treningssenteret sin timeplan.
</Alert>
<Typography variant="h6" sx={{ fontSize: 18 }}>
Utdaterte timer
</Typography>
<SubHeader title={"Utdaterte timer"} />
{Object.entries(missingClassConfigs).flatMap(([chain, classConfigs]) =>
classConfigs.map((classConfig) => (
<AgendaEntry
Expand All @@ -193,31 +160,14 @@ export default function Agenda({
)}
</Box>
)}
<Box>
<Typography variant="h6" sx={{ fontSize: 18 }}>
Mine bookinger
</Typography>
{Object.keys(bookedSessionsDayMap).length === 0 && (
<Typography variant={"body2"} sx={{ opacity: 0.6, fontStyle: "italic" }}>
Du har ingen bookinger
</Typography>
)}
</Box>
<SubHeader
title={"Mine bookinger"}
placeholder={"Du har ingen bookinger"}
showPlaceholder={Object.keys(bookedSessionsDayMap).length === 0}
/>
<AgendaDays dayMap={bookedSessionsDayMap} />
<Box>
<Typography variant="h6" sx={{ fontSize: 18, pt: 2 }}>
Planlagte timer
</Typography>
<Typography
variant="body2"
style={{
color: theme.palette.grey[600],
fontSize: 15,
}}
>
Disse timene vil bli booket automatisk
</Typography>
</Box>
<Box height={2} />
<SubHeader title={"Planlagte timer"} description={"Disse timene vil bli booket automatisk"} />
{inactiveChains.length > 0 &&
(inactiveChains.length === Object.keys(chainConfigs).length ? (
<Alert severity={"info"} icon={<PauseCircleRounded />}>
Expand Down Expand Up @@ -276,6 +226,6 @@ export default function Agenda({
</Stack>
</Box>
)}
</Box>
</ModalWrapper>
);
}
42 changes: 9 additions & 33 deletions src/components/modals/ClassInfo/ClassInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,14 @@ import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
import LocationOnRoundedIcon from "@mui/icons-material/LocationOnRounded";
import PersonRoundedIcon from "@mui/icons-material/PersonRounded";
import LoadingButton from "@mui/lab/LoadingButton";
import { Alert, AlertTitle, Box, Stack, Typography } from "@mui/material";
import { Alert, AlertTitle, Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Image from "next/image";
import React, { useState } from "react";

import ClassInfoEntry from "@/components/modals/ClassInfo/ClassInfoEntry";
import ClassInfoUsersGroup from "@/components/modals/ClassInfo/ClassInfoUsersGroup";
import ModalWrapper from "@/components/modals/ModalWrapper";
import ClassPopularityMeter from "@/components/schedule/class/ClassPopularityMeter";
import ConfirmCancellation from "@/components/schedule/class/ConfirmCancellation";
import { NoShowBadgeIcon } from "@/components/utils/NoShowBadgeIcon";
Expand Down Expand Up @@ -98,33 +99,9 @@ export default function ClassInfo({
const positionedUsersInWaitList = usersOnWaitlist.filter((u) => u.positionInWaitList);

return (
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
width: "95%",
maxHeight: "80%",
overflowY: "auto",
maxWidth: 600,
transform: "translate(-50%, -50%)",
borderRadius: "0.25em",
boxShadow: 24,
p: 4,
backgroundColor: "white",
'[data-mui-color-scheme="dark"] &': {
backgroundColor: "#181818",
},
}}
>
<Stack
direction={"row"}
sx={{
gap: 1,
alignItems: "center",
paddingBottom: 1,
}}
>
<ModalWrapper
title={_class.activity.name}
icon={
<Box
sx={{
borderRadius: "50%",
Expand All @@ -136,10 +113,9 @@ export default function ClassInfo({
},
}}
/>
<Typography variant="h6" component="h2">
{_class.activity.name}
</Typography>
</Stack>
}
titleAlignment={"left"}
>
{_class.isCancelled && (
<Alert severity={"error"} icon={<CancelRounded />}>
{_class.cancelText ? (
Expand Down Expand Up @@ -372,6 +348,6 @@ export default function ClassInfo({
chain={chain}
_class={_class}
/>
</Box>
</ModalWrapper>
);
}
93 changes: 20 additions & 73 deletions src/components/modals/Community/Community.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,35 @@
import { People } from "@mui/icons-material";
import { Alert, Badge, Box, Divider, Tooltip, Typography, useTheme } from "@mui/material";
import { Alert, Badge, Box, Divider, Tooltip, Typography } from "@mui/material";
import React, { ReactNode } from "react";

import CommunityUserCard from "@/components/modals/Community/CommunityUserCard";
import ModalWrapper from "@/components/modals/ModalWrapper";
import SubHeader from "@/components/modals/SubHeader";
import { useCommunity } from "@/lib/hooks/useCommunity";
import { ChainProfile } from "@/types/chain";
import { CommunityUser, UserRelationship } from "@/types/community";

const CommunityUserList = ({
title,
defaultText,
placeholder,
communityUsers,
chainProfiles,
badge,
}: {
title: string;
defaultText: string;
placeholder: string;
communityUsers: CommunityUser[];
chainProfiles: ChainProfile[];
badge?: ReactNode;
}) => {
return (
<Box>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Typography variant="h6" sx={{ fontSize: 18 }}>
{title}
</Typography>
{badge}
</Box>
{communityUsers.length === 0 && (
<Typography variant={"body2"} sx={{ opacity: 0.6, fontStyle: "italic" }}>
{defaultText}
</Typography>
)}
<SubHeader
title={title}
endIcon={badge}
placeholder={placeholder}
showPlaceholder={communityUsers.length === 0}
/>
{communityUsers.length > 0 && <Divider sx={{ mt: 1 }} />}
{communityUsers.map((cu) => (
<CommunityUserCard key={cu.name} communityUser={cu} chainProfiles={chainProfiles} />
Expand All @@ -43,21 +40,20 @@ const CommunityUserList = ({

const Community = ({ chainProfiles }: { chainProfiles: ChainProfile[] }) => {
const { community, communityLoading, communityError } = useCommunity();
const theme = useTheme();

const friendRequests =
community?.users.filter((user) => user.relationship === UserRelationship.REQUEST_RECEIVED) ?? [];
const FriendRequests = () => {
return (
<CommunityUserList
title={"Venneforespørsler"}
defaultText={"Du har ingen ubesvarte venneforespørsler"}
placeholder={"Du har ingen ubesvarte venneforespørsler"}
communityUsers={friendRequests}
chainProfiles={chainProfiles}
badge={
friendRequests.length > 0 && (
<Tooltip title={`Du har ${friendRequests.length} ubesvarte venneforespørsler`}>
<Badge sx={{ ml: 2 }} badgeContent={friendRequests.length} color={"error"} />
<Badge sx={{ ml: 0.3 }} badgeContent={friendRequests.length} color={"error"} />
</Tooltip>
)
}
Expand All @@ -66,60 +62,11 @@ const Community = ({ chainProfiles }: { chainProfiles: ChainProfile[] }) => {
};

return (
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
width: "90%",
maxHeight: "80%",
overflowY: "auto",
maxWidth: 520,
transform: "translate(-50%, -50%)",
borderRadius: "0.25em",
boxShadow: 24,
p: 4,
backgroundColor: "white",
'[data-mui-color-scheme="dark"] &': {
backgroundColor: "#111",
},
}}
<ModalWrapper
title={"Venner"}
icon={<People />}
description={"Venner kan se hverandres bookinger og timeplaner"}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 1,
paddingBottom: 1,
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
}}
>
<People />
<Typography variant="h6" component="h2">
Venner
</Typography>
</Box>
<Typography
variant="body2"
style={{
color: theme.palette.grey[600],
fontSize: 15,
}}
sx={{
textAlign: "center",
mb: 2.5,
}}
>
Venner kan se hverandres bookinger og timeplaner
</Typography>
</Box>
{communityError ? (
<Alert severity="error">
<Typography>Klarte ikke laste inn venner.</Typography>
Expand All @@ -131,7 +78,7 @@ const Community = ({ chainProfiles }: { chainProfiles: ChainProfile[] }) => {
{friendRequests.length > 0 && <FriendRequests />}
<CommunityUserList
title={"Dine venner"}
defaultText={"Du har ingen venner"}
placeholder={"Du har ingen venner"}
communityUsers={
community?.users.filter((user) => user.relationship === UserRelationship.FRIEND) ??
[]
Expand All @@ -140,7 +87,7 @@ const Community = ({ chainProfiles }: { chainProfiles: ChainProfile[] }) => {
/>
<CommunityUserList
title={"Personer du kanskje kjenner"}
defaultText={"Du har ingen venneforslag"}
placeholder={"Du har ingen venneforslag"}
communityUsers={
community?.users.filter(
(user) =>
Expand All @@ -155,7 +102,7 @@ const Community = ({ chainProfiles }: { chainProfiles: ChainProfile[] }) => {
)}
</Box>
)}
</Box>
</ModalWrapper>
);
};

Expand Down
Loading
Loading