From 04b391ceb7f35af684da5f5e35936b89ccf13ea1 Mon Sep 17 00:00:00 2001
From: Dana Lambert <danalambert@catalyst.net.nz>
Date: Thu, 18 Nov 2021 11:18:18 +1300
Subject: [PATCH] Connect download pdf endpoint to frontend

---
 .../components/steps/results/ResultsStep.js   | 24 +++++++++++++------
 frontend/src/repository/PlantRepository.js    |  4 ++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/steps/results/ResultsStep.js b/frontend/src/components/steps/results/ResultsStep.js
index fa20217..290830d 100644
--- a/frontend/src/components/steps/results/ResultsStep.js
+++ b/frontend/src/components/steps/results/ResultsStep.js
@@ -52,14 +52,24 @@ export default function ResultsStep(props) {
         })
     }
 
+    const download = (response, fileType, fileName) => {
+        const url = window.URL.createObjectURL(new Blob([response.data], {type : fileType }));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', fileName);
+        document.body.appendChild(link);
+        link.click();
+    }
+
     const downloadCSV = () => {
         PlantRepository.getPlantsCSV(props.filters).then(response => {
-            const url = window.URL.createObjectURL(new Blob([response.data], {type : 'text/csv'}));
-            const link = document.createElement('a');
-            link.href = url;
-            link.setAttribute('download', 'plants.csv');
-            document.body.appendChild(link);
-            link.click();
+            download(response, "text/csv", "plants.csv")
+        })
+    }
+
+    const downloadPDF = () => {
+        PlantRepository.getPlantsPDF(props.filters).then(response => {
+            download(response, "application/pdf", "planting_guide.pdf")
         })
     }
 
@@ -68,7 +78,7 @@ export default function ResultsStep(props) {
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
                 <Typography variant='h5'>Plant List Results</Typography>
                 <Stack spacing={2} direction="row" justifyContent="end">
-                    <Button variant="contained">Download PDF</Button>
+                    <Button variant="contained" onClick={() => downloadPDF()}>Download PDF</Button>
                     <Button variant="contained" onClick={() => downloadCSV()}>Download CSV</Button>
                 </Stack>
             </Box>
diff --git a/frontend/src/repository/PlantRepository.js b/frontend/src/repository/PlantRepository.js
index 4772e54..d321df9 100644
--- a/frontend/src/repository/PlantRepository.js
+++ b/frontend/src/repository/PlantRepository.js
@@ -8,6 +8,10 @@ const PlantRepository = {
 
     getPlantsCSV(filters) {
         return Repository.get('/download/csv/', { params: filters })
+    },
+    
+    getPlantsPDF(filters) {
+        return Repository.get('/download/pdf/', { params: filters, responseType: 'arraybuffer' })
     }
 
 }