Merge pull request #59 from CPSC319-Winter-term-2/mbalsdon-add-favs-notif

popup when someone adds favourite from sidebar
This commit is contained in:
Mathew Balsdon 2022-03-30 01:57:23 -07:00 committed by GitHub
commit 8c51821f6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,5 @@
import { Settings } from "@mui/icons-material";
import { IconButton, Menu, MenuItem } from "@mui/material";
import { Alert, IconButton, Menu, MenuItem, Snackbar } from "@mui/material";
import { useState } from "react";
import UserLite from "../../api-bodies/UserLite";
import UserStatus from "../../api-bodies/UserStatus";
@ -22,6 +22,7 @@ interface Props {
const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
const navigate = useNavigate();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const me = useAppSelector(selectMe);
const favoritesUuids = useAppSelector(selectFavorites);
const meeting = useAppSelector((state) =>
@ -35,6 +36,12 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
const handleClose = () => {
setAnchorEl(null);
};
const handleSnackbarClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
if (reason === "clickaway") {
return;
}
setSnackbarOpen(false);
};
return (
<div>
@ -66,12 +73,14 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
) : (
<MenuItem
onClick={() => {
setSnackbarOpen(true);
handleClose();
dispatch(addFavorite({ userId: me, toBeAdded: user.uuid }));
}}
>
Add to Favorites
</MenuItem>
)}
{status.inMeeting ? (
<MenuItem
@ -93,6 +102,13 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
</MenuItem>
<MenuItem onClick={handleClose}>Create meeting</MenuItem>
</Menu>
<Snackbar
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
open={snackbarOpen} autoHideDuration={3000} onClose={handleSnackbarClose}>
<Alert onClose={handleSnackbarClose} severity="success" sx={{ width: "100%" }}>
User successfully added to favourites list!
</Alert>
</Snackbar>
</div>
);
};