81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import { Box, Button, List, Typography } from "@mui/material";
|
|
import React from "react";
|
|
import UserLite from "../../../../api-bodies/UserLite";
|
|
import { useAppSelector, useAppDispatch } from "../../../../redux/hooks";
|
|
import { open } from "../../../../redux/slices/meetingDetailsOpenSlice";
|
|
import { selectUserUpcomingMeetings } from "../../../../redux/slices/meetingsAndUserStatusSlice";
|
|
import { getUpcomingMeetingTime } from "../../Utils";
|
|
|
|
interface Props {
|
|
contactInfo: UserLite;
|
|
}
|
|
|
|
const LowerBody: React.FC<Props> = (props) => {
|
|
const dispatch = useAppDispatch();
|
|
|
|
const meetings = useAppSelector((state) =>
|
|
selectUserUpcomingMeetings(state, props.contactInfo.uuid)
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
border: 1,
|
|
borderRadius: 2,
|
|
borderColor: "#af000d",
|
|
width: "70%",
|
|
height: "60%",
|
|
alignSelf: "center",
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{ color: "white", my: 1 }}
|
|
variant="h4"
|
|
textAlign="center"
|
|
>
|
|
Upcoming meetings
|
|
</Typography>
|
|
{meetings.length === 0 ? (
|
|
<Typography
|
|
variant="h5"
|
|
textAlign="center"
|
|
sx={{ position: "relative", top: "30%" }}
|
|
>
|
|
No upcoming meetings today
|
|
</Typography>
|
|
) : (
|
|
<List sx={{ maxHeight: "100%", overflow: "auto" }}>
|
|
{meetings.map((meeting, i) => (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
height: "50px",
|
|
px: "10px",
|
|
borderTop: 1,
|
|
borderBottom: i === meetings.length - 1 ? 1 : 0,
|
|
}}
|
|
key={i}
|
|
>
|
|
<Button
|
|
variant="text"
|
|
color="info"
|
|
onClick={() => dispatch(open(meeting))}
|
|
>
|
|
{meeting.topic}
|
|
</Button>
|
|
<Typography sx={{ pt: 1.5 }}>
|
|
{getUpcomingMeetingTime(meeting)}
|
|
</Typography>
|
|
</Box>
|
|
))}
|
|
</List>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LowerBody;
|