Begginings of GardenMap component

Rakefile

@@ -5,6 +5,9 @@ require File.expand_path('../config/application', __FILE__)
 FarmBot::Application.load_tasks
 
 Rake::Task["assets:precompile"].enhance do
+  # We use a mix of gulp + asset pipeline. Quick fix for now is
+  # to piggyback on `rake assets:precompile` so that it gets
+  # run on deploy.
   puts '====== Running `gulp build`'
   puts `gulp build`
   puts '====== Done running `gulp build`'

javascripts/menus/designer_main.js

@@ -2,30 +2,36 @@ import { CropInventory } from './crop_inventory';
 import { PlantCatalog } from './plant_catalog';
 import { Calendar } from './calendar';
 import { CropInfo } from './crop_info';
+import { GardenMap } from './garden_map';
 
-const MENU_CHOICES = {CropInventory, PlantCatalog, CropInfo}
+const LEFT_MENU_CHOICES = {CropInventory, PlantCatalog, CropInfo}
 
 export class DesignerMain extends React.Component {
+  transferableProps(name){
+    return _.merge({}, {dispatch: this.props.dispatch}, this.props[name]);
+  };
   // Dynamically determine what to render on the left side of the designer,
   // based on the value of getStore().leftMenu.component
-  renderPanel() {
-    let props = _.merge({},
-                        {dispatch: this.props.dispatch},
-                        this.props.leftMenu);
-    let component = MENU_CHOICES[props.component];
+  renderLeft() {
+    let props = this.transferableProps("leftMenu")
+    let component = LEFT_MENU_CHOICES[props.component];
     return React.createElement(component, props);
   }
+  renderMiddle(){
+    let props = this.transferableProps("middleMenu");
+    return React.createElement(GardenMap, props);
+  }
   render(){
     return (
       <div className="farm-designer-body">
         <div className="farm-designer-left">
           <div id="designer-left">
-            { this.renderPanel() }
+            { this.renderLeft() }
           </div>
         </div>
 
         <div className="farm-designer-middle">
-          <div></div>
+          { this.renderMiddle() }
         </div>
 
         <div className="farm-designer-right">

javascripts/menus/garden_map.js

@@ -0,0 +1,5 @@
+export class GardenMap extends React.Component {
+  render() {
+    return <div>Hello, GardenMap</div>;
+  }
+}

javascripts/redux/initial_state.js

@@ -3,7 +3,7 @@ var initialState = {
     component: 'CropInventory',
     tab:       'Plants'
   },
-  centerMenu: {
+  middleMenu: {
     mapPoints: []
   },
   rightMenu: {