[UNSTABLE] Going to try to browserify-rails to end this madness

Gemfile

@@ -1,5 +1,4 @@
 source 'https://rubygems.org'
-source 'https://rails-assets.org'
 ruby '2.2.0'
 
 gem 'rails',  '4.1.0'
@@ -21,16 +20,20 @@ gem 'mutations'
 gem 'active_model_serializers', '~> 0.8.3'
 gem 'ice_cube'
 
-gem 'rails-assets-angular', '~> 1.3'
-gem 'rails-assets-ng-sortable'
-gem 'rails-assets-js-data'
-gem 'rails-assets-js-data-angular'
-gem 'rails-assets-lodash'
-gem 'rails-assets-jquery'
-gem 'rails-assets-pickadate'
-gem 'rails-assets-ng-pickadate'
-gem 'rails-assets-sio-client'
+source 'https://rails-assets.org' do
+  gem 'rails-assets-angular', '~> 1.3'
+  gem 'rails-assets-ng-sortable'
+  gem 'rails-assets-js-data'
+  gem 'rails-assets-js-data-angular'
+  gem 'rails-assets-lodash'
+  gem 'rails-assets-jquery'
+  gem 'rails-assets-pickadate'
+  gem 'rails-assets-ng-pickadate'
+  gem 'rails-assets-sio-client'
+end
+
 gem 'react-rails', '~> 1.0'
+# gem 'browserify-rails'
 
 group :development, :test do
   gem 'pry'

Gemfile.lock

@@ -234,6 +234,7 @@ GEM
       railties (= 4.1.0)
       sprockets-rails (~> 2.0)
     rails-assets-angular (1.3.13)
+    rails-assets-gaearon--redux (3.0.0)
     rails-assets-jquery (2.1.3)
     rails-assets-js-data (1.3.0)
     rails-assets-js-data-angular (2.1.0)
@@ -383,15 +384,16 @@ DEPENDENCIES
   poltergeist
   pry
   rails (= 4.1.0)
-  rails-assets-angular (~> 1.3)
-  rails-assets-jquery
-  rails-assets-js-data
-  rails-assets-js-data-angular
-  rails-assets-lodash
-  rails-assets-ng-pickadate
-  rails-assets-ng-sortable
-  rails-assets-pickadate
-  rails-assets-sio-client
+  rails-assets-angular (~> 1.3)!
+  rails-assets-gaearon--redux!
+  rails-assets-jquery!
+  rails-assets-js-data!
+  rails-assets-js-data-angular!
+  rails-assets-lodash!
+  rails-assets-ng-pickadate!
+  rails-assets-ng-sortable!
+  rails-assets-pickadate!
+  rails-assets-sio-client!
   rails_12factor
   react-rails (~> 1.0)
   rspec

app/assets/javascripts/farmbot_app/react/farm_designer.js.jsx

@@ -4,6 +4,11 @@
 //= require farmbot_app/react/menus/crop_info
 //= require farmbot_app/react/menus/calendar
 //= require farmbot_app/react/menus/schedule_creation
+
+import { createStore } from 'redux';
+
+let wow = createStore("WOW");
+debugger;
 class Crop {
   constructor(options) {
     this.name = (options.name || "Untitled Crop");
@@ -37,12 +42,34 @@ Fb.ToolTip = React.createClass({
   }
 });
 
+Fb.DesignerApp = class extends React.Component {
+  render() {
+    return <div className="farm-designer-body">
+             <div className="farm-designer-left">
+               <div id="designer-left" key="WOW">
+                 <Fb.Inventory.Content />
+               </div>
+             </div>
+             <div className="farm-designer-middle">
+               <div></div>
+             </div>
+
+             <div className="farm-designer-right">
+               <div id="designer-right">
+                 <Fb.Calendar />
+               </div>
+             </div>
+           </div>
+
+  }
+}
+
 $(document).ready(function() {
-  Fb.leftMenu         = document.getElementById("designer-left");
-  Fb.rightMenu        = document.getElementById("designer-right");
-  if (Fb.leftMenu && Fb.rightMenu){
-    Fb.renderInventory();
-    Fb.renderCalendar();
+  var dom = document.getElementById("farm-designer-app");
+  if (dom){
+    React.render(<Fb.DesignerApp/>, dom);
+    Fb.leftMenu  = document.getElementById("designer-left");
+    Fb.rightMenu = document.getElementById("designer-right");
   } else{
     console.info('Not loading designer.');
   };

app/assets/javascripts/farmbot_app/react/menus/plant_catalog.js.jsx

@@ -26,11 +26,11 @@ Fb.PlantCatalog = class extends React.Component {
     var crops = fakeCrops.map(
        (crop, k) => <Fb.PlantCatalogTile crop={crop} key={ k } />
      );
-    return <div>
+    return <div id="designer-left">
             <div className="green-content">
               <div className="search-box-wrapper">
                 <p>
-                  <a href="#" onClick={Fb.renderInventory}>
+                  <a href="#" onClick={ "" }>
                     <i className="fa fa-arrow-left"></i>
                   </a>
                   Choose a Crop
@@ -47,5 +47,8 @@ Fb.PlantCatalog = class extends React.Component {
 
 
 Fb.renderCatalog = function() {
-    React.render(<Fb.PlantCatalog/>, Fb.leftMenu);
+  console.log('wow');
+  // React.render(<Fb.PlantCatalog/>, Fb.leftMenu);
+  React.render(<p> Literally </p>, Fb.leftMenu);
+
 };

app/views/dashboard/ng-partials/farm-designer/_left_side.html.haml

@@ -1,3 +0,0 @@
-#designer-left
-  #designer-left-menu-bar
-  #designer-left-content

app/views/dashboard/ng-partials/farm-designer/_middle.html.haml

@@ -1 +0,0 @@
-%div

app/views/dashboard/ng-partials/farm-designer/_right_side.html.haml

@@ -1,3 +0,0 @@
-#designer-right
-  #designer-right-menu-bar
-  #designer-right-content

app/views/layouts/application.html.haml

@@ -9,6 +9,7 @@
     = stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css"
     = stylesheet_link_tag "application"
     = csrf_meta_tags
+    = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/redux/1.0.1/redux.min.js"
     = javascript_include_tag "application"
   %body{'ng-app' => 'FarmBot'}
     .row

app/views/pages/farm_designer.html.erb

@@ -0,0 +1,3 @@
+<div class="farm-designer" id="farm-designer-app">
+</div>
+<%= javascript_include_tag "farmbot_app/react/farm_designer" %>

app/views/pages/farm_designer.html.haml

@@ -1,9 +0,0 @@
-.farm-designer
-  .farm-designer-body
-    .farm-designer-left
-      = render partial: "dashboard/ng-partials/farm-designer/left_side"
-    .farm-designer-middle
-      = render partial: "dashboard/ng-partials/farm-designer/middle"
-    .farm-designer-right
-      = render partial: "dashboard/ng-partials/farm-designer/right_side"
-= javascript_include_tag "farmbot_app/react/farm_designer"