Emoji picker

web/src/components/App.js

@@ -14,19 +14,13 @@ import {useLiveQuery} from "dexie-react-hooks";
 import subscriptionManager from "../app/SubscriptionManager";
 import userManager from "../app/UserManager";
 import {BrowserRouter, Outlet, Route, Routes, useOutletContext, useParams} from "react-router-dom";
-import {expandUrl, topicUrl} from "../app/utils";
+import {expandUrl} from "../app/utils";
 import ErrorBoundary from "./ErrorBoundary";
 import routes from "./routes";
 import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "./hooks";
-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";
-import api from "../app/Api";
 import SendDialog from "./SendDialog";
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import Messaging from "./Messaging";
 
-// TODO add drag and drop
 // TODO races when two tabs are open
 // TODO investigate service workers
 
@@ -128,89 +122,6 @@ const Main = (props) => {
     );
 };
 
-const Messaging = (props) => {
-    const [message, setMessage] = useState("");
-    const [dialogKey, setDialogKey] = useState(0);
-
-    const dialogOpenMode = props.dialogOpenMode;
-    const subscription = props.selected;
-    const selectedTopicUrl = (subscription) ? topicUrl(subscription.baseUrl, subscription.topic) : "";
-
-    const handleOpenDialogClick = () => {
-        props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT);
-    };
-
-    const handleSendDialogClose = () => {
-        props.onDialogOpenModeChange("");
-        setDialogKey(prev => prev+1);
-    };
-
-    return (
-        <>
-            {subscription && <MessageBar
-                subscription={subscription}
-                message={message}
-                onMessageChange={setMessage}
-                onOpenDialogClick={handleOpenDialogClick}
-            />}
-            <SendDialog
-                key={`sendDialog${dialogKey}`} // Resets dialog when canceled/closed
-                openMode={dialogOpenMode}
-                topicUrl={selectedTopicUrl}
-                message={message}
-                onClose={handleSendDialogClose}
-                onDragEnter={() => props.onDialogOpenModeChange(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG)} // Only update if not already open
-                onResetOpenMode={() => props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT)}
-            />
-        </>
-    );
-}
-
-const MessageBar = (props) => {
-    const subscription = props.subscription;
-    const handleSendClick = () => {
-        api.publish(subscription.baseUrl, subscription.topic, props.message); // FIXME
-        props.onMessageChange("");
-    };
-    return (
-        <Paper
-            elevation={3}
-            sx={{
-                display: "flex",
-                position: 'fixed',
-                bottom: 0,
-                right: 0,
-                padding: 2,
-                width: `calc(100% - ${Navigation.width}px)`,
-                backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
-            }}
-        >
-            <IconButton color="inherit" size="large" edge="start" onClick={props.onOpenDialogClick}>
-                <KeyboardArrowUpIcon/>
-            </IconButton>
-            <TextField
-                autoFocus
-                margin="dense"
-                placeholder="Message"
-                type="text"
-                fullWidth
-                variant="standard"
-                value={props.message}
-                onChange={ev => props.onMessageChange(ev.target.value)}
-                onKeyPress={(ev) => {
-                    if (ev.key === 'Enter') {
-                        ev.preventDefault();
-                        handleSendClick();
-                    }
-                }}
-            />
-            <IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
-                <SendIcon/>
-            </IconButton>
-        </Paper>
-    );
-};
-
 const updateTitle = (newNotificationsCount) => {
     document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
 }