fix: tidy code

packages/ui/primitives/document-password-dialog.tsx

@@ -1,55 +1,95 @@
-import React from 'react';
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { Button } from './button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from './dialog';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
+import { Form, FormControl, FormField, FormItem, FormMessage } from './form/form';
 import { Input } from './input';
 
+const ZPasswordDialogFormSchema = z.object({
+  password: z.string(),
+});
+
+type TPasswordDialogFormSchema = z.infer<typeof ZPasswordDialogFormSchema>;
+
 type PasswordDialogProps = {
   open: boolean;
   onOpenChange: (_open: boolean) => void;
-  setPassword: (_password: string) => void;
-  onPasswordSubmit: () => void;
+  defaultPassword?: string;
+  onPasswordSubmit?: (password: string) => void;
   isError?: boolean;
 };
 
 export const PasswordDialog = ({
   open,
   onOpenChange,
+  defaultPassword,
   onPasswordSubmit,
   isError,
-  setPassword,
 }: PasswordDialogProps) => {
+  const form = useForm<TPasswordDialogFormSchema>({
+    defaultValues: {
+      password: defaultPassword ?? '',
+    },
+    resolver: zodResolver(ZPasswordDialogFormSchema),
+  });
+
+  const onFormSubmit = ({ password }: TPasswordDialogFormSchema) => {
+    onPasswordSubmit?.(password);
+  };
+
+  useEffect(() => {
+    if (isError) {
+      form.setError('password', {
+        type: 'manual',
+        message: 'The password you have entered is incorrect. Please try again.',
+      });
+    }
+  }, [form, isError]);
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
+    <Dialog open={open}>
+      <DialogContent className="w-full max-w-md">
         <DialogHeader>
           <DialogTitle>Password Required</DialogTitle>
+
           <DialogDescription className="text-muted-foreground">
             This document is password protected. Please enter the password to view the document.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="flex w-full items-center justify-center gap-4">
-          <Input
-            type="password"
-            className="bg-background mt-1.5"
-            placeholder="Enter password"
-            onChange={(e) => setPassword(e.target.value)}
-            autoComplete="off"
-          />
-          <Button onClick={onPasswordSubmit}>Submit</Button>
-        </DialogFooter>
-        {isError && (
-          <span className="text-xs text-red-500">
-            The password you entered is incorrect. Please try again.
-          </span>
-        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex flex-wrap items-start justify-between gap-4">
+              <FormField
+                name="password"
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem className="relative flex-1">
+                    <FormControl>
+                      <Input
+                        type="password"
+                        className="bg-background"
+                        placeholder="Enter password"
+                        autoComplete="off"
+                        {...field}
+                      />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div>
+                <Button>Submit</Button>
+              </div>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

packages/ui/primitives/pdf-viewer.tsx

@@ -7,16 +7,16 @@ import { type PDFDocumentProxy, PasswordResponses } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
+import { match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import type { DocumentData, DocumentMeta } from '@documenso/prisma/client';
+import type { DocumentData } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 
 import { cn } from '../lib/utils';
 import { PasswordDialog } from './document-password-dialog';
 import { useToast } from './use-toast';
-import { trpc } from '@documenso/trpc/react';
-import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 
 export type LoadedPDFDocument = PDFDocumentProxy;
 
@@ -47,7 +47,8 @@ export type PDFViewerProps = {
   className?: string;
   documentData: DocumentData;
   document?: DocumentWithData;
-  documentMeta?: DocumentMeta | null;
+  password?: string | null;
+  onPasswordSubmit?: (password: string) => void | Promise<void>;
   onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
   onPageClick?: OnPDFViewerPageClick;
   [key: string]: unknown;
@@ -56,8 +57,8 @@ export type PDFViewerProps = {
 export const PDFViewer = ({
   className,
   documentData,
-  document,
-  documentMeta,
+  password: defaultPassword,
+  onPasswordSubmit,
   onDocumentLoad,
   onPageClick,
   ...props
@@ -66,10 +67,10 @@ export const PDFViewer = ({
 
   const $el = useRef<HTMLDivElement>(null);
 
+  const passwordCallbackRef = useRef<((password: string | null) => void) | null>(null);
+
   const [isDocumentBytesLoading, setIsDocumentBytesLoading] = useState(false);
   const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
-  const [password, setPassword] = useState<string | null>(documentMeta?.documentPassword || null);
-  const passwordCallbackRef = useRef<((password: string | null) => void) | null>(null);
   const [isPasswordError, setIsPasswordError] = useState(false);
   const [documentBytes, setDocumentBytes] = useState<Uint8Array | null>(null);
 
@@ -82,9 +83,6 @@ export const PDFViewer = ({
     [documentData.data, documentData.type],
   );
 
-  const {mutateAsync: addDocumentPassword } = trpc.document.setDocumentPassword.useMutation();
-
-
   const isLoading = isDocumentBytesLoading || !documentBytes;
 
   const onDocumentLoaded = (doc: LoadedPDFDocument) => {
@@ -92,22 +90,6 @@ export const PDFViewer = ({
     onDocumentLoad?.(doc);
   };
 
-  const onPasswordSubmit = async() => {
-    setIsPasswordModalOpen(false);
-    try{
-      await addDocumentPassword({
-        documentId: document?.id ?? 0,
-        documentPassword: password!,
-      });
-      passwordCallbackRef.current?.(password);
-    } catch (error) {
-      console.error('Error adding document password:', error);
-    } finally {
-      passwordCallbackRef.current = null;
-    }
-
-  };
-
   const onDocumentPageClick = (
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     pageNumber: number,
@@ -206,23 +188,19 @@ export const PDFViewer = ({
               'h-[80vh] max-h-[60rem]': numPages === 0,
             })}
             onPassword={(callback, reason) => {
-              // If the documentMeta already has a password, we don't need to ask for it again.
-              if(password && reason !== PasswordResponses.INCORRECT_PASSWORD){
-                callback(password);
+              // If the document already has a password, we don't need to ask for it again.
+              if (defaultPassword && reason !== PasswordResponses.INCORRECT_PASSWORD) {
+                callback(defaultPassword);
                 return;
               }
+
               setIsPasswordModalOpen(true);
+
               passwordCallbackRef.current = callback;
-              switch (reason) {
-                case PasswordResponses.NEED_PASSWORD:
-                  setIsPasswordError(false);
-                  break;
-                case PasswordResponses.INCORRECT_PASSWORD:
-                  setIsPasswordError(true);
-                  break;
-                default:
-                  break;
-              }
+
+              match(reason)
+                .with(PasswordResponses.NEED_PASSWORD, () => setIsPasswordError(false))
+                .with(PasswordResponses.INCORRECT_PASSWORD, () => setIsPasswordError(true));
             }}
             onLoadSuccess={(d) => onDocumentLoaded(d)}
             // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
@@ -270,12 +248,18 @@ export const PDFViewer = ({
                 </div>
               ))}
           </PDFDocument>
+
           <PasswordDialog
             open={isPasswordModalOpen}
             onOpenChange={setIsPasswordModalOpen}
-            onPasswordSubmit={onPasswordSubmit}
+            onPasswordSubmit={(password) => {
+              passwordCallbackRef.current?.(password);
+
+              setIsPasswordModalOpen(false);
+
+              void onPasswordSubmit?.(password);
+            }}
             isError={isPasswordError}
-            setPassword={setPassword}
           />
         </>
       )}