fix(preview): fix revoke url when Preview unmount

TickLabVN · Dec 7, 2023 · 85feeb3 · 85feeb3
1 parent fcb8e39
commit 85feeb3
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 13 deletions.
diff --git a/src/components/order/desktop/OrderListDesktop.tsx b/src/components/order/desktop/OrderListDesktop.tsx
@@ -70,6 +70,10 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
     setIsFileUploadSuccess(false);
     setIsOrderUpdate(false);
     setDesktopOrderStep(0);
+    setMobileOrderStep({
+      current: 0,
+      prev: 3
+    });
     if (printingRequestId?.id) {
       await cancelPrintingRequest.mutateAsync(printingRequestId?.id);
     }

diff --git a/src/components/order/desktop/OrderSuccessDesktop.tsx b/src/components/order/desktop/OrderSuccessDesktop.tsx
@@ -1,16 +1,19 @@
 import { MutableRefObject, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { Button, Card, CardBody, Dialog, DialogBody, Typography } from '@material-tailwind/react';
 import { CheckIcon, DocumentChartBarIcon } from '@heroicons/react/24/outline';
 import coinImage from '@assets/coin.png';
 import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
 
 export function useOrderSuccessDesktop() {
+  const queryClient = useQueryClient();
   const [openDialog, setOpenDialog] = useState<boolean>(false);
 
   const OrderSuccessDesktop: Component<{
     initialTotalCost: MutableRefObject<number>;
     serviceFee?: number;
   }> = ({ initialTotalCost, serviceFee }) => {
+    const printingRequestId = queryClient.getQueryData<PrintingRequestId>(['printingRequestId']);
     const { totalCost, setTotalCost, setIsFileUploadSuccess } = useOrderPrintStore();
     const { setDesktopOrderStep } = useOrderWorkflowStore();
 
@@ -51,7 +54,10 @@ export function useOrderSuccessDesktop() {
                 <div className='flex flex-col gap-1'>
                   <div className='flex justify-between items-center'>
                     <p className='text-gray/4 text-base font-normal'>Order number:</p>
-                    <p className='text-gray/4 text-base font-medium'>{`#1234-5678`}</p>
+                    <p className='text-gray/4 text-base font-medium'>
+                      {printingRequestId &&
+                        `#${printingRequestId.id.slice(0, 4)}-${printingRequestId.id.slice(4, 8)}`}
+                    </p>
                   </div>
                   <div className='flex justify-between items-center'>
                     <p className='text-gray/4 text-base font-normal'>Pick-up location:</p>

diff --git a/src/components/order/desktop/UploadAndPreviewDesktop.tsx b/src/components/order/desktop/UploadAndPreviewDesktop.tsx
@@ -75,11 +75,20 @@ export const UploadAndPreviewDesktop: Component<{
         if (coinPerPage !== undefined) {
           const pdfDoc = await PDFDocument.load(fileEditedBuffer);
           setFileCoins(pdfDoc.getPageCount() * coinPerPage);
-          setTotalCost(initialTotalCost.current + pdfDoc.getPageCount() * coinPerPage);
+          setTotalCost(
+            initialTotalCost.current + pdfDoc.getPageCount() * coinPerPage * fileConfig.numOfCopies
+          );
         }
       }
     };
     handleEditPdfPrinting();
+
+    return () => {
+      const revokeURL = queryClient.getQueryData<string>(['fileURL']);
+      if (revokeURL) {
+        URL.revokeObjectURL(revokeURL);
+      }
+    };
   }, [
     initialTotalCost,
     coinPerPage,
@@ -88,6 +97,7 @@ export const UploadAndPreviewDesktop: Component<{
     fileConfig.pageSide,
     fileConfig.pages,
     fileConfig.pagesPerSheet,
+    fileConfig.numOfCopies,
     queryClient,
     editPdfPrinting,
     setFileCoins,
@@ -225,15 +235,6 @@ export const UploadAndPreviewDesktop: Component<{
       queryFn: () => queryClient.getQueryData<string>(['fileURL'])
     });
 
-    useEffect(() => {
-      return () => {
-        const revokeURL = queryClient.getQueryData<string>(['fileURL']);
-        if (revokeURL) {
-          URL.revokeObjectURL(revokeURL);
-        }
-      };
-    }, []);
-
     const PreviewBody = () => {
       return (
         <DocViewer

diff --git a/src/components/order/mobile/OrderListForm.tsx b/src/components/order/mobile/OrderListForm.tsx
@@ -31,12 +31,19 @@ export const OrderListForm: Component<{
     setTotalCost(0);
     setIsFileUploadSuccess(false);
     setIsOrderUpdate(false);
+    setMobileOrderStep({
+      current: 0,
+      prev: 2
+    });
+    setDesktopOrderStep(0);
     await handleExistOrderForm();
   }, [
     initialTotalCost,
     setIsFileUploadSuccess,
     setIsOrderUpdate,
     setTotalCost,
+    setMobileOrderStep,
+    setDesktopOrderStep,
     handleExistOrderForm
   ]);
 

diff --git a/src/components/order/mobile/OrderSuccessForm.tsx b/src/components/order/mobile/OrderSuccessForm.tsx
@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { Button, Card, CardBody, IconButton, Typography } from '@material-tailwind/react';
 import { CheckIcon, DocumentChartBarIcon } from '@heroicons/react/24/outline';
 import { XMarkIcon } from '@heroicons/react/24/solid';
@@ -10,6 +11,8 @@ export const OrderSuccessForm: Component<{
   handleCloseOrderForm: () => void;
   initialTotalCost: MutableRefObject<number>;
 }> = ({ handleCloseOrderForm, initialTotalCost }) => {
+  const queryClient = useQueryClient();
+  const printingRequestId = queryClient.getQueryData<PrintingRequestId>(['printingRequestId']);
   const {
     serviceFee: { data: serviceFee }
   } = usePrintingRequestQuery();
@@ -54,7 +57,10 @@ export const OrderSuccessForm: Component<{
             <div className='flex flex-col gap-1'>
               <div className='flex justify-between items-center'>
                 <p className='text-gray/4 text-base font-normal'>Order number:</p>
-                <p className='text-gray/4 text-base font-medium'>{`#1234-5678`}</p>
+                <p className='text-gray/4 text-base font-medium'>
+                  {printingRequestId &&
+                    `#${printingRequestId.id.slice(0, 4)}-${printingRequestId.id.slice(4, 8)}`}
+                </p>
               </div>
               <div className='flex justify-between items-center'>
                 <p className='text-gray/4 text-base font-normal'>Pick-up location:</p>

diff --git a/src/components/order/mobile/UploadDocumentForm.tsx b/src/components/order/mobile/UploadDocumentForm.tsx
@@ -77,7 +77,9 @@ export const UploadDocumentForm: Component<{
         if (coinPerPage !== undefined) {
           const pdfDoc = await PDFDocument.load(fileEditedBuffer);
           setFileCoins(pdfDoc.getPageCount() * coinPerPage);
-          setTotalCost(initialTotalCost.current + pdfDoc.getPageCount() * coinPerPage);
+          setTotalCost(
+            initialTotalCost.current + pdfDoc.getPageCount() * coinPerPage * fileConfig.numOfCopies
+          );
         }
       }
     };
@@ -90,6 +92,7 @@ export const UploadDocumentForm: Component<{
     fileConfig.pageSide,
     fileConfig.pages,
     fileConfig.pagesPerSheet,
+    fileConfig.numOfCopies,
     queryClient,
     setFileCoins,
     setTotalCost,