import * as React from "react"; import { useContext, useEffect, useRef, useState } from "react"; import { Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, Tooltip, useMediaQuery } from "@mui/material"; import TextField from "@mui/material/TextField"; import Dialog from "@mui/material/Dialog"; import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import IconButton from "@mui/material/IconButton"; import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon"; import { Close } from "@mui/icons-material"; import MenuItem from "@mui/material/MenuItem"; import Box from "@mui/material/Box"; import { Trans, useTranslation } from "react-i18next"; import priority1 from "../img/priority-1.svg"; import priority2 from "../img/priority-2.svg"; import priority3 from "../img/priority-3.svg"; import priority4 from "../img/priority-4.svg"; import priority5 from "../img/priority-5.svg"; import { formatBytes, maybeWithAuth, topicShortUrl, topicUrl, validTopic, validUrl } from "../app/utils"; import AttachmentIcon from "./AttachmentIcon"; import DialogFooter from "./DialogFooter"; import api from "../app/Api"; import userManager from "../app/UserManager"; import EmojiPicker from "./EmojiPicker"; import theme from "./theme"; import session from "../app/Session"; import routes from "./routes"; import accountApi from "../app/AccountApi"; import { UnauthorizedError } from "../app/errors"; import { AccountContext } from "./App"; const PublishDialog = (props) => { const { t } = useTranslation(); const { account } = useContext(AccountContext); const [baseUrl, setBaseUrl] = useState(""); const [topic, setTopic] = useState(""); const [message, setMessage] = useState(""); const [messageFocused, setMessageFocused] = useState(true); const [title, setTitle] = useState(""); const [tags, setTags] = useState(""); const [priority, setPriority] = useState(3); const [clickUrl, setClickUrl] = useState(""); const [attachUrl, setAttachUrl] = useState(""); const [attachFile, setAttachFile] = useState(null); const [filename, setFilename] = useState(""); const [filenameEdited, setFilenameEdited] = useState(false); const [email, setEmail] = useState(""); const [call, setCall] = useState(""); const [delay, setDelay] = useState(""); const [publishAnother, setPublishAnother] = useState(false); const [showTopicUrl, setShowTopicUrl] = useState(""); const [showClickUrl, setShowClickUrl] = useState(false); const [showAttachUrl, setShowAttachUrl] = useState(false); const [showEmail, setShowEmail] = useState(false); const [showCall, setShowCall] = useState(false); const [showDelay, setShowDelay] = useState(false); const showAttachFile = !!attachFile && !showAttachUrl; const attachFileInput = useRef(); const [attachFileError, setAttachFileError] = useState(""); const [activeRequest, setActiveRequest] = useState(null); const [status, setStatus] = useState(""); const disabled = !!activeRequest; const [emojiPickerAnchorEl, setEmojiPickerAnchorEl] = useState(null); const [dropZone, setDropZone] = useState(false); const [sendButtonEnabled, setSendButtonEnabled] = useState(true); const open = !!props.openMode; const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); useEffect(() => { window.addEventListener("dragenter", () => { props.onDragEnter(); setDropZone(true); }); }, []); useEffect(() => { setBaseUrl(props.baseUrl); setTopic(props.topic); setShowTopicUrl(!props.baseUrl || !props.topic); setMessageFocused(!!props.topic); // Focus message only if topic is set }, [props.baseUrl, props.topic]); useEffect(() => { const valid = validUrl(baseUrl) && validTopic(topic) && !attachFileError; setSendButtonEnabled(valid); }, [baseUrl, topic, attachFileError]); useEffect(() => { setMessage(props.message); }, [props.message]); const updateBaseUrl = (newVal) => { if (validUrl(newVal)) { setBaseUrl(newVal.replace(/\/$/, "")); // strip traililng slash after https?:// } else { setBaseUrl(newVal); } }; const handleSubmit = async () => { const url = new URL(topicUrl(baseUrl, topic)); if (title.trim()) { url.searchParams.append("title", title.trim()); } if (tags.trim()) { url.searchParams.append("tags", tags.trim()); } if (priority && priority !== 3) { url.searchParams.append("priority", priority.toString()); } if (clickUrl.trim()) { url.searchParams.append("click", clickUrl.trim()); } if (attachUrl.trim()) { url.searchParams.append("attach", attachUrl.trim()); } if (filename.trim()) { url.searchParams.append("filename", filename.trim()); } if (email.trim()) { url.searchParams.append("email", email.trim()); } if (call.trim()) { url.searchParams.append("call", call.trim()); } if (delay.trim()) { url.searchParams.append("delay", delay.trim()); } if (attachFile && message.trim()) { url.searchParams.append("message", message.replaceAll("\n", "\\n").trim()); } const body = attachFile || message; try { const user = await userManager.get(baseUrl); const headers = maybeWithAuth({}, user); const progressFn = (ev) => { if (ev.loaded > 0 && ev.total > 0) { setStatus( t("publish_dialog_progress_uploading_detail", { loaded: formatBytes(ev.loaded), total: formatBytes(ev.total), percent: Math.round((ev.loaded * 100.0) / ev.total), }) ); } else { setStatus(t("publish_dialog_progress_uploading")); } }; const request = api.publishXHR(url, body, headers, progressFn); setActiveRequest(request); await request; if (!publishAnother) { props.onClose(); } else { setStatus(t("publish_dialog_message_published")); setActiveRequest(null); } } catch (e) { setStatus({e}); setActiveRequest(null); } }; const checkAttachmentLimits = async (file) => { try { const apiAccount = await accountApi.get(); const fileSizeLimit = apiAccount.limits.attachment_file_size ?? 0; const remainingBytes = apiAccount.stats.attachment_total_size_remaining; const fileSizeLimitReached = fileSizeLimit > 0 && file.size > fileSizeLimit; const quotaReached = remainingBytes > 0 && file.size > remainingBytes; if (fileSizeLimitReached && quotaReached) { setAttachFileError( t("publish_dialog_attachment_limits_file_and_quota_reached", { fileSizeLimit: formatBytes(fileSizeLimit), remainingBytes: formatBytes(remainingBytes), }) ); } else if (fileSizeLimitReached) { setAttachFileError( t("publish_dialog_attachment_limits_file_reached", { fileSizeLimit: formatBytes(fileSizeLimit), }) ); } else if (quotaReached) { setAttachFileError( t("publish_dialog_attachment_limits_quota_reached", { remainingBytes: formatBytes(remainingBytes), }) ); } else { setAttachFileError(""); } } catch (e) { console.log(`[PublishDialog] Retrieving attachment limits failed`, e); if (e instanceof UnauthorizedError) { session.resetAndRedirect(routes.login); } else { setAttachFileError(""); // Reset error (rely on server-side checking) } } }; const handleAttachFileClick = () => { attachFileInput.current.click(); }; const updateAttachFile = async (file) => { setAttachFile(file); setFilename(file.name); props.onResetOpenMode(); await checkAttachmentLimits(file); }; const handleAttachFileChanged = async (ev) => { await updateAttachFile(ev.target.files[0]); }; const handleAttachFileDrop = async (ev) => { ev.preventDefault(); setDropZone(false); await updateAttachFile(ev.dataTransfer.files[0]); }; const handleAttachFileDragLeave = () => { setDropZone(false); if (props.openMode === PublishDialog.OPEN_MODE_DRAG) { props.onClose(); // Only close dialog if it was not open before dragging file in } }; const handleEmojiClick = (ev) => { setEmojiPickerAnchorEl(ev.currentTarget); }; const handleEmojiPick = (emoji) => { setTags((prevTags) => (prevTags.trim() ? `${prevTags.trim()}, ${emoji}` : emoji)); }; const handleEmojiClose = () => { setEmojiPickerAnchorEl(null); }; const priorities = { 1: { label: t("publish_dialog_priority_min"), file: priority1 }, 2: { label: t("publish_dialog_priority_low"), file: priority2 }, 3: { label: t("publish_dialog_priority_default"), file: priority3 }, 4: { label: t("publish_dialog_priority_high"), file: priority4 }, 5: { label: t("publish_dialog_priority_max"), file: priority5 }, }; return ( <> {dropZone && } {baseUrl && topic ? t("publish_dialog_title_topic", { topic: topicShortUrl(baseUrl, topic), }) : t("publish_dialog_title_no_topic")} {dropZone && } {showTopicUrl && ( { setBaseUrl(props.baseUrl); setTopic(props.topic); setShowTopicUrl(false); }} > updateBaseUrl(ev.target.value)} disabled={disabled} type="url" variant="standard" sx={{ flexGrow: 1, marginRight: 1 }} inputProps={{ "aria-label": t("publish_dialog_base_url_label"), }} /> setTopic(ev.target.value)} disabled={disabled} type="text" variant="standard" autoFocus={!messageFocused} sx={{ flexGrow: 1 }} inputProps={{ "aria-label": t("publish_dialog_topic_label"), }} /> )} setTitle(ev.target.value)} disabled={disabled} type="text" fullWidth variant="standard" inputProps={{ "aria-label": t("publish_dialog_title_label"), }} /> setMessage(ev.target.value)} disabled={disabled} type="text" variant="standard" rows={5} autoFocus={messageFocused} fullWidth multiline inputProps={{ "aria-label": t("publish_dialog_message_label"), }} />
setTags(ev.target.value)} disabled={disabled} type="text" variant="standard" sx={{ flexGrow: 1, marginRight: 1 }} inputProps={{ "aria-label": t("publish_dialog_tags_label"), }} />
{showClickUrl && ( { setClickUrl(""); setShowClickUrl(false); }} > setClickUrl(ev.target.value)} disabled={disabled} type="url" fullWidth variant="standard" inputProps={{ "aria-label": t("publish_dialog_click_label"), }} /> )} {showEmail && ( { setEmail(""); setShowEmail(false); }} > setEmail(ev.target.value)} disabled={disabled} type="email" variant="standard" fullWidth inputProps={{ "aria-label": t("publish_dialog_email_label"), }} /> )} {showCall && ( { setCall(""); setShowCall(false); }} > )} {showAttachUrl && ( { setAttachUrl(""); setFilename(""); setFilenameEdited(false); setShowAttachUrl(false); }} > { const url = ev.target.value; setAttachUrl(url); if (!filenameEdited) { try { const u = new URL(url); const parts = u.pathname.split("/"); if (parts.length > 0) { setFilename(parts[parts.length - 1]); } } catch (e) { // Do nothing } } }} disabled={disabled} type="url" variant="standard" sx={{ flexGrow: 5, marginRight: 1 }} inputProps={{ "aria-label": t("publish_dialog_attach_label"), }} /> { setFilename(ev.target.value); setFilenameEdited(true); }} disabled={disabled} type="text" variant="standard" sx={{ flexGrow: 1 }} inputProps={{ "aria-label": t("publish_dialog_filename_label"), }} /> )} {showAttachFile && ( setFilename(f)} onClose={() => { setAttachFile(null); setAttachFileError(""); setFilename(""); }} /> )} {showDelay && ( { setDelay(""); setShowDelay(false); }} > setDelay(ev.target.value)} disabled={disabled} type="text" variant="standard" fullWidth inputProps={{ "aria-label": t("publish_dialog_delay_label"), }} /> )} {t("publish_dialog_other_features")}
{!showClickUrl && ( setShowClickUrl(true)} sx={{ marginRight: 1, marginBottom: 1 }} /> )} {!showEmail && ( setShowEmail(true)} sx={{ marginRight: 1, marginBottom: 1 }} /> )} {account?.phone_numbers?.length > 0 && !showCall && ( { setShowCall(true); setCall(account.phone_numbers[0]); }} sx={{ marginRight: 1, marginBottom: 1 }} /> )} {!showAttachUrl && !showAttachFile && ( setShowAttachUrl(true)} sx={{ marginRight: 1, marginBottom: 1 }} /> )} {!showAttachFile && !showAttachUrl && ( handleAttachFileClick()} sx={{ marginRight: 1, marginBottom: 1 }} /> )} {!showDelay && ( setShowDelay(true)} sx={{ marginRight: 1, marginBottom: 1 }} /> )} {!showTopicUrl && ( setShowTopicUrl(true)} sx={{ marginRight: 1, marginBottom: 1 }} /> )} {account && !account?.phone_numbers && ( )}
, }} />
{activeRequest && } {!activeRequest && ( <> setPublishAnother(ev.target.checked)} inputProps={{ "aria-label": t("publish_dialog_checkbox_publish_another"), }} /> } /> )}
); }; const Row = (props) => (
{props.children}
); const ClosableRow = (props) => { const closable = props.closable !== undefined ? props.closable : true; return ( {props.children} {closable && ( )} ); }; const DialogIconButton = (props) => { const sx = props.sx || {}; return ( {props.children} ); }; const AttachmentBox = (props) => { const { t } = useTranslation(); const { file } = props; return ( <> {t("publish_dialog_attached_file_title")} props.onChangeFilename(ev.target.value)} disabled={props.disabled} />
{formatBytes(file.size)} {props.error && ( {" "} ({props.error}) )}
); }; const ExpandingTextField = (props) => { const invisibleFieldRef = useRef(); const [textWidth, setTextWidth] = useState(props.minWidth); const determineTextWidth = () => { const boundingRect = invisibleFieldRef?.current?.getBoundingClientRect(); if (!boundingRect) { return props.minWidth; } return boundingRect.width >= props.minWidth ? Math.round(boundingRect.width) : props.minWidth; }; useEffect(() => { setTextWidth(determineTextWidth() + 5); }, [props.value]); return ( <> {props.value} ); }; const DropArea = (props) => { const allowDrag = (ev) => { // This is where we could disallow certain files to be dragged in. // For now we allow all files. // eslint-disable-next-line no-param-reassign ev.dataTransfer.dropEffect = "copy"; ev.preventDefault(); }; return ( ); }; const DropBox = () => { const { t } = useTranslation(); return ( {t("publish_dialog_drop_file_here")} ); }; PublishDialog.OPEN_MODE_DEFAULT = "default"; PublishDialog.OPEN_MODE_DRAG = "drag"; export default PublishDialog;