right-tree/frontend/src/pages/MainPage.js

import React from 'react'
import { Container } from 'reactstrap';
import Stepper from '../components/Stepper'
import Header from '../components/Header'

import PlantRepsostory from '../repository/PlantRepository'

export default class MainPage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            plants: [],
            filters: {}
        }

        this.updateFilterState = this.updateFilterState.bind(this);
    }

    updatePlants() {
        PlantRepsostory.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: { ...this.state.filters, ...newFilter } })
        this.updatePlants()
    }

    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} />
            </Container>
        )
    }

}