feat: invoice pdf preview dialog.

client/src/hooks/index.js

@@ -63,4 +63,5 @@ export function useCellAutoFocus(ref, autoFocus, columnId, rowIndex) {
   return ref;
 }
 
+export * from './useRequestPdf';
 export { useAsync, useAutofocus };

client/src/hooks/query/invoices.js

@@ -2,6 +2,7 @@ import { useQueryClient, useMutation } from 'react-query';
 import { useRequestQuery } from '../useQueryRequest';
 import { transformPagination } from 'utils';
 import useApiRequest from '../useRequest';
+import { useRequestPdf } from '../useRequestPdf';
 import t from './types';
 
 // Common invalidate queries.
@@ -145,10 +146,10 @@ export function useDeliverInvoice(props) {
  * Retrieve the sale invoice details.
  * @param {number} invoiceId - Invoice id.
  */
-export function useInvoice(invoiceId, props) {
+export function useInvoice(invoiceId, props, requestProps) {
   return useRequestQuery(
     [t.SALE_INVOICE, invoiceId],
-    { method: 'get', url: `sales/invoices/${invoiceId}` },
+    { method: 'get', url: `sales/invoices/${invoiceId}`, ...requestProps },
     {
       select: (res) => res.data.sale_invoice,
       defaultData: {},
@@ -157,6 +158,13 @@ export function useInvoice(invoiceId, props) {
   );
 }
 
+/**
+ * Retrieve the invoice pdf document data.
+ */
+export function usePdfInvoice(invoiceId) {
+  return useRequestPdf(`/sales/invoices/${invoiceId}`);
+}
+
 /**
  * Retrieve due invoices of the given customer id.
  * @param {number} customerId - Customer id.

client/src/hooks/useRequest.js

@@ -62,7 +62,7 @@ export default function useApiRequest() {
     return instance;
   }, [token, organizationId, setGlobalErrors, setLogout]);
 
-  return {
+  return React.useMemo(() => ({
     http,
 
     get(resource, params) {
@@ -84,5 +84,5 @@ export default function useApiRequest() {
     delete(resource, params) {
       return http.delete(`/api/${resource}`, params);
     },
-  };
+  }), [http]);
 }

client/src/hooks/useRequestPdf.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import useApiRequest from './useRequest';
+
+export const useRequestPdf = (url) => {
+  const apiRequest = useApiRequest();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const [pdfUrl, setPdfUrl] = React.useState('');
+  const [response, setResponse] = React.useState(null);
+
+  React.useEffect(() => {
+    setIsLoading(true);
+    apiRequest
+      .get(url, {
+        headers: { accept: 'application/pdf' },
+        responseType: 'blob',
+      })
+      .then((response) => {
+        // Create a Blob from the PDF Stream.
+        const file = new Blob([response.data], { type: 'application/pdf' });
+
+        // Build a URL from the file
+        const fileURL = URL.createObjectURL(file);
+
+        setPdfUrl(fileURL);
+        setIsLoading(false);
+        setIsLoaded(true);
+        setResponse(response);
+      });
+  }, []);
+
+  return {
+    isLoading,
+    isLoaded,
+    pdfUrl,
+    response,
+  };
+};