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

@ -37,11 +37,15 @@ class Api {
message: message, message: message,
...options ...options
}; };
await fetch(baseUrl, { const response = await fetch(baseUrl, {
method: 'PUT', method: 'PUT',
body: JSON.stringify(body), body: JSON.stringify(body),
headers: maybeWithBasicAuth(headers, user) headers: maybeWithBasicAuth(headers, user)
}); });
if (response.status < 200 || response.status > 299) {
throw new Error(`Unexpected response: ${response.status}`);
}
return response;
} }
/** /**

View file

@ -105,7 +105,7 @@ const SettingsIcons = (props) => {
} }
}; };
const handleSendTestMessage = () => { const handleSendTestMessage = async () => {
const baseUrl = props.subscription.baseUrl; const baseUrl = props.subscription.baseUrl;
const topic = props.subscription.topic; const topic = props.subscription.topic;
const tags = shuffle([ const tags = shuffle([
@ -135,11 +135,15 @@ const SettingsIcons = (props) => {
`I'm really excited that you're trying out ntfy. Did you know that there are a few public topics, such as ntfy.sh/stats and ntfy.sh/announcements.`, `I'm really excited that you're trying out ntfy. Did you know that there are a few public topics, such as ntfy.sh/stats and ntfy.sh/announcements.`,
`It's interesting to hear what people use ntfy for. I've heard people talk about using it for so many cool things. What do you use it for?` `It's interesting to hear what people use ntfy for. I've heard people talk about using it for so many cool things. What do you use it for?`
])[0]; ])[0];
api.publish(baseUrl, topic, message, { try {
title: title, await api.publish(baseUrl, topic, message, {
priority: priority, title: title,
tags: tags priority: priority,
}); tags: tags
});
} catch (e) {
console.log(`[ActionBar] Error publishing message`, e);
}
setOpen(false); setOpen(false);
} }

View file

@ -10,6 +10,7 @@ import api from "../app/Api";
import SendDialog from "./SendDialog"; import SendDialog from "./SendDialog";
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import EmojiPicker from "./EmojiPicker"; import EmojiPicker from "./EmojiPicker";
import {Portal, Snackbar} from "@mui/material";
const Messaging = (props) => { const Messaging = (props) => {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
@ -51,8 +52,14 @@ const Messaging = (props) => {
const MessageBar = (props) => { const MessageBar = (props) => {
const subscription = props.subscription; const subscription = props.subscription;
const handleSendClick = () => { const [snackOpen, setSnackOpen] = useState(false);
api.publish(subscription.baseUrl, subscription.topic, props.message); // FIXME 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(""); props.onMessageChange("");
}; };
return ( return (
@ -64,7 +71,7 @@ const MessageBar = (props) => {
bottom: 0, bottom: 0,
right: 0, right: 0,
padding: 2, 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] 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}> <IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
<SendIcon/> <SendIcon/>
</IconButton> </IconButton>
<Portal>
<Snackbar
open={snackOpen}
autoHideDuration={3000}
onClose={() => setSnackOpen(false)}
message="Error publishing message"
/>
</Portal>
</Paper> </Paper>
); );
}; };

View file

@ -57,7 +57,7 @@ const AllSubscriptions = (props) => {
} else if (notifications.length === 0) { } else if (notifications.length === 0) {
return <NoNotificationsWithoutSubscription subscriptions={subscriptions}/>; return <NoNotificationsWithoutSubscription subscriptions={subscriptions}/>;
} }
return <NotificationList key="all" notifications={notifications}/>; return <NotificationList key="all" notifications={notifications} messageBar={false}/>;
} }
const SingleSubscription = (props) => { const SingleSubscription = (props) => {
@ -68,7 +68,7 @@ const SingleSubscription = (props) => {
} else if (notifications.length === 0) { } else if (notifications.length === 0) {
return <NoNotifications subscription={subscription}/>; return <NoNotifications subscription={subscription}/>;
} }
return <NotificationList id={subscription.id} notifications={notifications}/>; return <NotificationList id={subscription.id} notifications={notifications} messageBar={true}/>;
} }
const NotificationList = (props) => { const NotificationList = (props) => {
@ -94,7 +94,13 @@ const NotificationList = (props) => {
scrollThreshold={0.7} scrollThreshold={0.7}
scrollableTarget="main" scrollableTarget="main"
> >
<Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}> <Container
maxWidth="md"
sx={{
marginTop: 3,
marginBottom: (props.messageBar) ? "100px" : 3 // Hack to avoid hiding notifications behind the message bar
}}
>
<Stack spacing={3}> <Stack spacing={3}>
{notifications.slice(0, count).map(notification => {notifications.slice(0, count).map(notification =>
<NotificationItem <NotificationItem