-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Generate share url * Add document sharing * Add permission checking to note page * Fix lint
- Loading branch information
Showing
15 changed files
with
319 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { IconButton } from "@mui/material"; | ||
| import ShareIcon from "@mui/icons-material/Share"; | ||
| import ShareModal from "../modals/ShareModal"; | ||
| import { useState } from "react"; | ||
|
|
||
| function ShareButton() { | ||
| const [shareModalOpen, setShareModalOpen] = useState(false); | ||
|
|
||
| const handleShareModalOpen = () => { | ||
| setShareModalOpen((prev) => !prev); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <IconButton onClick={handleShareModalOpen} color="inherit"> | ||
| <ShareIcon /> | ||
| </IconButton> | ||
| <ShareModal open={shareModalOpen} onClose={handleShareModalOpen} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default ShareButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import { | ||
| Button, | ||
| FormControl, | ||
| IconButton, | ||
| Modal, | ||
| ModalProps, | ||
| Paper, | ||
| Stack, | ||
| Tooltip, | ||
| Typography, | ||
| } from "@mui/material"; | ||
| import { FormContainer, SelectElement } from "react-hook-form-mui"; | ||
| import { invitationExpiredStringList } from "../../utils/expire"; | ||
| import { useState } from "react"; | ||
| import moment, { unitOfTime } from "moment"; | ||
| import { useParams } from "react-router"; | ||
| import { useGetDocumentQuery } from "../../hooks/api/document"; | ||
| import { useCreateWorkspaceSharingTokenMutation } from "../../hooks/api/workspaceDocument"; | ||
| import { ShareRole } from "../../utils/share"; | ||
| import clipboard from "clipboardy"; | ||
| import { useSnackbar } from "notistack"; | ||
| import ContentCopyIcon from "@mui/icons-material/ContentCopy"; | ||
| import CloseIcon from "@mui/icons-material/Close"; | ||
| import { useSearchParams } from "react-router-dom"; | ||
|
|
||
| interface ShareModalProps extends Omit<ModalProps, "children"> {} | ||
|
|
||
| function ShareModal(props: ShareModalProps) { | ||
| const { ...modalProps } = props; | ||
| const params = useParams(); | ||
| const [searchParams] = useSearchParams(); | ||
| const [shareUrl, setShareUrl] = useState<string | null>(null); | ||
| const { data: document } = useGetDocumentQuery( | ||
| searchParams.get("token") ? null : params.documentSlug | ||
| ); | ||
| const { mutateAsync: createWorkspaceSharingToken } = useCreateWorkspaceSharingTokenMutation( | ||
| document?.workspaceId || "", | ||
| document?.id || "" | ||
| ); | ||
| const { enqueueSnackbar } = useSnackbar(); | ||
|
|
||
| const handleCreateShareUrl = async (data: { expiredString: string; role: ShareRole }) => { | ||
| let addedTime: Date | null; | ||
|
|
||
| if (data.expiredString === invitationExpiredStringList[0]) { | ||
| addedTime = null; | ||
| } else { | ||
| const [num, unit] = data.expiredString.split(" "); | ||
| addedTime = moment() | ||
| .add(Number(num), unit as unitOfTime.DurationConstructor) | ||
| .toDate(); | ||
| } | ||
|
|
||
| const { sharingToken } = await createWorkspaceSharingToken({ | ||
| role: data.role, | ||
| expiredAt: addedTime, | ||
| }); | ||
|
|
||
| setShareUrl( | ||
| `${window.location.origin}/document/${params.documentSlug}?token=${sharingToken}` | ||
| ); | ||
| }; | ||
|
|
||
| const handleCopyShareUrl = async () => { | ||
| if (!shareUrl) return; | ||
|
|
||
| await clipboard.write(shareUrl); | ||
| enqueueSnackbar("URL Copied!", { variant: "success" }); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal disableAutoFocus {...modalProps}> | ||
| <Paper | ||
| sx={{ | ||
| position: "absolute", | ||
| top: "50%", | ||
| left: "50%", | ||
| transform: "translate(-50%, -50%)", | ||
| p: 4, | ||
| width: 400, | ||
| }} | ||
| > | ||
| <IconButton | ||
| sx={{ | ||
| position: "absolute", | ||
| top: 28, | ||
| right: 28, | ||
| }} | ||
| onClick={(e) => props.onClose?.(e, "backdropClick")} | ||
| > | ||
| <CloseIcon /> | ||
| </IconButton> | ||
| <Stack gap={1}> | ||
| <Typography variant="subtitle1">Share Link</Typography> | ||
| <FormControl> | ||
| <FormContainer | ||
| defaultValues={{ | ||
| expiredString: invitationExpiredStringList[0], | ||
| role: Object.values(ShareRole)[0], | ||
| }} | ||
| onSuccess={handleCreateShareUrl} | ||
| > | ||
| <Stack gap={2}> | ||
| <SelectElement | ||
| label="Role" | ||
| name="role" | ||
| options={Object.values(ShareRole).map((role) => ({ | ||
| id: role, | ||
| label: role, | ||
| }))} | ||
| size="small" | ||
| sx={{ | ||
| width: 1, | ||
| }} | ||
| variant="filled" | ||
| /> | ||
| <SelectElement | ||
| label="Expired Date" | ||
| name="expiredString" | ||
| options={invitationExpiredStringList.map((expiredString) => ({ | ||
| id: expiredString, | ||
| label: expiredString, | ||
| }))} | ||
| size="small" | ||
| sx={{ | ||
| width: 1, | ||
| }} | ||
| variant="filled" | ||
| /> | ||
| <Button type="submit" variant="contained"> | ||
| Generate | ||
| </Button> | ||
| </Stack> | ||
| </FormContainer> | ||
| </FormControl> | ||
| {Boolean(shareUrl) && ( | ||
| <Stack direction="row" alignItems="center" gap={2}> | ||
| <Typography variant="body1">{shareUrl}</Typography> | ||
| <Tooltip title="Copy URL"> | ||
| <IconButton onClick={handleCopyShareUrl}> | ||
| <ContentCopyIcon /> | ||
| </IconButton> | ||
| </Tooltip> | ||
| </Stack> | ||
| )} | ||
| </Stack> | ||
| </Paper> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| export default ShareModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.