more reorganization

front-ui/app/app.js

@@ -1,9 +0,0 @@
-var App = function() {
-    this.bootstrap = function() {
-        // here goes all app initialization and bootstraping logic
-        // nothing at the moment
-    };
-};
-
-var app = new App();
-module.exports = app; 

front-ui/app/components/browsing/byCategory.js

@@ -1,13 +1,13 @@
 var React = require('react');
 
 var ByCategory = React.createClass({
-    render: function() {
+  render: function() {
-        return (
+    return (
-            <div>
+      <div>
-            <h3> Browse products by category</h3>
+      <h3> Browse products by category</h3>
-            </div>
+      </div>
-            );
+      );
-    }
+  }
 });
 
 module.exports = ByCategory;

front-ui/app/components/items/allItems.js

@@ -1,8 +1,8 @@
 var React = require('react');
 var ItemList = require('./itemList');
-var ItemStore = require('../stores/itemStore.js');
+var ItemStore = require('../../stores/itemStore.js');
-var ItemActions = require('../actions/itemActions.js');
+var ItemActions = require('../../actions/itemActions.js');
-var ItemCollection = require('../models/itemCollection');
+var ItemCollection = require('../../models/itemCollection');
 
 var AllItems = React.createClass({
 

front-ui/app/components/items/itemList.js

@@ -1,6 +1,6 @@
 var React = require('react');
 var SingleItem = require('./singleItem');
-var ItemCollection = require('../models/itemCollection.js');
+var ItemCollection = require('../../models/itemCollection.js');
 
 var ItemList = React.createClass({
 

front-ui/app/components/items/itemPage.js

@@ -1,5 +1,5 @@
 var React = require('react')
-    ItemWithDetailsPage = require('../itemWithDetailsPage');
+    ItemWithDetailsPage = require('./itemWithDetailsPage');
 var ItemPage = React.createClass({
     render: function() {
         return (

front-ui/app/components/items/itemWithDetailsPage.js

@@ -1,9 +1,9 @@
 var React = require('react'),
     ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
-    ItemActions = require('../actions/itemActions'),
+    ItemActions = require('../../actions/itemActions'),
-    ItemStore = require('../stores/itemStore');
+    ItemStore = require('../../stores/itemStore');
 
-var Item = require('../models/item');
+var Item = require('../../models/item');
 
 var Router = require('react-router');
 var Navigation = Router.Navigation;

front-ui/app/components/items/singleItem.js

@@ -0,0 +1,31 @@
+var React = require('react');
+var ItemActions = require('../../actions/itemActions');
+
+var Router = require('react-router');
+var Navigation = Router.Navigation;
+
+var SingleItem = React.createClass({
+  mixins: [Navigation],
+    render: function() {
+      var self = this;
+      var itemClick = this.itemClick;
+      var firstImage = this.props.item.get('multi_media_descriptions')[0];
+      firstImage = firstImage || { url:  "http://res.cloudinary.com/lfvt7ps2n/image/upload/c_crop,g_center,w_300/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
+      return (    
+        <div className="single_item"  onClick={itemClick}>
+        <img src={firstImage.url} />
+        <h1> { this.props.item.get('name') }</h1>
+        <div> { this.props.item.get('list_price') } KM </div>
+        </div>  
+        );
+    },
+
+    itemClick: function(e) {
+      // no need for this to go through ItemActions
+      //ItemActions.selectItem(this.props.item);
+      this.transitionTo('/artikal/' + this.props.item.get('id') +'/' + this.props.item.get('name'));
+    }
+});
+
+
+module.exports = SingleItem;  

front-ui/app/components/rootApp.js

@@ -1,5 +1,5 @@
 var React = require('react'),
-    SectionsListComponent = require('./sectionsListComponent'),
+    SectionsListComponent = require('./shared/sectionsListComponent'),
     Router = require('react-router'),
     RouteHandler = Router.RouteHandler;
 

front-ui/app/components/sectionsListComponent.js

@@ -1,172 +0,0 @@
-var React = require('react'),
-    SectionCollection = require('../models/sectionCollection'),
-    Section = require('../models/section'),
-    Backbone = require('backbone');
-
-var Navigation = require('react-router').Navigation;
-
-Backbone.$ = $;
-
-var SectionsListComponent = React.createClass({
-    mixins : [Navigation],
-    getInitialState: function() {
-        return {
-            sections : [],
-            hoveredSection : ''
-        };
-    },
-    componentDidMount: function() {
-        var sections = new SectionCollection();
-        sections.fetch({success: function() {
-            console.log('Loaded sections:' , sections);
-            if(this.isMounted()) {
-                this.setState({
-                    sections: sections.models
-                });
-            }
-            
-
-        }.bind(this)});
-    },
-    onMouseOver: function(section) {
-        //console.log('mouse over!', section);
-        
-        this.setState({
-            hoveredSection: section.get('id')
-        });
-    },
-    onMouseOut: function() {
-        this.setState({
-            hoveredSection : ''
-        });  
-    },
-    onSectionClick: function(section) {
-        //alert('clicked on section:'+ section.get('name'));
-        this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
-        this.setState({
-            hoveredSection : ''
-        });  
-
-        return false;
-    },
-    onCategoryClick: function(category, section) {
-        
-        this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
-        this.setState({
-            hoveredSection: ''
-        });
-        console.log('category', category.id);
-        return false;
-    },
-    onSubcategoryClick: function(subcategory) {
-
-        return false;
-    },
-    render: function() {
-        var self = this;
-        var style = {
-            position: 'relative'
-        };
-        var abStyle = {
-            position: 'absolute'
-        };
-        return (
-            <div>
-            <ul className='nav nav-pills'>
-            {this.state.sections.map(function(section) {
-                                                           return (
-                                                               <li key={section.get('id')}  role='presentation' style={style}>
-                                                               <a href="#" onClick={self.onSectionClick.bind(self, section)} onMouseOver={self.onMouseOver.bind(self, section)}>
-                                                                    { section.get('name') }
-                                                                    </a>
-                                                                    <div style={abStyle} className={section.get('id') !== self.state.hoveredSection ? "hide section-cat-list": "section-cat-list"}  >
-                                                                   
-                                                                    <ul onMouseLeave={self.onMouseOut.bind(self)}  >
-                                                                    {section.get('categories').map(function(category) {
-                          return (
-                              <li key={category.id}>
-                              <span onClick={self.onCategoryClick.bind(self, category, section)}>{category.name}</span>
-                              <ul>
-                              {category.sub_categories.map(function(subCategory) {
-
-                                                                                     return (
-                                                                                         <li key={subCategory.id}>
-                                                                                         
-                                                                                         {subCategory.name}</li>
-                                                                                         
-                                                                                         )
-                                                                                 })}
-
-                              </ul>
-                              </li>
-                              )
-                                                                                                                      })}
-                                                                    </ul>
-                                                           </div>
-                                                               </li>
-                                                               )
-                                                       })}
-            </ul>
-            </div>
-            );
-    }
-});
-/*
-var SectionItem = React.createClass({
-    subCatClicked: function() {
-        alert('you clicked on subcategory');
-    },
-    render: function() {
-        var catStyle = {
-            paddingLeft: '20px'
-        };
-        var subStyle = {
-            paddingLeft: '20px'
-        };
-
-        var style = {
-            paddingLeft: '30px'
-        };
-        var self = this;
-
-        return (
-            <li className="active" role='presentation'>
-
-            <a href="#">{this.props.data.get('name')}</a>
-            <div>
-            {
-                this.props.data.get('categories').map(function(cat) {
-                    return (<div style={style}> {cat.name}
-                        
-                        
-                { cat.sub_categories.map(function(sc) {
-                                                          return <div style={subStyle} onClick={self.subCatClicked}> {sc.name} </div>
-                                                      }) }
-                        </div>)
-                })
-            }
-            </div>
-            </li>
-            );
-    }
-});
-
-var SectionsListComponent = React.createClass({
-    render: function() {
-        return (
-            <div className= "sections-list-component">
-
-            <ul className="nav nav-pills">
-            {this.props.sections.models.map(function(s){
-                                                           return <SectionItem data={s}></SectionItem>
-                                                       })}
-            
-          
-            </ul>
-            </div> 
-        );
-    }
-});
-*/
-
-module.exports = SectionsListComponent;

front-ui/app/components/shared/sectionsListComponent.js

@@ -0,0 +1,115 @@
+var React = require('react'),
+    SectionCollection = require('../../models/sectionCollection'),
+    Section = require('../../models/section'),
+    Backbone = require('backbone');
+
+var Navigation = require('react-router').Navigation;
+
+Backbone.$ = $;
+
+var SectionsListComponent = React.createClass({
+  mixins : [Navigation],
+    getInitialState: function() {
+      return {
+        sections : [],
+    hoveredSection : ''
+      };
+    },
+    componentDidMount: function() {
+      var sections = new SectionCollection();
+      sections.fetch({success: function() {
+        console.log('Loaded sections:' , sections);
+        if(this.isMounted()) {
+          this.setState({
+            sections: sections.models
+          });
+        }
+
+
+      }.bind(this)});
+    },
+    onMouseOver: function(section) {
+      //console.log('mouse over!', section);
+
+      this.setState({
+        hoveredSection: section.get('id')
+      });
+    },
+    onMouseOut: function() {
+      this.setState({
+        hoveredSection : ''
+      });  
+    },
+    onSectionClick: function(section) {
+      //alert('clicked on section:'+ section.get('name'));
+      this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
+      this.setState({
+        hoveredSection : ''
+      });  
+
+      return false;
+    },
+    onCategoryClick: function(category, section) {
+
+      this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
+      this.setState({
+        hoveredSection: ''
+      });
+      console.log('category', category.id);
+      return false;
+    },
+    onSubcategoryClick: function(subcategory) {
+
+      return false;
+    },
+    render: function() {
+      var self = this;
+      var style = {
+        position: 'relative'
+      };
+      var abStyle = {
+        position: 'absolute'
+      };
+      return (
+          <div>
+          <ul className='nav nav-pills'>
+          {this.state.sections.map(function(section) {
+                                                       return (
+                                                         <li key={section.get('id')}  role='presentation' style={style}>
+                                                         <a href="#" onClick={self.onSectionClick.bind(self, section)} onMouseOver={self.onMouseOver.bind(self, section)}>
+                                                         { section.get('name') }
+                                                         </a>
+                                                         <div style={abStyle} className={section.get('id') !== self.state.hoveredSection ? "hide section-cat-list": "section-cat-list"}  >
+
+                                                         <ul onMouseLeave={self.onMouseOut.bind(self)}  >
+                                                         {section.get('categories').map(function(category) {
+                                                                                                             return (
+                                                                                                               <li key={category.id}>
+                                                                                                               <span onClick={self.onCategoryClick.bind(self, category, section)}>{category.name}</span>
+                                                                                                               <ul>
+                                                                                                               {category.sub_categories.map(function(subCategory) {
+
+                                                                                                                                                                    return (
+                                                                                                                                                                      <li key={subCategory.id}>
+
+                                                                                                                                                                      {subCategory.name}</li>
+
+                                                                                                                                                                      )
+                                                                                                                                                                  })}
+
+                                                                                                               </ul>
+                                                                                                               </li>
+                                                                                                               )
+                                                                                                           })}
+                                                       </ul>
+                                                         </div>
+                                                         </li>
+                                                         )
+                                                     })}
+      </ul>
+        </div>
+        );
+    }
+});
+
+module.exports = SectionsListComponent;

front-ui/app/components/singleItem.js

@@ -1,32 +0,0 @@
-var React = require('react');
-var ItemActions = require('../actions/itemActions');
-
-var Router = require('react-router');
-var Navigation = Router.Navigation;
-
-
-var SingleItem = React.createClass({
-    mixins: [Navigation],
-    render: function() {
-        var self = this;
-        var itemClick = this.itemClick;
-        var firstImage = this.props.item.get('multi_media_descriptions')[0];
-        firstImage = firstImage || { url:  "http://res.cloudinary.com/lfvt7ps2n/image/upload/c_crop,g_center,w_300/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
-        return (    
-            <div className="single_item"  onClick={itemClick}>
-             <img src={firstImage.url} />
-             <h1> { this.props.item.get('name') }</h1>
-             <div> { this.props.item.get('list_price') } KM </div>
-            </div>  
-        );
-    },
-
-    itemClick: function(e) {
-        // no need for this to go through ItemActions
-        //ItemActions.selectItem(this.props.item);
-        this.transitionTo('/artikal/' + this.props.item.get('id') +'/' + this.props.item.get('name'));
-    }
-});
-
-
-module.exports = SingleItem;  

front-ui/app/components/startPage/startPage.js

@@ -1,7 +1,7 @@
 var React = require('react'),
     Router = require('react-router'),
     RouteHandler = Router.RouteHandler,
-    AllItems = require('../allItems');
+    AllItems = require('../items/allItems');
 
 var StartPage = React.createClass({
     render : function() {

front-ui/app/externalApi.js

@@ -0,0 +1,9 @@
+var App = function() {
+  this.bootstrap = function() {
+    // here goes all app initialization and bootstraping logic
+    // nothing at the moment
+  };
+};
+
+var app = new App();
+module.exports = app; 

front-ui/app/rapp.js

@@ -1,36 +0,0 @@
-var React = require('react');
-var Router = require('react-router'),
-    Route = Router.Route, DefaultRoute = Router.DefaultRoute;
-var RouteHandler = Router.RouteHandler;
-var Navigation = Router.Navigation;
-
-
-var ItemWithDetailsPage = require('./components/itemWithDetailsPage');
-var ItemList = require('./components/itemList');
-var SectionsListComponent = require('./components/sectionsListComponent');
-var AllItems = require('./components/allItems');
-var RootApp = require('./components/rootApp');
-var StartPage = require('./components/startPage/startPage');
-var ByCategory = require('./components/browsing/byCategory');
-var BySection = require('./components/browsing/bySection');
-
-var ItemPage = require('./components/items/itemPage');
-
-
-var routes = (
-        <Route name='app' path='/' handler={RootApp}>
-            
-
-            <Route name='sekcija' path='sekcija/:id/:name' handler={BySection}>
-          </Route>
-          <Route name='artikal' path="artikal/:id/*" handler={ItemPage} />
-
-          <Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCategory} />
-            <DefaultRoute handler={StartPage}/>
-            
-        </Route>
-        );
-
-Router.run(routes, function(Handler) {
-    React.render(<Handler />, document.body);
-});

front-ui/app/ribica.js

@@ -1,9 +1,9 @@
 var Backbone = require('backbone');
-var app = require('./app');
+var ExternalApi = require('./externalApi');
-var rapp = require('./rapp');
+var Routes = require('./routes');
 Backbone.$ = $;
 
 module.exports = {
-    App : app,
+  ExternalApi: ExternalApi,
-    RApp: rapp
+  Routes : Routes
 }

front-ui/app/routes.js

@@ -0,0 +1,29 @@
+var React = require('react');
+var Router = require('react-router'),
+    Route = Router.Route, DefaultRoute = Router.DefaultRoute;
+var RouteHandler = Router.RouteHandler;
+var Navigation = Router.Navigation;
+
+var ItemWithDetailsPage = require('./components/items/itemWithDetailsPage');
+var ItemList = require('./components/items/itemList');
+var SectionsListComponent = require('./components/shared/sectionsListComponent');
+var AllItems = require('./components/items/allItems');
+var RootApp = require('./components/rootApp');
+var StartPage = require('./components/startPage/startPage');
+var ByCategory = require('./components/browsing/byCategory');
+var BySection = require('./components/browsing/bySection');
+
+var ItemPage = require('./components/items/itemPage');
+
+var routes = (
+    <Route name='app' path='/' handler={RootApp}>
+      <Route name='sekcija' path='sekcija/:id/:name' handler={BySection} />
+      <Route name='artikal' path="artikal/:id/*" handler={ItemPage} />
+      <Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCategory} />
+      <DefaultRoute handler={StartPage}/>
+    </Route>
+    );
+
+Router.run(routes, function(Handler) {
+  React.render(<Handler />, document.body);
+});