From 75d5010dd9a27bf0039c0a7f3f4795c08601dafe Mon Sep 17 00:00:00 2001
From: Its-treason <timon.sch71@gmail.com>
Date: Sat, 24 Feb 2024 01:46:18 +0100
Subject: [PATCH] refaktor: PdfResultViewer into its own file

---
 .../PdfResultViewer/index.js                  | 22 +++++++++++++++++++
 .../QueryResult/QueryResultViewer/index.js    | 15 ++-----------
 2 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultViewer/PdfResultViewer/index.js

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultViewer/PdfResultViewer/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultViewer/PdfResultViewer/index.js
new file mode 100644
index 0000000000..165453ddcb
--- /dev/null
+++ b/packages/bruno-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
index 05d02a6fcd..403fa8f68d 100644
--- 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 (