fixed missing ifmounted bug / fixed getting item when navigating directly to page

front-ui/app/actions/itemActions.js

@@ -4,22 +4,19 @@ var ItemConstants = require('../constants/itemConstants');
 // Define action methods
 var ItemActions = {
 
-  // select item
-  selectItem: function(item) {
-    AppDispatcher.handleAction({
-      actionType: ItemConstants.SELECT_ITEM,
-      item: item
-    })
-  },
 
   loadFrontPageItems: function() {
      AppDispatcher.handleAction({
       actionType: ItemConstants.LOAD_FOR_FRONTPAGE
     })
+  },
+
+  loadItemWithDetails: function() {
+     AppDispatcher.handleAction({
+      actionType: ItemConstants.LOAD_ITEM_WITH_DETAILS,
+    })
   }
 
-
-
 };
 
 module.exports = ItemActions;

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

@@ -7,17 +7,9 @@ var ItemCollection = require('../../models/itemCollection');
 var AllItems = React.createClass({
 
   render: function() {  
-    if(this.state) { 
       return (
         <ItemList items={this.state.items} />
         );
-    } 
-    else {
-      return (
-        <div> Not Loaded ! </div>
-        );
-
-    }
   },
 
     // Add change listeners to stores
@@ -26,6 +18,14 @@ var AllItems = React.createClass({
       ItemStore.addChangeListener(this._onChange);
     },
 
+
+    getInitialState: function() {
+      return {
+          items: ItemStore.getItems()
+        }
+    },
+
+
     _onChange: function () {
       if (this.isMounted()) {
         this.setState({

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

@@ -1,13 +0,0 @@
-var React = require('react')
-    ItemWithDetailsPage = require('./itemWithDetailsPage');
-var ItemPage = React.createClass({
-    render: function() {
-        return (
-            <div>
-              <ItemWithDetailsPage />
-            </div>
-            );
-    }
-});
-
-module.exports = ItemPage;

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

@@ -1,6 +1,7 @@
 var React = require('react'),
     ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
     ItemActions = require('../../actions/itemActions'),
+    NavigationStore = require('../../stores/NavigationStore'),
     ItemStore = require('../../stores/itemStore');
 
 var Router = require('react-router');
@@ -35,17 +36,21 @@ var ItemWithDetailsPage = React.createClass({
     // Add change listeners to stores
     componentDidMount: function() {
       ItemStore.addChangeListener(this._onChange);
+      NavigationStore.addChangeListener(this._onChange);
+      ItemActions.loadItemWithDetails();
     },
 
     _onChange: function () {
-      this.setState({
+         if (this.isMounted()) {
-        item: ItemStore.getSelectedItem()
+             this.setState({
-      });
+                item: ItemStore.getLoadedItemWithDetails()
+            });
+        }
     },
 
     getInitialState: function () {
       return { 
-        item : ItemStore.getSelectedItem()
+        item : ItemStore.getLoadedItemWithDetails()
       }; 
     }
 

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

@@ -22,7 +22,6 @@ var SingleItem = React.createClass({
 
     itemClick: function(e) {
       NavigationActions.goToItemDetails(this.props.item);
-      ItemActions.selectItem(this.props.item);
       console.log(this.props.item)
       
     }

front-ui/app/constants/itemConstants.js

@@ -2,6 +2,5 @@ var keyMirror = require('react/lib/keyMirror');
 
 // Define action constants
 module.exports = keyMirror({
-  SELECT_ITEM: null,
   LOAD_FOR_FRONTPAGE: null
 });

front-ui/app/constants/navigationConstants.js

@@ -2,5 +2,5 @@ var keyMirror = require('react/lib/keyMirror');
 
 // Define action constants
 module.exports = keyMirror({
-  CHANGE_URL: null,
+  CHANGE_URL: null
 });

front-ui/app/stores/itemStore.js

@@ -6,87 +6,106 @@ var ItemWithDetails = require('../models/itemWithDetails');
 var _ = require('underscore');
 
 // Define initial data points
-var _items = new ItemCollection(), _selectedItem = new ItemWithDetails();
+var _items = new ItemCollection(),
+    _itemWithDetails = new ItemWithDetails();
 
 
 var loadItemsForFrontpage = function() {
-        items = _items
+    items = _items
-        items.setClassificationType(0);
+    items.setClassificationType(0);
-        items.setLimit(30);
+    items.setLimit(30);
-        items.setOffset(0);
+    items.setOffset(0);
 
-        items.fetch({success: function() {
+    items.fetch({
+        success: function() {
             ItemStore.emitChange();
-        }});
+        }
+    });
 };
 
-var setSelected  = function(id) {
+var getItemIdFromUrl = function() {
-  var item = new ItemWithDetails({id: id });
+    // ugly but it seems to me that
-  item.fetch({
+    // router does not want to expose its
-    success: function() {            
+    // state
-       _selectedItem = item;
+    var url = document.URL;
-       ItemStore.emitChange();      
+    var itemIdRegex = /artikal\/(\d+)\//g;
-     } 
+    var match = itemIdRegex.exec(url);
+    console.log(match);
+    return match[1];
+};
+
+var fetchItemWithDetails = function() {
+    var id = getItemIdFromUrl();
+    if (id !== undefined && _itemWithDetails.id !== id) {
+        var item = new ItemWithDetails({
+            id: id
+        });
+        item.fetch({
+            success: function() {
+                _itemWithDetails = item;
+                ItemStore.emitChange();
+            }
+        });
     }
-  );
 }
 
 
 // Extend ItemStore with EventEmitter to add eventing capabilities
 var ItemStore = _.extend({}, EventEmitter.prototype, {
 
-  // Return Single Item With Details 
+    // item with details
-  getSelectedItem: function() {
+    getLoadedItemWithDetails: function() {
-    return _selectedItem;
+        return _itemWithDetails;
-  },
+    },
 
-  // Return All Items
-  getItems: function() {
-    return _items;
-  },
 
-  // Emit Change event
+    // Return All Items
-  emitChange: function() {
+    getItems: function() {
-    console.log("Emitting change!");
+        return _items;
-    this.emit('change');
+    },
-  },
 
-  // Add change listener
+    // Emit Change event
-  addChangeListener: function(callback) {
+    emitChange: function() {
-    this.on('change', callback);
+        console.log("Emitting change!");
-  },
+        this.emit('change');
+    },
 
-  // Remove change listener
+    // Add change listener
-  removeChangeListener: function(callback) {
+    addChangeListener: function(callback) {
-    this.removeListener('change', callback);
+        this.on('change', callback);
-  }
+    },
+
+    // Remove change listener
+    removeChangeListener: function(callback) {
+        this.removeListener('change', callback);
+    }
 
 });
 
 
 // Register callback with AppDispatcher
 AppDispatcher.register(function(payload) {
-  var action = payload.action;
+    var action = payload.action;
-  var text;
+    var text;
 
-  switch(action.actionType) {
+    switch (action.actionType) {
 
-    // Respond to SELECT_ITEM action
+        case ItemConstants.LOAD_ITEM_WITH_DETAILS:
-    case ItemConstants.SELECT_ITEM:
+            fetchItemWithDetails();
-      setSelected(action.item.id);      
+            break;
-      break;
 
-    case ItemConstants.LOAD_FOR_FRONTPAGE:
-      loadItemsForFrontpage();
-      break;
 
-    default:
+        case ItemConstants.LOAD_FOR_FRONTPAGE:
-      return true;
+            loadItemsForFrontpage();
-  }
+            break;
 
-  // If action was responded to, emit change event
+        default:
-  ItemStore.emitChange();
+            return true;
-  return true;
+    }
+
+    // If action was responded to, emit change event
+    ItemStore.emitChange();
+    return true;
 
 });
 

front-ui/app/stores/navigationStore.js

@@ -8,6 +8,17 @@ var _ = require('underscore');
 // Extend ItemStore with EventEmitter to add eventing capabilities
 var NavigationStore = _.extend({}, EventEmitter.prototype, {
 
+  getItemIdFromUrl: function () {
+    // ugly but it seems to me that
+    // router does not want to expose its
+    // state
+    var url = document.URL;
+    var itemIdRegex = /artikal\/(\d+)\//;
+    var match = itemIdRegex.exec(url);
+    console.log(match);
+    return match[0];
+  },
+
   // Emit Change event
   emitChange: function() {
     console.log("NavigationStore change!");