ntfy/web/src/components/Messaging.jsx

112 lines
3.6 KiB
React
Raw Normal View History

2023-05-23 21:13:01 +02:00
import * as React from "react";
import { useState } from "react";
2022-04-04 16:04:01 +02:00
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import TextField from "@mui/material/TextField";
import SendIcon from "@mui/icons-material/Send";
2023-05-23 21:13:01 +02:00
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { Portal, Snackbar } from "@mui/material";
import { useTranslation } from "react-i18next";
2023-05-24 09:03:28 +02:00
import PublishDialog from "./PublishDialog";
import api from "../app/Api";
import Navigation from "./Navigation";
2022-04-04 16:04:01 +02:00
const Messaging = (props) => {
2023-05-23 21:13:01 +02:00
const [message, setMessage] = useState("");
const [dialogKey, setDialogKey] = useState(0);
2022-04-04 16:04:01 +02:00
2023-05-24 09:03:28 +02:00
const { dialogOpenMode } = props;
2023-05-23 21:13:01 +02:00
const subscription = props.selected;
2022-04-04 16:04:01 +02:00
2023-05-23 21:13:01 +02:00
const handleOpenDialogClick = () => {
props.onDialogOpenModeChange(PublishDialog.OPEN_MODE_DEFAULT);
};
2022-04-04 16:04:01 +02:00
2023-05-23 21:13:01 +02:00
const handleDialogClose = () => {
props.onDialogOpenModeChange("");
setDialogKey((prev) => prev + 1);
};
2022-04-04 16:04:01 +02:00
2023-05-23 21:13:01 +02:00
return (
<>
2023-05-24 02:16:29 +02:00
{subscription && (
<MessageBar subscription={subscription} message={message} onMessageChange={setMessage} onOpenDialogClick={handleOpenDialogClick} />
)}
2023-05-23 21:13:01 +02:00
<PublishDialog
key={`publishDialog${dialogKey}`} // Resets dialog when canceled/closed
openMode={dialogOpenMode}
baseUrl={subscription?.baseUrl ?? config.base_url}
topic={subscription?.topic ?? ""}
message={message}
onClose={handleDialogClose}
2023-05-24 09:03:28 +02:00
onDragEnter={() => props.onDialogOpenModeChange((prev) => prev || PublishDialog.OPEN_MODE_DRAG)} // Only update if not already open
2023-05-24 01:29:47 +02:00
onResetOpenMode={() => props.onDialogOpenModeChange(PublishDialog.OPEN_MODE_DEFAULT)}
2023-05-23 21:13:01 +02:00
/>
</>
);
};
2022-04-04 16:04:01 +02:00
const MessageBar = (props) => {
2023-05-23 21:13:01 +02:00
const { t } = useTranslation();
2023-05-24 09:03:28 +02:00
const { subscription } = props;
2023-05-23 21:13:01 +02:00
const [snackOpen, setSnackOpen] = useState(false);
const handleSendClick = async () => {
try {
2023-05-24 01:29:47 +02:00
await api.publish(subscription.baseUrl, subscription.topic, props.message);
2023-05-23 21:13:01 +02:00
} catch (e) {
console.log(`[MessageBar] Error publishing message`, e);
setSnackOpen(true);
}
props.onMessageChange("");
};
return (
<Paper
elevation={3}
sx={{
display: "flex",
position: "fixed",
bottom: 0,
right: 0,
padding: 2,
width: { xs: "100%", sm: `calc(100% - ${Navigation.width}px)` },
2023-05-24 01:29:47 +02:00
backgroundColor: (theme) => (theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900]),
2023-05-23 21:13:01 +02:00
}}
>
2023-05-24 01:29:47 +02:00
<IconButton color="inherit" size="large" edge="start" onClick={props.onOpenDialogClick} aria-label={t("message_bar_show_dialog")}>
2023-05-23 21:13:01 +02:00
<KeyboardArrowUpIcon />
</IconButton>
<TextField
autoFocus
margin="dense"
placeholder={t("message_bar_type_message")}
aria-label={t("message_bar_type_message")}
role="textbox"
type="text"
fullWidth
variant="standard"
value={props.message}
onChange={(ev) => props.onMessageChange(ev.target.value)}
onKeyPress={(ev) => {
if (ev.key === "Enter") {
ev.preventDefault();
handleSendClick();
}
}}
/>
2023-05-24 01:29:47 +02:00
<IconButton color="inherit" size="large" edge="end" onClick={handleSendClick} aria-label={t("message_bar_publish")}>
2023-05-23 21:13:01 +02:00
<SendIcon />
</IconButton>
<Portal>
2023-05-24 02:16:29 +02:00
<Snackbar
open={snackOpen}
autoHideDuration={3000}
onClose={() => setSnackOpen(false)}
message={t("message_bar_error_publishing")}
/>
2023-05-23 21:13:01 +02:00
</Portal>
</Paper>
);
2022-04-04 16:04:01 +02:00
};
export default Messaging;