43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
|
|
import React from "react";
|
|
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
|
|
import CircleIcon from "@mui/icons-material/Circle";
|
|
import { returnStatusColor } from "../../Utils";
|
|
import UserLite from "../../../../api-bodies/UserLite";
|
|
import Status from "../../Status";
|
|
import { useAppSelector } from "../../../../redux/hooks";
|
|
import { selectUserStatus } from "../../../../redux/slices/meetingsAndUserStatusSlice";
|
|
import UserStatus from "../../../../api-bodies/UserStatus";
|
|
|
|
interface Props {
|
|
contactInfo: UserLite;
|
|
setContactSelected: (contactInfo: UserLite) => void;
|
|
}
|
|
|
|
const ContactItem: React.FC<Props> = (props) => {
|
|
const userStatus: UserStatus | null = useAppSelector((state) =>
|
|
selectUserStatus(state, props.contactInfo.uuid)
|
|
);
|
|
const status: Status =
|
|
userStatus && userStatus.inMeeting ? Status.Online : Status.Offline;
|
|
return (
|
|
<ListItemButton
|
|
onClick={() => {
|
|
props.setContactSelected(props.contactInfo);
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<PersonOutlineIcon />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={props.contactInfo.name}
|
|
secondary={status}
|
|
sx={{ flexGrow: 1 }}
|
|
/>
|
|
<CircleIcon color={returnStatusColor(status)} />
|
|
</ListItemButton>
|
|
);
|
|
};
|
|
|
|
export default ContactItem;
|