Do not hide notification behind message bar

This commit is contained in:
Philipp Heckel 2022-04-05 22:57:57 -04:00
parent 2cd7839da3
commit 4a5f34801a
4 changed files with 42 additions and 13 deletions

View file

@ -10,6 +10,7 @@ import api from "../app/Api";
import SendDialog from "./SendDialog";
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import EmojiPicker from "./EmojiPicker";
import {Portal, Snackbar} from "@mui/material";
const Messaging = (props) => {
const [message, setMessage] = useState("");
@ -51,8 +52,14 @@ const Messaging = (props) => {
const MessageBar = (props) => {
const subscription = props.subscription;
const handleSendClick = () => {
api.publish(subscription.baseUrl, subscription.topic, props.message); // FIXME
const [snackOpen, setSnackOpen] = useState(false);
const handleSendClick = async () => {
try {
await api.publish(subscription.baseUrl, subscription.topic, props.message);
} catch (e) {
console.log(`[MessageBar] Error publishing message`, e);
setSnackOpen(true);
}
props.onMessageChange("");
};
return (
@ -64,7 +71,7 @@ const MessageBar = (props) => {
bottom: 0,
right: 0,
padding: 2,
width: `calc(100% - ${Navigation.width}px)`,
width: { xs: "100%", sm: `calc(100% - ${Navigation.width}px)` },
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
}}
>
@ -90,6 +97,14 @@ const MessageBar = (props) => {
<IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
<SendIcon/>
</IconButton>
<Portal>
<Snackbar
open={snackOpen}
autoHideDuration={3000}
onClose={() => setSnackOpen(false)}
message="Error publishing message"
/>
</Portal>
</Paper>
);
};