refaktor: PdfResultViewer into its own file

Its-treason · Feb 24, 2024 · 75d5010 · 75d5010
1 parent e24c0fd
commit 75d5010
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/...no-app/src/components/ResponsePane/QueryResult/QueryResultViewer/PdfResultViewer/index.js b/...no-app/src/components/ResponsePane/QueryResult/QueryResultViewer/PdfResultViewer/index.js
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import { Document, Page } from 'react-pdf';
+
+const PdfResultViewer = ({ dataBuffer }) => {
+  const [numPages, setNumPages] = useState(null);
+  function onDocumentLoadSuccess({ numPages }) {
+    // Only show up to 10 pages, because more will cause lag
+    setNumPages(Math.min(numPages, 50));
+  }
+
+  return (
+    <div className="preview-pdf" style={{ height: '100%', overflow: 'auto', maxHeight: 'calc(100vh - 220px)' }}>
+      <Document file={`data:application/pdf;base64,${dataBuffer}`} onLoadSuccess={onDocumentLoadSuccess}>
+        {Array.from(new Array(numPages), (el, index) => (
+          <Page key={`page_${index + 1}`} pageNumber={index + 1} renderAnnotationLayer={false} />
+        ))}
+      </Document>
+    </div>
+  );
+};
+
+export default PdfResultViewer;
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultViewer/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultViewer/index.js
@@ -8,6 +8,7 @@ import 'pdfjs-dist/build/pdf.worker';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import { useTheme } from 'providers/Theme';
+import PdfResultViewer from 'components/ResponsePane/QueryResult/QueryResultViewer/PdfResultViewer';
 
 const QueryResultPreview = ({
   previewTab,
@@ -25,10 +26,6 @@ const QueryResultPreview = ({
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
 
-  const [numPages, setNumPages] = useState(null);
-  function onDocumentLoadSuccess({ numPages }) {
-    setNumPages(numPages);
-  }
   // Fail safe, so we don't render anything with an invalid tab
   if (!allowedPreviewModes.includes(previewTab)) {
     return null;
@@ -56,15 +53,7 @@ const QueryResultPreview = ({
       return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />;
     }
     case 'preview-pdf': {
-      return (
-        <div className="preview-pdf" style={{ height: '100%', overflow: 'auto', maxHeight: 'calc(100vh - 220px)' }}>
-          <Document file={`data:application/pdf;base64,${dataBuffer}`} onLoadSuccess={onDocumentLoadSuccess}>
-            {Array.from(new Array(numPages), (el, index) => (
-              <Page key={`page_${index + 1}`} pageNumber={index + 1} renderAnnotationLayer={false} />
-            ))}
-          </Document>
-        </div>
-      );
+      return <PdfResultViewer dataBuffer={dataBuffer} />;
     }
     case 'pretty': {
       return (