132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
import { Box, Button, IconButton, Typography } from "@mui/material";
|
|
import React from "react";
|
|
import PhoneIcon from "@mui/icons-material/Phone";
|
|
import VideocamIcon from "@mui/icons-material/Videocam";
|
|
import GroupsIcon from "@mui/icons-material/Groups";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import UserLite from "../../../../api-bodies/UserLite";
|
|
import UserStatus from "../../../../api-bodies/UserStatus";
|
|
import { useAppSelector, useAppDispatch } from "../../../../redux/hooks";
|
|
import {
|
|
selectUserStatus,
|
|
selectMeeting,
|
|
} from "../../../../redux/slices/meetingsAndUserStatusSlice";
|
|
import {
|
|
selectFavorites,
|
|
addFavorite,
|
|
removeFavorite,
|
|
} from "../../../../redux/slices/favoritesSlice";
|
|
import RemoveIcon from "@mui/icons-material/Remove";
|
|
import { MeetingStatus } from "../../../../utils";
|
|
import { selectMe } from "../../../../redux/slices/usersSlice";
|
|
|
|
interface Props {
|
|
contactInfo: UserLite;
|
|
}
|
|
|
|
const UpperBody: React.FC<Props> = (props) => {
|
|
const dispatch = useAppDispatch();
|
|
const userStatus: UserStatus = useAppSelector((state) =>
|
|
selectUserStatus(state, props.contactInfo.uuid)
|
|
);
|
|
const me = useAppSelector(selectMe);
|
|
const favoritesUuids = useAppSelector(selectFavorites);
|
|
const detailedMeeting = useAppSelector((state) =>
|
|
selectMeeting(state, userStatus.meetingId)
|
|
);
|
|
const meetingStatus: MeetingStatus =
|
|
userStatus && userStatus.inMeeting
|
|
? MeetingStatus.IN_MEETING
|
|
: MeetingStatus.NOT_IN_MEETING;
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
border: 1,
|
|
borderRadius: 2,
|
|
borderColor: "#af000d",
|
|
width: "70%",
|
|
alignSelf: "center",
|
|
mb: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
mx: 4,
|
|
}}
|
|
>
|
|
<Typography sx={{ pt: 2 }} variant="h3">{props.contactInfo.name}</Typography>
|
|
{!favoritesUuids.includes(props.contactInfo.uuid) ? (
|
|
<Button
|
|
variant="outlined"
|
|
color="success"
|
|
startIcon={<AddIcon />}
|
|
onClick={() =>
|
|
dispatch(
|
|
addFavorite({ userId: me, toBeAdded: props.contactInfo.uuid })
|
|
)
|
|
}
|
|
>
|
|
favorites
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
startIcon={<RemoveIcon />}
|
|
onClick={() =>
|
|
dispatch(
|
|
removeFavorite({
|
|
userId: me,
|
|
toBeRemoved: props.contactInfo.uuid,
|
|
})
|
|
)
|
|
}
|
|
>
|
|
favorites
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
my: 2,
|
|
mx: 4,
|
|
}}
|
|
>
|
|
<Box>
|
|
<IconButton
|
|
sx={{ border: 1, backgroundColor: "white", mr: 1 }}
|
|
size="large"
|
|
color="secondary"
|
|
>
|
|
<PhoneIcon fontSize="large" />
|
|
</IconButton>
|
|
<IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
|
|
<VideocamIcon fontSize="large" />
|
|
</IconButton>
|
|
<IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
|
|
<GroupsIcon fontSize="large" />
|
|
</IconButton>
|
|
</Box>
|
|
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
|
<Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
|
|
{detailedMeeting ? (
|
|
<Typography variant="h6">{detailedMeeting.topic}</Typography>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default UpperBody;
|