fix: tidy code and update endpoints

This commit is contained in:
Mythie
2023-09-21 00:51:02 +00:00
parent bcb163693a
commit 4b13a42731
19 changed files with 344 additions and 151 deletions

View File

@ -7,7 +7,11 @@ import { useSession } from 'next-auth/react';
import { match } from 'ts-pattern';
import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button';
import { useToast } from '@documenso/ui/primitives/use-toast';
import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
export type DataTableActionButtonProps = {
row: Document & {
@ -18,11 +22,16 @@ export type DataTableActionButtonProps = {
export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
const { data: session } = useSession();
const { toast } = useToast();
const [, copyToClipboard] = useCopyToClipboard();
if (!session) {
return null;
}
const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
trpc.shareLink.createOrGetShareLink.useMutation();
const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
const isOwner = row.User.id === session.user.id;
@ -32,6 +41,20 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
const isComplete = row.status === DocumentStatus.COMPLETED;
const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
const onShareClick = async () => {
const { slug } = await createOrGetShareLink({
token: recipient?.token,
documentId: row.id,
});
await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
toast({
title: 'Copied to clipboard',
description: 'The sharing link has been copied to your clipboard.',
});
};
return match({
isOwner,
isRecipient,
@ -57,8 +80,8 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
</Button>
))
.otherwise(() => (
<Button className="w-24" disabled>
<Share className="-ml-1 mr-2 h-4 w-4" />
<Button className="w-24" loading={isCreatingShareLink} onClick={onShareClick}>
{!isCreatingShareLink && <Share className="-ml-1 mr-2 h-4 w-4" />}
Share
</Button>
));

View File

@ -7,6 +7,7 @@ import {
Download,
Edit,
History,
Loader,
MoreHorizontal,
Pencil,
Share,
@ -18,7 +19,8 @@ import { useSession } from 'next-auth/react';
import { getFile } from '@documenso/lib/universal/upload/get-file';
import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
import { trpc } from '@documenso/trpc/client';
import { trpc as trpcClient } from '@documenso/trpc/client';
import { trpc as trpcReact } from '@documenso/trpc/react';
import {
DropdownMenu,
DropdownMenuContent,
@ -26,6 +28,9 @@ import {
DropdownMenuLabel,
DropdownMenuTrigger,
} from '@documenso/ui/primitives/dropdown-menu';
import { useToast } from '@documenso/ui/primitives/use-toast';
import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
export type DataTableActionDropdownProps = {
row: Document & {
@ -36,11 +41,16 @@ export type DataTableActionDropdownProps = {
export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
const { data: session } = useSession();
const { toast } = useToast();
const [, copyToClipboard] = useCopyToClipboard();
if (!session) {
return null;
}
const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
trpcReact.shareLink.createOrGetShareLink.useMutation();
const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
const isOwner = row.User.id === session.user.id;
@ -50,15 +60,29 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
const isComplete = row.status === DocumentStatus.COMPLETED;
// const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
const onShareClick = async () => {
const { slug } = await createOrGetShareLink({
token: recipient?.token,
documentId: row.id,
});
await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
toast({
title: 'Copied to clipboard',
description: 'The sharing link has been copied to your clipboard.',
});
};
const onDownloadClick = async () => {
let document: DocumentWithData | null = null;
if (!recipient) {
document = await trpc.document.getDocumentById.query({
document = await trpcClient.document.getDocumentById.query({
id: row.id,
});
} else {
document = await trpc.document.getDocumentByToken.query({
document = await trpcClient.document.getDocumentByToken.query({
token: recipient.token,
});
}
@ -135,8 +159,12 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
Resend
</DropdownMenuItem>
<DropdownMenuItem disabled>
<Share className="mr-2 h-4 w-4" />
<DropdownMenuItem onClick={onShareClick}>
{isCreatingShareLink ? (
<Loader className="mr-2 h-4 w-4" />
) : (
<Share className="mr-2 h-4 w-4" />
)}
Share
</DropdownMenuItem>
</DropdownMenuContent>

View File

@ -1,5 +1,9 @@
import { ImageResponse } from 'next/server';
import { P, match } from 'ts-pattern';
import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
export const runtime = 'edge';
const CARD_OFFSET_TOP = 152;
@ -13,14 +17,31 @@ const size = {
};
type SharePageOpenGraphImageProps = {
params: { shareId: string };
params: { slug: string };
};
export default async function Image({ params: { shareId } }: SharePageOpenGraphImageProps) {
// Cannot use trpc here and prisma does not work in the browser so I cannot fetch the client
// const { data } = trpc.share.get.useQuery({ shareId });
export default async function Image({ params: { slug } }: SharePageOpenGraphImageProps) {
const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
const signature = shareId;
if (!recipientOrSender) {
return null;
}
const signatureImage = match(recipientOrSender)
.with({ Signature: P.array(P._) }, (recipient) => {
return recipient.Signature?.[0]?.signatureImageAsBase64 || null;
})
.otherwise((sender) => {
return sender.signature || null;
});
const signatureName = match(recipientOrSender)
.with({ Signature: P.array(P._) }, (recipient) => {
return recipient.name || recipient.email;
})
.otherwise((sender) => {
return sender.name || sender.email;
});
const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
fetch(new URL('./../../../../assets/inter-semibold.ttf', import.meta.url)).then(async (res) =>
@ -43,19 +64,36 @@ export default async function Image({ params: { shareId } }: SharePageOpenGraphI
{/* @ts-expect-error Lack of typing from ImageResponse */}
<img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
<p
tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center"
style={{
fontFamily: 'Caveat',
fontSize: `${Math.max(Math.min((CARD_WIDTH * 1.5) / signature.length, 80), 36)}px`,
top: `${CARD_OFFSET_TOP}px`,
left: `${CARD_OFFSET_LEFT}px`,
width: `${CARD_WIDTH}px`,
height: `${CARD_HEIGHT}px`,
}}
>
{signature}
</p>
{signatureImage ? (
<div
tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center"
style={{
top: `${CARD_OFFSET_TOP}px`,
left: `${CARD_OFFSET_LEFT}px`,
width: `${CARD_WIDTH}px`,
height: `${CARD_HEIGHT}px`,
}}
>
<img src={signatureImage} alt="signature" tw="w-full h-full" />
</div>
) : (
<p
tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center"
style={{
fontFamily: 'Caveat',
fontSize: `${Math.max(
Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80),
36,
)}px`,
top: `${CARD_OFFSET_TOP}px`,
left: `${CARD_OFFSET_LEFT}px`,
width: `${CARD_WIDTH}px`,
height: `${CARD_HEIGHT}px`,
}}
>
{signatureName}
</p>
)}
<div
tw="absolute absolute flex flex-col items-center justify-center pt-2.5 w-full"

View File

@ -3,7 +3,7 @@ import React from 'react';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getSharingId } from '@documenso/lib/server-only/share/get-share-id';
import { getShareLinkBySlug } from '@documenso/lib/server-only/share/get-share-link-by-slug';
import Redirect from './redirect';
@ -13,16 +13,16 @@ export const metadata: Metadata = {
export type SharePageProps = {
params: {
shareId?: string;
slug?: string;
};
};
export default async function SharePage({ params: { shareId } }: SharePageProps) {
if (!shareId) {
export default async function SharePage({ params: { slug } }: SharePageProps) {
if (!slug) {
return notFound();
}
const share = await getSharingId({ shareId });
const share = await getShareLinkBySlug({ slug }).catch(() => null);
if (!share) {
return notFound();

View File

@ -5,15 +5,15 @@ import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
export default function Redirect() {
const router = useRouter();
const { push } = useRouter();
useEffect(() => {
const timer = setTimeout(() => {
router.push('/');
push('/');
}, 3000);
return () => clearTimeout(timer);
}, []);
}, [push]);
return <div></div>;
}

View File

@ -88,7 +88,7 @@ export default async function CompletedSigningPage({
))}
<div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
<ShareButton documentId={document.id} recipientId={recipient.id} />
<ShareButton documentId={document.id} token={recipient.token} />
<DownloadButton
className="flex-1"

View File

@ -10,12 +10,13 @@ import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button';
export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
recipientId: number;
token: string;
documentId: number;
};
export const ShareButton = ({ recipientId, documentId }: ShareButtonProps) => {
const { mutateAsync: createShareId, isLoading } = trpc.share.create.useMutation();
export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
const { mutateAsync: createOrGetShareLink, isLoading } =
trpc.shareLink.createOrGetShareLink.useMutation();
const router = useRouter();
@ -23,19 +24,17 @@ export const ShareButton = ({ recipientId, documentId }: ShareButtonProps) => {
<Button
variant="outline"
className="flex-1"
disabled={!recipientId || !documentId || isLoading}
disabled={!token || !documentId || isLoading}
onClick={async () => {
console.log('Signing Clicked');
const response = await createShareId({
recipientId,
const { slug } = await createOrGetShareLink({
token,
documentId,
});
console.log('response', response);
// TODO: Router delaying...
return router.push(`/share/${response.link}`);
return router.push(`/share/${slug}`);
}}
>
<Share className="mr-2 h-5 w-5" />

View File

@ -0,0 +1,58 @@
import { P, match } from 'ts-pattern';
import { prisma } from '@documenso/prisma';
import { alphaid } from '../../universal/id';
export type CreateSharingIdOptions =
| {
documentId: number;
token: string;
}
| {
documentId: number;
userId: number;
};
export const createOrGetShareLink = async ({ documentId, ...options }: CreateSharingIdOptions) => {
const email = await match(options)
.with({ token: P.string }, async ({ token }) => {
return await prisma.recipient
.findFirst({
where: {
documentId,
token,
},
})
.then((recipient) => recipient?.email);
})
.with({ userId: P.number }, async ({ userId }) => {
return await prisma.user
.findFirst({
where: {
id: userId,
},
})
.then((user) => user?.email);
})
.exhaustive();
if (!email) {
throw new Error('Unable to create share link for document with the given email');
}
return await prisma.documentShareLink.upsert({
where: {
documentId_email: {
email,
documentId,
},
},
create: {
email,
documentId,
slug: alphaid(14),
},
update: {},
});
};

View File

@ -1,20 +0,0 @@
import { nanoid } from 'nanoid';
import { prisma } from '@documenso/prisma';
export interface CreateSharingIdOptions {
documentId: number;
recipientId: number;
}
export const createSharingId = async ({ documentId, recipientId }: CreateSharingIdOptions) => {
const result = await prisma.share.create({
data: {
recipientId,
documentId,
link: nanoid(),
},
});
return result;
};

View File

@ -0,0 +1,42 @@
import { prisma } from '@documenso/prisma';
export type GetRecipientOrSenderByShareLinkSlugOptions = {
slug: string;
};
export const getRecipientOrSenderByShareLinkSlug = async ({
slug,
}: GetRecipientOrSenderByShareLinkSlugOptions) => {
const { documentId, email } = await prisma.documentShareLink.findFirstOrThrow({
where: {
slug,
},
});
const recipient = await prisma.recipient.findFirst({
where: {
documentId,
email,
},
include: {
Signature: true,
},
});
if (recipient) {
return recipient;
}
const sender = await prisma.user.findFirst({
where: {
Document: { some: { id: documentId } },
email,
},
});
if (sender) {
return sender;
}
throw new Error('Recipient or sender not found');
};

View File

@ -1,18 +0,0 @@
import { prisma } from '@documenso/prisma';
export interface GetSharingIdOptions {
shareId: string;
}
export const getSharingId = async ({ shareId }: GetSharingIdOptions) => {
const result = await prisma.share.findUnique({
where: {
link: shareId,
},
include: {
recipent: true,
},
});
return result;
};

View File

@ -0,0 +1,13 @@
import { prisma } from '@documenso/prisma';
export type GetShareLinkBySlugOptions = {
slug: string;
};
export const getShareLinkBySlug = async ({ slug }: GetShareLinkBySlugOptions) => {
return await prisma.documentShareLink.findFirstOrThrow({
where: {
slug,
},
});
};

View File

@ -0,0 +1,35 @@
/*
Warnings:
- You are about to drop the `Share` table. If the table is not empty, all the data it contains will be lost.
*/
-- DropForeignKey
ALTER TABLE "Share" DROP CONSTRAINT "Share_documentId_fkey";
-- DropForeignKey
ALTER TABLE "Share" DROP CONSTRAINT "Share_recipientId_fkey";
-- DropTable
DROP TABLE "Share";
-- CreateTable
CREATE TABLE "DocumentShareLink" (
"id" SERIAL NOT NULL,
"email" TEXT NOT NULL,
"slug" TEXT NOT NULL,
"documentId" INTEGER NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
CONSTRAINT "DocumentShareLink_pkey" PRIMARY KEY ("id")
);
-- CreateIndex
CREATE UNIQUE INDEX "DocumentShareLink_slug_key" ON "DocumentShareLink"("slug");
-- CreateIndex
CREATE UNIQUE INDEX "DocumentShareLink_documentId_email_key" ON "DocumentShareLink"("documentId", "email");
-- AddForeignKey
ALTER TABLE "DocumentShareLink" ADD CONSTRAINT "DocumentShareLink_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

View File

@ -101,18 +101,18 @@ enum DocumentStatus {
}
model Document {
id Int @id @default(autoincrement())
id Int @id @default(autoincrement())
userId Int
User User @relation(fields: [userId], references: [id], onDelete: Cascade)
User User @relation(fields: [userId], references: [id], onDelete: Cascade)
title String
status DocumentStatus @default(DRAFT)
status DocumentStatus @default(DRAFT)
Recipient Recipient[]
Field Field[]
Share Share[]
ShareLink DocumentShareLink[]
documentDataId String
documentData DocumentData @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
createdAt DateTime @default(now())
updatedAt DateTime @default(now()) @updatedAt
documentData DocumentData @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
createdAt DateTime @default(now())
updatedAt DateTime @default(now()) @updatedAt
@@unique([documentDataId])
}
@ -160,7 +160,6 @@ model Recipient {
Document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
Field Field[]
Signature Signature[]
Share Share[]
@@unique([documentId, email])
}
@ -203,13 +202,15 @@ model Signature {
Field Field @relation(fields: [fieldId], references: [id], onDelete: Restrict)
}
model Share {
id Int @id @default(autoincrement())
recipientId Int
recipent Recipient @relation(fields: [recipientId], references: [id])
link String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
document Document? @relation(fields: [documentId], references: [id])
documentId Int?
model DocumentShareLink {
id Int @id @default(autoincrement())
email String
slug String @unique
documentId Int
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
document Document @relation(fields: [documentId], references: [id])
@@unique([documentId, email])
}

View File

@ -2,7 +2,7 @@ import { authRouter } from './auth-router/router';
import { documentRouter } from './document-router/router';
import { fieldRouter } from './field-router/router';
import { profileRouter } from './profile-router/router';
import { shareRouter } from './share-router/router';
import { shareLinkRouter } from './share-link-router/router';
import { procedure, router } from './trpc';
export const appRouter = router({
@ -11,7 +11,7 @@ export const appRouter = router({
profile: profileRouter,
document: documentRouter,
field: fieldRouter,
share: shareRouter,
shareLink: shareLinkRouter,
});
export type AppRouter = typeof appRouter;

View File

@ -0,0 +1,35 @@
import { TRPCError } from '@trpc/server';
import { createOrGetShareLink } from '@documenso/lib/server-only/share/create-or-get-share-link';
import { procedure, router } from '../trpc';
import { ZCreateOrGetShareLinkMutationSchema } from './schema';
export const shareLinkRouter = router({
createOrGetShareLink: procedure
.input(ZCreateOrGetShareLinkMutationSchema)
.mutation(async ({ ctx, input }) => {
try {
const { documentId, token } = input;
if (token) {
return await createOrGetShareLink({ documentId, token });
}
if (!ctx.user?.id) {
throw new Error(
'You must either provide a token or be logged in to create a sharing link.',
);
}
return await createOrGetShareLink({ documentId, userId: ctx.user.id });
} catch (err) {
console.error(err);
throw new TRPCError({
code: 'BAD_REQUEST',
message: 'We were unable to create a sharing link.',
});
}
}),
});

View File

@ -0,0 +1,10 @@
import { z } from 'zod';
export const ZCreateOrGetShareLinkMutationSchema = z.object({
documentId: z.number(),
token: z.string().optional(),
});
export type TCreateOrGetShareLinkMutationSchema = z.infer<
typeof ZCreateOrGetShareLinkMutationSchema
>;

View File

@ -1,38 +0,0 @@
import { TRPCError } from '@trpc/server';
import { createSharingId } from '@documenso/lib/server-only/share/create-share-id';
import { getSharingId } from '@documenso/lib/server-only/share/get-share-id';
import { procedure, router } from '../trpc';
import { ZShareLinkCreateSchema, ZShareLinkGetSchema } from './schema';
export const shareRouter = router({
create: procedure.input(ZShareLinkCreateSchema).mutation(async ({ input }) => {
try {
const { documentId, recipientId } = input;
return await createSharingId({ documentId, recipientId });
} catch (err) {
console.error(err);
throw new TRPCError({
code: 'BAD_REQUEST',
message: 'We were unable to create a sharing link.',
});
}
}),
get: procedure.input(ZShareLinkGetSchema).query(async ({ input }) => {
try {
const { shareId } = input;
return await getSharingId({ shareId });
} catch (err) {
console.error(err);
throw new TRPCError({
code: 'BAD_REQUEST',
message: 'We were unable to create a sharing link.',
});
}
}),
});

View File

@ -1,13 +0,0 @@
import { z } from 'zod';
export const ZShareLinkCreateSchema = z.object({
documentId: z.number(),
recipientId: z.number(),
});
export const ZShareLinkGetSchema = z.object({
shareId: z.string(),
});
export type ZShareLinkCreateSchema = z.infer<typeof ZShareLinkCreateSchema>;
export type ZShareLinkGetSchema = z.infer<typeof ZShareLinkGetSchema>;