diff --git a/modern/src/common/components/StatusCard.jsx b/modern/src/common/components/StatusCard.jsx index 04e1d172cf..2e93642004 100644 --- a/modern/src/common/components/StatusCard.jsx +++ b/modern/src/common/components/StatusCard.jsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; +import dayjs from 'dayjs'; import Draggable from 'react-draggable'; import { Card, @@ -15,6 +16,7 @@ import { Menu, MenuItem, CardMedia, + Snackbar, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import CloseIcon from '@mui/icons-material/Close'; @@ -130,6 +132,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin const [anchorEl, setAnchorEl] = useState(null); const [removing, setRemoving] = useState(false); + const [shared, setShared] = useState(false); const handleRemove = useCatch(async (removed) => { if (removed) { @@ -169,6 +172,21 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin } }, [navigate, position]); + const handleShare = useCatchCallback(async () => { + const expiration = dayjs().add(1, 'week').toISOString(); + const response = await fetch('/api/devices/share', { + method: 'POST', + body: new URLSearchParams(`deviceId=${deviceId}&expiration=${expiration}`), + }); + if (response.ok) { + const token = await response.text(); + navigator.clipboard.writeText(`${window.location.origin}?token=${token}`); + setShared(true); + } else { + throw Error(await response.text()); + } + }, [deviceId, setShared]); + return ( <>