149 lines
4.2 KiB
TypeScript
149 lines
4.2 KiB
TypeScript
import { Box, Button, IconButton, Typography } from "@mui/material";
|
|
import React from "react";
|
|
import PhoneIcon from "@mui/icons-material/Phone";
|
|
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 { selectManager, selectMe } from "../../../../redux/slices/usersSlice";
|
|
import axios from "../../../../api/axios";
|
|
import NewMeeting from "../../../../api-bodies/NewMeeting";
|
|
|
|
interface Props {
|
|
contactInfo: UserLite;
|
|
}
|
|
|
|
const UpperBody: React.FC<Props> = ({ contactInfo }) => {
|
|
const dispatch = useAppDispatch();
|
|
const userStatus: UserStatus = useAppSelector((state) =>
|
|
selectUserStatus(state, contactInfo.uuid)
|
|
);
|
|
const me = useAppSelector(selectMe);
|
|
const favoritesUuids = useAppSelector(selectFavorites);
|
|
const detailedMeeting = useAppSelector((state) =>
|
|
selectMeeting(state, userStatus.inMeeting ? userStatus.meetingId : null)
|
|
);
|
|
const managerId = useAppSelector(selectManager);
|
|
const meetingStatus: MeetingStatus =
|
|
managerId === contactInfo.uuid
|
|
? MeetingStatus.NOT_AVAILABLE
|
|
: userStatus && userStatus.inMeeting
|
|
? MeetingStatus.IN_MEETING
|
|
: MeetingStatus.NOT_IN_MEETING;
|
|
|
|
const startCall = async () => {
|
|
const newMeeting: NewMeeting = {
|
|
startTime: "2022-03-30T23:40:00Z",
|
|
duration: 30,
|
|
topic: `Meeting with ${contactInfo.name}`,
|
|
registrantIds: [contactInfo.uuid],
|
|
};
|
|
try {
|
|
const response = await axios.post(
|
|
`/users/${me}/meetings`,
|
|
JSON.stringify(newMeeting)
|
|
);
|
|
window.open(response.data.joinUrl, "_blank")?.focus();
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
};
|
|
|
|
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={{ mt: 2 }} variant="h3">{contactInfo.name}</Typography>
|
|
{!favoritesUuids.includes(contactInfo.uuid) ? (
|
|
<Button
|
|
variant="contained"
|
|
color="success"
|
|
startIcon={<AddIcon />}
|
|
onClick={() =>
|
|
dispatch(addFavorite({ userId: me, toBeAdded: contactInfo.uuid }))
|
|
}
|
|
>
|
|
favorites
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
startIcon={<RemoveIcon />}
|
|
onClick={() =>
|
|
dispatch(
|
|
removeFavorite({
|
|
userId: me,
|
|
toBeRemoved: 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"
|
|
onClick={startCall}
|
|
>
|
|
<PhoneIcon 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;
|