Publish message button

This commit is contained in:
Philipp Heckel 2022-04-03 22:58:44 -04:00
parent 7716b1e81e
commit 6f07944442
3 changed files with 15 additions and 9 deletions

View file

@ -65,6 +65,7 @@ const Layout = () => {
const params = useParams();
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
const [notificationsGranted, setNotificationsGranted] = useState(notifier.granted());
const [sendDialogOpenMode, setSendDialogOpenMode] = useState("");
const users = useLiveQuery(() => userManager.all());
const subscriptions = useLiveQuery(() => subscriptionManager.all());
const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0;
@ -91,12 +92,17 @@ const Layout = () => {
mobileDrawerOpen={mobileDrawerOpen}
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
onNotificationGranted={setNotificationsGranted}
onPublishMessageClick={() => setSendDialogOpenMode(SendDialog.OPEN_MODE_DEFAULT)}
/>
<Main>
<Toolbar/>
<Outlet context={{ subscriptions, selected }}/>
</Main>
<Messaging selected={selected}/>
<Messaging
selected={selected}
dialogOpenMode={sendDialogOpenMode}
onDialogOpenModeChange={setSendDialogOpenMode}
/>
</Box>
);
}
@ -125,17 +131,17 @@ const Main = (props) => {
const Messaging = (props) => {
const [message, setMessage] = useState("");
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpenMode, setDialogOpenMode] = useState("");
const dialogOpenMode = props.dialogOpenMode;
const subscription = props.selected;
const selectedTopicUrl = (subscription) ? topicUrl(subscription.baseUrl, subscription.topic) : "";
const handleOpenDialogClick = () => {
setDialogOpenMode(SendDialog.OPEN_MODE_DEFAULT);
props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT);
};
const handleSendDialogClose = () => {
setDialogOpenMode("");
props.onDialogOpenModeChange("");
setDialogKey(prev => prev+1);
};
@ -153,8 +159,8 @@ const Messaging = (props) => {
topicUrl={selectedTopicUrl}
message={message}
onClose={handleSendDialogClose}
onDragEnter={() => setDialogOpenMode(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG)} // Only update if not already open
onResetOpenMode={() => setDialogOpenMode(SendDialog.OPEN_MODE_DEFAULT)}
onDragEnter={() => props.onDialogOpenModeChange(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG)} // Only update if not already open
onResetOpenMode={() => props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT)}
/>
</>
);

View file

@ -118,7 +118,7 @@ const NavList = (props) => {
<ListItemIcon><ArticleIcon/></ListItemIcon>
<ListItemText primary="Documentation"/>
</ListItemButton>
<ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
<ListItemButton onClick={() => props.onPublishMessageClick()}>
<ListItemIcon><Send/></ListItemIcon>
<ListItemText primary="Publish message"/>
</ListItemButton>

View file

@ -150,11 +150,11 @@ const SendDialog = (props) => {
const fileSizeLimitReached = fileSizeLimit > 0 && file.size > fileSizeLimit;
const quotaReached = remainingBytes > 0 && file.size > remainingBytes;
if (fileSizeLimitReached && quotaReached) {
return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} file limit, quota reached: ${formatBytes(remainingBytes)} remaining`);
return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} file limit, and quota reached, ${formatBytes(remainingBytes)} remaining`);
} else if (fileSizeLimitReached) {
return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} file limit`);
} else if (quotaReached) {
return setAttachFileError(`quota reached, only ${formatBytes(remainingBytes)} remaining`);
return setAttachFileError(`quota reached, ${formatBytes(remainingBytes)} remaining`);
}
setAttachFileError("");
} catch (e) {