brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added chat drawer

Browse source
This commit is contained in:
Carter 2024-12-04 10:41:46 -06:00
parent 7c3b0a3ab0
commit 1a9ee12533
7 changed files with 196 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

130
src/chat/ChatMessage.tsx
View file

@ -7,12 +7,11 @@ import {
DialogContent,
DialogTitle,
Grid2 as Grid,
List,
ListItem,
ListItemButton,
IconButton,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
Theme,
Typography
} from "@mui/material";
@ -39,21 +38,26 @@ interface Props {
attachments?: pond.FileReference[];
removeNoteMethod: (index: number) => void;
}
const useStyles = makeStyles((_theme: Theme) => ({
const useStyles = makeStyles((theme: Theme) => ({
red: {
color: red["500"]
},
oddGrid: {
backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)",
backgroundColor: theme.palette.background.paper,
padding: 4
},
evenGrid: {
backgroundColor: getThemeType() === "light" ? "rgb(235, 235, 235)" : "rgb(60, 60, 60)",
backgroundColor: theme.palette.background.default,
padding: 4
},
textContainer: {
padding: theme.spacing(1),
},
userAvatar: {
width: 36,
height: 36
height: 36,
marginLeft: theme.spacing(1),
marginRight: theme.spacing(2),
}
}))
@ -83,14 +87,14 @@ export default function ChatMessage(props: Props) {
.then(resp => {
setPermissions(resp.permissions);
})
.catch(err => {});
.catch(_err => {});
userAPI
.getProfile(props.note.settings.userId)
.then(resp => {
setName(resp.name);
setAvatar(resp.avatar);
})
.catch(err => {});
.catch(_err => {});
}, [props.note, userAPI, user]);
useEffect(() => {
@ -101,11 +105,11 @@ export default function ChatMessage(props: Props) {
setAnchorEl(null);
noteAPI
.removeNote(props.note.key())
.then(resp => {
.then(_resp => {
openSnack("Message Deleted");
props.removeNoteMethod(props.index);
})
.catch(err => {
.catch(_err => {
openSnack("Failed to delete Message");
});
closeDialog();
@ -174,27 +178,14 @@ export default function ChatMessage(props: Props) {
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
keepMounted>
<List>
<ListItemButton onClick={openDialog}>
<ListItemIcon>
<DeleteIcon className={classes.red} />
</ListItemIcon>
<ListItemText>Delete Message</ListItemText>
</ListItemButton>
{/* {props.attachments && props.attachments.length > 0 && (
<ListItem
button
onClick={() => {
setFileListOpen(true);
}}>
<ListItemIcon>
<Visibility />
</ListItemIcon>
<ListItemText>View Attachments</ListItemText>
</ListItem>
)} */}
</List>
keepMounted
>
<MenuItem dense onClick={openDialog}>
<ListItemIcon>
<DeleteIcon className={classes.red} />
</ListItemIcon>
<ListItemText>Delete Message</ListItemText>
</MenuItem>
</Menu>
);
};
@ -226,58 +217,47 @@ export default function ChatMessage(props: Props) {
alignItems="center"
className={props.index % 2 === 0 ? classes.oddGrid : classes.evenGrid}>
<Grid>
<Box marginLeft="5px">
{/* avatar */}
{avatar ? (
<Avatar alt={name} src={avatar} className={classes.userAvatar}>
{!avatar && name}
</Avatar>
) : (
<Avatar alt={name} className={classes.userAvatar}>
<Person />
</Avatar>
)}
</Box>
{avatar ? (
<Avatar alt={name} src={avatar} className={classes.userAvatar}>
{!avatar && name}
</Avatar>
) : (
<Avatar alt={name} className={classes.userAvatar}>
<Person />
</Avatar>
)}
</Grid>
<Grid size={{ xs: 12 }}>
<Box marginLeft="5px">
<Grid container direction="column" style={{ margin: "5px" }}>
<Grid>
<Grid container direction="row">
<Grid>
<Typography variant="subtitle2" color="textPrimary">
{name}
</Typography>
</Grid>
<Box marginRight={1} marginLeft={1}>
<Grid>
<Typography variant="caption" color="textSecondary">
{moment(props.note.date())
.tz(user.settings.timezone)
.format("MMMM Do YYYY, h:mm:ss a")}
</Typography>
</Grid>
</Box>
</Grid>
</Grid>
<Grid>
<Typography style={{ whiteSpace: "pre-wrap" }} variant="caption">
{props.note.content()}
</Typography>
{/*load files and display attached images below the message */}
</Grid>
<Grid container direction="column" justifyContent="space-between" size={{ xs:10 }} >
<Grid container direction="row" alignContent={"center"} spacing={1} >
<Grid>
<Typography color="textPrimary">
{name}
</Typography>
</Grid>
</Box>
<Grid justifyContent={"center"}>
<Typography variant="caption" color="textSecondary">
{moment(props.note.date())
.tz(user.settings.timezone)
.format("MMMM Do YYYY, h:mm:ss a")}
</Typography>
</Grid>
</Grid>
<Grid>
<Typography variant="body2">
{props.note.content()}
</Typography>
{/*load files and display attached images below the message */}
</Grid>
</Grid>
<Grid>
<Grid padding={1}>
{/* delete button */}
{permissions.includes(pond.Permission.PERMISSION_WRITE) && (
<Button
<IconButton
onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
setAnchorEl(event.currentTarget)
}>
<MoreVert />
</Button>
</IconButton>
)}
</Grid>
</Grid>