2022-04-25 15:15:17 +02:00
|
|
|
import {
|
|
|
|
|
ActionIcon,
|
|
|
|
|
Button,
|
2022-10-10 22:14:23 +02:00
|
|
|
Stack,
|
2022-04-25 15:15:17 +02:00
|
|
|
Text,
|
|
|
|
|
TextInput,
|
2022-10-14 11:59:40 +02:00
|
|
|
Title,
|
2022-04-25 15:15:17 +02:00
|
|
|
} from "@mantine/core";
|
|
|
|
|
import { useClipboard } from "@mantine/hooks";
|
|
|
|
|
import { useModals } from "@mantine/modals";
|
|
|
|
|
import { ModalsContextProps } from "@mantine/modals/lib/context";
|
2022-10-09 22:30:32 +02:00
|
|
|
import moment from "moment";
|
2022-10-16 00:08:37 +02:00
|
|
|
import getConfig from "next/config";
|
2022-04-25 15:15:17 +02:00
|
|
|
import { useRouter } from "next/router";
|
2022-10-14 11:59:40 +02:00
|
|
|
import { TbCopy } from "react-icons/tb";
|
2022-10-09 22:30:32 +02:00
|
|
|
import { Share } from "../../types/share.type";
|
2022-05-05 10:24:10 +02:00
|
|
|
import toast from "../../utils/toast.util";
|
2022-10-14 18:14:46 -04:00
|
|
|
|
2022-10-16 00:08:37 +02:00
|
|
|
const { publicRuntimeConfig } = getConfig();
|
2022-04-25 15:15:17 +02:00
|
|
|
|
2022-10-14 11:59:40 +02:00
|
|
|
const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
|
2022-04-25 15:15:17 +02:00
|
|
|
return modals.openModal({
|
|
|
|
|
closeOnClickOutside: false,
|
|
|
|
|
withCloseButton: false,
|
|
|
|
|
closeOnEscape: false,
|
2022-05-06 10:25:10 +02:00
|
|
|
title: (
|
2022-10-10 22:14:23 +02:00
|
|
|
<Stack align="stretch" spacing={0}>
|
2022-05-06 10:25:10 +02:00
|
|
|
<Title order={4}>Share ready</Title>
|
2022-10-10 22:14:23 +02:00
|
|
|
</Stack>
|
2022-05-06 10:25:10 +02:00
|
|
|
),
|
2022-10-09 22:30:32 +02:00
|
|
|
children: <Body share={share} />,
|
2022-04-25 15:15:17 +02:00
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2022-10-09 22:30:32 +02:00
|
|
|
const Body = ({ share }: { share: Share }) => {
|
2022-04-25 15:15:17 +02:00
|
|
|
const clipboard = useClipboard({ timeout: 500 });
|
|
|
|
|
const modals = useModals();
|
|
|
|
|
const router = useRouter();
|
2022-10-09 22:30:32 +02:00
|
|
|
const link = `${window.location.origin}/share/${share.id}`;
|
2022-04-25 15:15:17 +02:00
|
|
|
return (
|
2022-10-14 11:59:40 +02:00
|
|
|
<Stack align="stretch">
|
2022-04-25 15:15:17 +02:00
|
|
|
<TextInput
|
|
|
|
|
variant="filled"
|
|
|
|
|
value={link}
|
|
|
|
|
rightSection={
|
2022-05-05 10:24:10 +02:00
|
|
|
<ActionIcon
|
|
|
|
|
onClick={() => {
|
|
|
|
|
clipboard.copy(link);
|
|
|
|
|
toast.success("Your link was copied to the keyboard.");
|
|
|
|
|
}}
|
|
|
|
|
>
|
2022-10-14 11:59:40 +02:00
|
|
|
<TbCopy />
|
2022-04-25 15:15:17 +02:00
|
|
|
</ActionIcon>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<Text
|
|
|
|
|
size="xs"
|
|
|
|
|
sx={(theme) => ({
|
|
|
|
|
color: theme.colors.gray[6],
|
|
|
|
|
})}
|
|
|
|
|
>
|
2022-10-16 00:08:37 +02:00
|
|
|
{/* If our share.expiration is timestamp 0, show a different message */}
|
|
|
|
|
{moment(share.expiration).unix() === 0
|
|
|
|
|
? "This share will never expire."
|
|
|
|
|
: `This share will expire on ${
|
|
|
|
|
publicRuntimeConfig.TWELVE_HOUR_TIME === "true"
|
|
|
|
|
? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
|
|
|
|
|
: moment(share.expiration).format("MMMM DD YYYY, HH:mm")
|
|
|
|
|
}`}
|
2022-04-25 15:15:17 +02:00
|
|
|
</Text>
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
onClick={() => {
|
|
|
|
|
modals.closeAll();
|
|
|
|
|
router.push("/upload");
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
Done
|
|
|
|
|
</Button>
|
2022-10-10 22:14:23 +02:00
|
|
|
</Stack>
|
2022-04-25 15:15:17 +02:00
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default showCompletedUploadModal;
|
