mirror of
https://github.com/documenso/documenso.git
synced 2025-11-24 13:41:30 +10:00
006b732edb
## Description
**Fixes issues with mismatching state between document steps.**
For example, editing a recipient and proceeding to the next step may not
display the updated recipient. And going back will display the old
recipient instead of the updated values.
**This PR also improves mutation and query speeds by adding logic to
bypass query invalidation.**
```ts
export const trpc = createTRPCReact<AppRouter>({
unstable_overrides: {
useMutation: {
async onSuccess(opts) {
await opts.originalFn();
// This forces mutations to wait for all the queries on the page to reload, and in
// this case one of the queries is `searchDocument` for the command overlay, which
// on average takes ~500ms. This means that every single mutation must wait for this.
await opts.queryClient.invalidateQueries();
},
},
},
});
```
I've added workarounds to allow us to bypass things such as batching and
invalidating queries. But I think we should instead remove this and
update all the mutations where a query is required for a more optimised
system.
## Example benchmarks
Using stg-app vs this preview there's an average 50% speed increase
across mutations.
**Set signer step:**
Average old speed: ~1100ms
Average new speed: ~550ms
**Set recipient step:**
Average old speed: ~1200ms
Average new speed: ~600ms
**Set fields step:**
Average old speed: ~1200ms
Average new speed: ~600ms
## Related Issue
This will resolve #470
## Changes Made
- Added ability to skip batch queries
- Added a state to store the required document data.
- Refetch the data between steps if/when required
- Optimise mutations and queries
## Checklist
- [X] I have tested these changes locally and they work as expected.
- [X] I have followed the project's coding style guidelines.
---------
Co-authored-by: Lucas Smith <me@lucasjamessmith.me>
98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useTransition } from 'react';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { Loader } from 'lucide-react';
|
|
|
|
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
|
|
import type { Recipient } from '@documenso/prisma/client';
|
|
import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
|
|
import { trpc } from '@documenso/trpc/react';
|
|
import { useToast } from '@documenso/ui/primitives/use-toast';
|
|
|
|
import { useRequiredSigningContext } from './provider';
|
|
import { SigningFieldContainer } from './signing-field-container';
|
|
|
|
export type EmailFieldProps = {
|
|
field: FieldWithSignature;
|
|
recipient: Recipient;
|
|
};
|
|
|
|
export const EmailField = ({ field, recipient }: EmailFieldProps) => {
|
|
const router = useRouter();
|
|
|
|
const { toast } = useToast();
|
|
|
|
const { email: providedEmail } = useRequiredSigningContext();
|
|
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
|
|
trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
|
|
|
|
const {
|
|
mutateAsync: removeSignedFieldWithToken,
|
|
isLoading: isRemoveSignedFieldWithTokenLoading,
|
|
} = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
|
|
|
|
const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
|
|
|
|
const onSign = async () => {
|
|
try {
|
|
await signFieldWithToken({
|
|
token: recipient.token,
|
|
fieldId: field.id,
|
|
value: providedEmail ?? '',
|
|
isBase64: false,
|
|
});
|
|
|
|
startTransition(() => router.refresh());
|
|
} catch (err) {
|
|
console.error(err);
|
|
|
|
toast({
|
|
title: 'Error',
|
|
description: 'An error occurred while signing the document.',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
};
|
|
|
|
const onRemove = async () => {
|
|
try {
|
|
await removeSignedFieldWithToken({
|
|
token: recipient.token,
|
|
fieldId: field.id,
|
|
});
|
|
|
|
startTransition(() => router.refresh());
|
|
} catch (err) {
|
|
console.error(err);
|
|
|
|
toast({
|
|
title: 'Error',
|
|
description: 'An error occurred while removing the signature.',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
|
|
{isLoading && (
|
|
<div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
|
|
<Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
|
|
</div>
|
|
)}
|
|
|
|
{!field.inserted && (
|
|
<p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Email</p>
|
|
)}
|
|
|
|
{field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
|
|
</SigningFieldContainer>
|
|
);
|
|
};
|