refactoring working, will need to reorganize stuff a little bit

front-ui/app/app.js

@@ -1,11 +1,9 @@
-var Router = require('./router'),
-    Backbone = require('backbone');
 
 var App = function() {
     this.bootstrap = function() {
         // here goes all app initialization and bootstraping logic
-        this.router = new Router();
+        //this.router = new Router();
-        Backbone.history.start();
+        //Backbone.history.start();
     };
 };
 

front-ui/app/components/allItems.js

@@ -4,7 +4,6 @@ var ItemStore = require('../stores/itemStore.js');
 var ItemActions = require('../actions/itemActions.js');
 var ItemCollection = require('../models/itemCollection');
 
-
 var AllItems = React.createClass({
 
     render: function() {  
@@ -21,9 +20,9 @@ var AllItems = React.createClass({
     }
     },
     
-    
      // Add change listeners to stores
     componentDidMount: function() {
+        ItemActions.loadFrontPageItems();
         ItemStore.addChangeListener(this._onChange);
     },
 
@@ -34,10 +33,6 @@ var AllItems = React.createClass({
         });
       }
     },
-
-
-
-
 });
 
 module.exports = AllItems; 

front-ui/app/components/itemMultiMediaDescriptions.js

@@ -7,13 +7,17 @@ var ItemMultimediaDescriptions = React.createClass({
         var self = this;      
 
         return (    
-               <div>Multimedia Description!</div>
+               <div>Multimedia Description!
+                {(this.props.descriptions || []).map(function(des) {
+                return (<img src={des.url} />)
+                                                          })}
+                             </div>
         );
-    },
+    }
 
-    getInitialState: function () {
+    //getInitialState: function () {
-			return { descriptions: this.props.descriptions }; 
+			//return { descriptions: [] }; 
-	}
+	//}
 });
 
 

front-ui/app/components/itemWithDetailsPage.js

@@ -3,30 +3,57 @@ var React = require('react'),
     ItemActions = require('../actions/itemActions'),
     ItemStore = require('../stores/itemStore');
 
+var Item = require('../models/item');
+
+var Router = require('react-router');
+var Navigation = Router.Navigation;
 
 var ItemWithDetailsPage = React.createClass({
 
 
+    mixins : [Router.State],
     render: function() {
 
         return (
-            <div className="item-with-details row-fluid center">
+
+
+ <div className="item-with-details row-fluid center">
             <div className="span3">
-                <ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
+            
-            </div>
+           <h3> {this.state.item.get('name')} </h3>
+           <div>
+
+             <div className='h4'> {this.state.item.get('list_price')} KM</div>
+             <div> {this.state.item.get('description')}</div>
+           </div>
+<ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
+
+
+
+                            </div>
             <div className="span4">
                quantitative descriptions
             </div>
             </div>
-            
         ) ;       
 
     },
 
      // Add change listeners to stores
     componentDidMount: function() {
-        ItemStore.addChangeListener(this._onChange);
+        //ItemStore.addChangeListener(this._onChange);
-        ItemActions.loadFrontPageItems();
+        //ItemActions.loadFrontPageItems();
+        
+        var self = this;
+        var item = new Item({ id: self.getParams().id });
+        item.fetch({success: function() {
+            if (self.isMounted()) {
+                console.log('article loaded', item);
+                self.setState({
+                    item : item
+                });
+            }
+        }});
     },
 
     _onChange: function () {
@@ -36,7 +63,10 @@ var ItemWithDetailsPage = React.createClass({
     },
 
     getInitialState: function () {
-      return { item: ItemStore.getSelectedItem() }; 
+      return { 
+          //item: ItemStore.getSelectedItem() 
+          item : (new Item())
+      }; 
     }
 
 });

front-ui/app/components/singleItem.js

@@ -1,12 +1,12 @@
 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;
@@ -22,7 +22,9 @@ var SingleItem = React.createClass({
     },
 
     itemClick: function(e) {
-        ItemActions.selectItem(this.props.item);
+        // 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'));
     }
 });
 

front-ui/app/controllers/homeController.js

@@ -1,13 +0,0 @@
-var StartPageSectionsView = require('../views/startPageSectionsView'),
-    StartPageItemsView = require('../views/startPageItemsView');
-
-function HomeController() {
-    console.log('HomeController');
-    var sectionsView = new StartPageSectionsView();
-    sectionsView.render();
-
-    var itemsView = new StartPageItemsView();
-    itemsView.render();
-}
-
-module.exports = HomeController;

front-ui/app/rapp.js

@@ -3,12 +3,16 @@ var ItemList = require('./components/itemList');
 var Router = require('react-router'),
     Route = Router.Route, DefaultRoute = Router.DefaultRoute;
 
+var ItemWithDetailsPage = require('./components/itemWithDetailsPage');
+
 var RouteHandler = Router.RouteHandler;
 
 var Navigation = Router.Navigation;
 
 var SectionsListComponent = require('./components/sectionsListComponent');
 
+var AllItems = require('./components/allItems');
+
 var RApp = React.createClass({
 
     render: function() {
@@ -18,7 +22,7 @@ var RApp = React.createClass({
 <div className="container">
 
 <div  className='page-header'>
-    <h1>Ribica.ba</h1>
+    <h1><a href="#">Ribica.ba</a></h1>
 </div>
 <div className='row'>
     <div className='col-md-12' id='header'>
@@ -47,6 +51,7 @@ var StartPage = React.createClass({
             </div>
             <div className='col-md-10'>
                 <h2>Ribica Start Page</h2>
+                <AllItems />
                 <RouteHandler />
             </div>
             </div>
@@ -69,7 +74,7 @@ var BySection = React.createClass({
         return ( <div>
 
             <div className='col-md-2'> 
-                left content
+                Here goes section for refining search, by section
             </div>
             <div className='col-md-10'>
                 <h2> Welcome to section {this.getParams().id} </h2>
@@ -78,13 +83,27 @@ var BySection = React.createClass({
     }
 });
 
+
+var Artikal = React.createClass({
+    render: function() {
+        return (
+            <div>
+            
+            
+            <ItemWithDetailsPage />
+            </div>
+            );
+    }
+});
+
 var routes = (
         <Route name='app' path='/' handler={RApp}>
             
-            <Route name='artikal' handler={ItemList} />
 
             <Route name='sekcija' path='sekcija/:id/:name' handler={BySection}>
           </Route>
+          <Route name='artikal' path="artikal/:id/*" handler={Artikal} />
+
           <Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCat} />
             <DefaultRoute handler={StartPage}/>
             

front-ui/app/router.js

@@ -1,16 +0,0 @@
-var Backbone = require('backbone'),
-    HomeController = require('./controllers/homeController');
-    ItemDetailsController = require('./controllers/itemDetailsController');
-
-var Router = Backbone.Router.extend({
-/*    routes : {*/
-        //"home" : HomeController,
-        //"artikal/:id/:slug": ItemDetailsController,
-        //"*default": HomeController    
-    /*}*/
-
-});
-
-//Backbone.history.start();
-
-module.exports = Router;

front-ui/app/stores/itemStore.js

@@ -71,12 +71,12 @@ AppDispatcher.register(function(payload) {
   switch(action.actionType) {
 
     // Respond to SELECT_ITEM action
-    case ItemConstants.SELECT_ITEM:
+   /* case ItemConstants.SELECT_ITEM:*/
-      setSelected(action.item.id);      
+      //setSelected(action.item.id);      
-      // TODO: this does not belong here - update when react router becommes available 
+      //// TODO: this does not belong here - update when react router becommes available 
-        RIBICA.App.router.navigate(action.item.getFrontEndUrl(), {'trigger': true});
+        //RIBICA.App.router.navigate(action.item.getFrontEndUrl(), {'trigger': true});
 
-      break;
+      /*break;*/
 
     case ItemConstants.LOAD_FOR_FRONTPAGE:
       loadItemsForFrontpage();

front-ui/app/views/itemDetailsView.js

@@ -1,22 +0,0 @@
-var Backbone = require('backbone'),
-    React = require('react'),
-    ItemWithDetailsPage = require('../components/itemWithDetailsPage');
-
-var ItemDetailsView = Backbone.View.extend({
-    el: '#content',
-    template: '<div class="item-details-container"></div>',
-    initialize: function(id) {
-        this.itemId = id;
-    },
-
-    render: function() {
-        var self = this;
-        this.$el.html(this.template);
-    
-            React.render(<ItemWithDetailsPage />, self.$('.item-details-container').get(0));            
-    
-        return this;
-    }
-});
-
-module.exports = ItemDetailsView;

front-ui/app/views/startPageItemsView.js

@@ -1,21 +0,0 @@
-var Backbone = require('backbone'),
-    React = require('react'),
-    AllItems = require('../components/allItems'),
-    ItemActions = require('../actions/itemActions');
-
-var StartPageItemsView = Backbone.View.extend({
-    el: '#content',
-    template: '<div class="item-list-container"></div>',
-    initialize: function() {
-        //alert('StartPageItemsView init');
-    },
-    render: function() {
-        this.$el.html(this.template);
-        ItemActions.loadFrontPageItems();
-        React.render(<AllItems />, self.$('.item-list-container').get(0));
-        return this;
-    }
-
-});
-
-module.exports = StartPageItemsView;

front-ui/app/views/startPageSectionsView.js

@@ -1,35 +0,0 @@
-var Backbone = require('backbone'),
-    React = require('react'),
-    SectionsViewComponent = require('../components/sectionsListComponent'),
-    SectionCollection = require('../models/sectionCollection'),
-    Section = require('../models/section');
-
-var StartPageSectionsView = Backbone.View.extend({
-    el: '#header',
-    template: '<div class="section-list-container"></div>',
-    initialize: function() {
-        //alert('StartPageSectionsView init');
-    },
-    render: function() {
-        this.$el.append(this.template);
-
-        var sections = new SectionCollection();
-        var self = this;
-        sections.fetch({success: function() {
-
-            console.log(sections);
-            React.render(new SectionsViewComponent({
-                handleClick: self.clickHandler.bind(self),
-                sections: sections
-            }),
-                self.$('.section-list-container').get(0));
-            
-        }});
-        return this;
-    },
-    clickHandler : function() {
-       alert('the item was clicked!'); 
-    }
-});
-
-module.exports = StartPageSectionsView;