show pdf information

package.json

@@ -30,6 +30,7 @@
         "react-dom": "^17.0.2",
         "react-hook-form": "^7.39.4",
         "react-hot-toast": "^2.2.0",
+        "react-pdf": "^6.2.2",
         "react-query": "^3.34.12",
         "react-redux": "^8.0.4",
         "react-router": "6.2.1",

src/Pages/Resultados.jsx

@@ -1,10 +1,79 @@
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom'
+import { Service } from '../Utils/HTTP';
+import { useSelector } from 'react-redux';
+import { Button  } from '@mui/material'
+import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
+// import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+
+const Cargando = () => <div><h2>loading...</h2></div>
+
+// Create Document Component
+const MyDocument = (props) => {
+
+  let { pdf } = props;
+  const [numPages, setNumPages] = useState(null);
+  const [pageNumber, setPageNumber] = useState(1);
+
+  function onDocumentLoadSuccess({ numPages }) {
+    console.log('numero de pagians',numPages)
+    setNumPages(numPages);
+  }
+
+  function onLoadError(error){
+    console.log('error: ', error)
+  }
+
+  return (
+    <div>
+      <div>
+        <Button  onClick={() =>setPageNumber(pageNumber + 1)} >
+          Siguiente
+        </Button>
+      </div>
+      <Document renderMode="canvas" file={pdf.data} onLoadSuccess={onDocumentLoadSuccess} onLoadError={onLoadError}>
+        <Page  pageNumber={pageNumber} loading={<Cargando/>} />
+      </Document>
+      <p>
+        Page {pageNumber} of {numPages}
+      </p>
+    </div>
+  )
+};
+
+
 export function Resultados() {
+
   let { id } = useParams();
+  let auth = useSelector((state) => state.token)
+  let [pdf, setPdf] = useState(null);
+
+  useEffect(() => {
+
+    let url = `/report/cleaverResult/${id}?output=pdf`
+    let rest = new Service(url);
+
+    pdfjs.GlobalWorkerOptions.workerSrc =  `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
+    rest
+      .getBlob(auth.token)
+      .then(blob => setPdf(blob))
+      .catch(error => console.log({ error }))
+
+  }, [auth, id])
+
   return (
     <div className="content-section">
       <div className="main">
         <h1>Resultados {id}</h1>
+        <hr />
+        {
+          pdf ?
+            <MyDocument pdf={pdf} />
+            : <div> <h5> loading...</h5></div>
+        }
       </div>
     </div>
   )

src/Utils/HTTP.js

@@ -2,153 +2,164 @@ import axios from 'axios';
 
 export class Service {
 
-    constructor(path) {
-        this.base_url = 'http://204.48.25.93:8081'
-        this.url = this.base_url + path
-        // this.base_url = 'http://psicoadmin.ditca.org:8081'
-        // this.api =  'http://204.48.25.93:8081/user?user=patrik&password=12345'
-        // this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
+  constructor(path) {
+    this.base_url = 'http://204.48.25.93:8081'
+    this.url = this.base_url + path
+    // this.base_url = 'http://psicoadmin.ditca.org:8081'
+    // this.api =  'http://204.48.25.93:8081/user?user=patrik&password=12345'
+    // this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
+  }
+
+  async getBlob(token) {
+    return await axios({
+      url: this.url,
+      method: 'get',
+      responseType: 'blob',
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
+  }
+
+
+  async getQuery(token) {
+    return await axios.get(this.url, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
+  }
+
+  async get(token) {
+    return axios.get(this.url, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
+      .then((res) => {
+        return res;
+      })
+      .catch((error) => {
+        console.log("ERROR :: ", error)
+        return new Error("GG");
+      })
+  }
+
+  async post(body, token) {
+
+    if (!token) {
+      let response = await axios({
+        method: "POST",
+        url: this.url,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        data: body
+      })
+      return await response.data;
     }
 
 
-    async getQuery(token) {
-        return await axios.get(this.url, {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        })
+    const MyHeaders = {
+      'Authorization': 'Bearer ' + token,
     }
 
-    async get(token) {
-        return axios.get(this.url, {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        })
-            .then((res) => {
-                return res;
-            })
-            .catch((error) => {
-                console.log("ERROR :: ", error)
-                return new Error("GG");
-            })
+    let response = await axios({
+      method: "POST",
+      url: this.url,
+      headers: MyHeaders,
+      data: body
+    })
+    console.log('response', response)
+
+    return await response.data;
+
+  }
+
+  async postQuery(body, token) {
+
+    if (!token) {
+      return await axios({
+        method: "POST",
+        url: this.url,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        data: body
+      })
     }
 
-    async post(body, token) {
-
-        if (!token) {
-            let response = await axios({
-                method: "POST",
-                url: this.url,
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                data: body
-            })
-            return await response.data;
-        }
-
-
-        const MyHeaders = {
-            'Authorization': 'Bearer ' + token,
-        }
-
-        let response = await axios({
-            method: "POST",
-            url: this.url,
-            headers: MyHeaders,
-            data: body
-        })
-        console.log('response', response)
-
-        return await response.data;
 
+    const MyHeaders = {
+      'Authorization': 'Bearer ' + token,
     }
 
-    async postQuery(body, token) {
-
-        if (!token) {
-            return await axios({
-                method: "POST",
-                url: this.url,
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                data: body
-            })
-        }
-
+    return await axios({
+      method: "POST",
+      url: this.url,
+      headers: MyHeaders,
+      data: body
+    })
 
-        const MyHeaders = {
-            'Authorization': 'Bearer ' + token,
-        }
 
-        return await axios({
-            method: "POST",
-            url: this.url,
-            headers: MyHeaders,
-            data: body
-        })
+  }
 
+  async put(body, token) {
 
+    if (!token) {
+      let response = await axios({
+        method: "PUT",
+        url: this.url,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        data: body
+      })
+      return await response.data;
     }
 
-    async put(body, token) {
-
-        if (!token) {
-            let response = await axios({
-                method: "PUT",
-                url: this.url,
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                data: body
-            })
-            return await response.data;
-        }
-
-
-        const MyHeaders = {
-            'Authorization': 'Bearer ' + token,
-        }
-
-        let response = await axios({
-            method: "PUT",
-            url: this.url,
-            headers: MyHeaders,
-            data: body
-        })
-        console.log('response', response)
-
-        return await response.data;
 
+    const MyHeaders = {
+      'Authorization': 'Bearer ' + token,
     }
 
+    let response = await axios({
+      method: "PUT",
+      url: this.url,
+      headers: MyHeaders,
+      data: body
+    })
+    console.log('response', response)
+
+    return await response.data;
+
+  }
+
+
+  async putQuery(body, token) {
+    if (!token) {
+      return await axios({
+        method: "PUT",
+        url: this.url,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        data: body
+      })
+    }
 
-    async putQuery(body, token) {
-        if (!token) {
-            return await axios({
-                method: "PUT",
-                url: this.url,
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                data: body
-            })
-        }
-
-        const MyHeaders = {
-            'Authorization': 'Bearer ' + token,
-        }
-
-        return await axios({
-            method: "PUT",
-            url: this.url,
-            headers: MyHeaders,
-            data: body
-        })
+    const MyHeaders = {
+      'Authorization': 'Bearer ' + token,
     }
 
+    return await axios({
+      method: "PUT",
+      url: this.url,
+      headers: MyHeaders,
+      data: body
+    })
+  }
+
 
 
 }