Add download button for csv and move plants request to results

frontend/src/components/steps/results/ResultsStep.js

@@ -1,7 +1,29 @@
+import { useEffect, useState } from 'react';
+
 import Step from '../Step';
 import PlantList from './PlantList'
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import PlantRepository from '../../../repository/PlantRepository'
+import { Typography, Box } from '@mui/material';
+
 
 export default function ResultsStep(props) {
+    const [plants, setPlants] = useState([]);
+
+    useEffect(() => {
+        const updatePlants = () => {
+            PlantRepository.getFilteredPlants(props.filters).then(response => {
+                if (response.status === 200) {
+                    setPlants(response.data)
+                }
+            }).catch(e => {
+                this.setState({ plants: ["No plants found."] });
+            })
+        }    
+        updatePlants()},
+        [props.filters]);
+
 
     function createData(name, growthForm, moisturePreferences, plantTolerances, ecosystemServices, carbonSequestration, plantingStage) {
         return {
@@ -16,7 +38,7 @@ export default function ResultsStep(props) {
     }
 
     const getTableRows = () => {
-        return props.plants.map((plant) => {
+        return plants.map((plant) => {
             return createData(
                 plant.display_name,
                 plant.display_growth_form,
@@ -29,8 +51,26 @@ export default function ResultsStep(props) {
         })
     }
 
+    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();
+        })
+    }
+
     const stepContent = (
         <div className="pt-4">
+            <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={() => downloadCSV()}>Download CSV</Button>
+                </Stack>
+            </Box>
             <PlantList rows={getTableRows()}/>
         </div>
     )

frontend/src/pages/MainPage.js

@@ -2,16 +2,12 @@ import React from 'react'
 import { Container } from 'reactstrap';
 import Stepper from '../components/Stepper'
 import Header from '../components/Header'
-
-import PlantRepository from '../repository/PlantRepository'
-
 export default class MainPage extends React.Component {
 
     constructor(props) {
         super(props);
 
         this.state = {
-            plants: [],
             filters: {}
         }
 
@@ -19,35 +15,20 @@ export default class MainPage extends React.Component {
         this.resetFilterState = this.resetFilterState.bind(this);
     }
 
-    updatePlants() {
-        PlantRepository.getFilteredPlants(this.state.filters).then(response => {
-            if (response.status === 200) {
-                this.setState({ plants: response.data });
-            }
-        }).catch(e => {
-            this.setState({ plants: ["No plants found."] });
-        })
-    }
    
     updateFilterState(newFilter) {
         this.setState({ filters: Object.assign(this.state.filters, newFilter) })
-        this.updatePlants()
     }
 
     resetFilterState() {
         this.setState({ filters: {} })
     }
 
-    componentDidMount() {
-        this.updatePlants()
-    }
-
     render() {
         return (
             <Container fluid className='main-container p-0'>
                 <Header/>
                 <Stepper 
-                    plants={this.state.plants} 
                     filters={this.state.filters} 
                     updateFilterState={this.updateFilterState} 
                     resetFilterState={this.resetFilterState} />