text: 
  import React, { Component } from 'react';
  import GardenPlot from '../gardenPlot/GardenPlot';
  import PlantSearch from '../plantsearch/PlantSearch';
  import GardenBuilderContainer from '../gardenBuilder/GardenBuilderContainer';
  import PlantActionSelectContainer from '../plantactionselector/PlantActionSelectContainer';
  import GardenActionSelectorContainer from '../gardenactionselector/GardenActionSelectorContainer';
  
  export default class Garden extends Component {
      componentDidMount() {
          const {id} = this.props.match.params;
          if(id) this.props.getGardenById(id);
      }
      render() {
          const { loading, garden, error } = this.props;
          // const {id} = this.props.match.params;
          if (loading) return <div>Loading...</div>;
          
          return (
              <div>
                  {!this.props.match.params.id && <div><GardenBuilderContainer/></div>}
                  {error && error.map(err => <pre>{err}</pre>)}
                  {this.props.match.params.id && (
                      <div>
                          <h2>{garden.name}</h2>
                          <PlantActionSelectContainer {...this.props} />
                          <PlantSearch />
                          <GardenPlot { ...this.props } />
                          <GardenActionSelectorContainer/>
                      </div>
                  )}
              </div>
          );
      }
  }