npm install react-pdf

Display pdf in Contact.jsx ok!

==> display fixed with : pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
wojtekmaj/react-pdf#321 (comment)

package.json

@@ -21,6 +21,7 @@
     "react": "^16.13.1",
     "react-advanced-form": "^1.7.2",
     "react-dom": "^16.13.1",
+    "react-pdf": "^4.2.0",
     "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/components/Details.jsx

@@ -1,38 +1,65 @@
 import React, { useState, useEffect } from "react";
 import Axios from "axios";
+import { Document, Page, pdfjs } from "react-pdf";
+
+// import Material UI
 import {
     Paper,
     Box,
     Card,
     CardContent,
     Button,
     CardActions,
+    Typography,
+    Container,
 } from "@material-ui/core";
 
-// import components
-
-// import data
-
 // import style
 import "../App.css";
 import "./style/details.css";
 
+import pdf from "../static/CV/Grégory_Chamekh_DéveloppeurWebFullstack-junior-v10b.pdf";
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
 function Details() {
     const [cv, setCv] = useState();
-
-    const getCV = () => {
+    const [numPages, setNumPages] = useState(null);
+    const [pageNumber, setPageNumber] = useState(1);
+    const onDocumentLoadSuccess = ({ numPages }) => {
+        setNumPages(numPages);
+    };
+    const onLoadError = (error) => {
+        return error.message;
+    };
+    const getCV = async () => {
         const cvURL = `${process.env.REACT_APP_HOST}/infos/download`;
-        Axios.get(cvURL).then((response) => console.log("RES", response));
+        await Axios.get(cvURL)
+            .then((response) => response.data)
+            .then((data) => setCv(data));
     };
 
+    useEffect(() => {
+        getCV();
+    }, []);
+
     return (
         <Box className="main">
             <Paper className="details-container">
                 <Card className="cv">
-                    CV
-                    <CardActions>
-                        <Button onClick={() => getCV()}>Télécharger</Button>
-                    </CardActions>
+                    <CardContent>
+                        <Document
+                            className="cv"
+                            file={pdf}
+                            onLoadSuccess={onDocumentLoadSuccess}
+                            onLoadError={onLoadError}
+                        >
+                            <Page pageNumber={1} />
+                        </Document>
+
+                        <CardActions>
+                            <Button onClick={() => getCV()}>Télécharger</Button>
+                        </CardActions>
+                    </CardContent>
                 </Card>
                 <Card className="infos">Disponibilités et infos</Card>
                 <Card className="form">Une question?</Card>

src/components/style/details.css

@@ -1,12 +1,12 @@
-.details-container{
+.details-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr 1fr;
     grid-template-areas:
-        "cv cv infos infos infos"
-        "cv cv infos infos infos"
-        "cv cv form form form"
-        "cv cv form form form";
+        "cv cv cv infos infos"
+        "cv cv cv infos infos"
+        "cv cv cv form form"
+        "cv cv cv form form";
     height: 100%;
     row-gap: 5px;
     column-gap: 5px;
@@ -15,12 +15,20 @@
     padding: 50px;
 }
 
-.cv{
+.cv {
     grid-area: cv;
 }
-.infos{
+.infos {
     grid-area: infos;
 }
-.form{
+.form {
     grid-area: form;
-}
+}
+
+.react-pdf__Page__canvas {
+    width: calc(21cm / 10%);
+    height: calc(29.7cm / 10%);
+    max-width: 21cm;
+}
+.react-pdf__Page {
+}