From f8b3ef3a642cef5ae6daed360cdeb099e9552cc2 Mon Sep 17 00:00:00 2001 From: Senad Uka Date: Wed, 28 Jan 2015 05:04:45 +0100 Subject: [PATCH] fixed missing ifmounted bug / fixed getting item when navigating directly to page --- front-ui/app/actions/itemActions.js | 15 +- front-ui/app/components/items/allItems.js | 16 +-- front-ui/app/components/items/itemPage.js | 13 -- .../components/items/itemWithDetailsPage.js | 13 +- front-ui/app/components/items/singleItem.js | 1 - front-ui/app/constants/itemConstants.js | 1 - front-ui/app/constants/navigationConstants.js | 2 +- front-ui/app/stores/itemStore.js | 129 ++++++++++-------- front-ui/app/stores/navigationStore.js | 11 ++ 9 files changed, 109 insertions(+), 92 deletions(-) delete mode 100644 front-ui/app/components/items/itemPage.js diff --git a/front-ui/app/actions/itemActions.js b/front-ui/app/actions/itemActions.js index e0288e3..2d139a0 100644 --- a/front-ui/app/actions/itemActions.js +++ b/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; \ No newline at end of file diff --git a/front-ui/app/components/items/allItems.js b/front-ui/app/components/items/allItems.js index 6f7c583..4d12774 100644 --- a/front-ui/app/components/items/allItems.js +++ b/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 ( ); - } - else { - return ( -
Not Loaded !
- ); - - } }, // 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({ diff --git a/front-ui/app/components/items/itemPage.js b/front-ui/app/components/items/itemPage.js deleted file mode 100644 index 954cbc0..0000000 --- a/front-ui/app/components/items/itemPage.js +++ /dev/null @@ -1,13 +0,0 @@ -var React = require('react') - ItemWithDetailsPage = require('./itemWithDetailsPage'); -var ItemPage = React.createClass({ - render: function() { - return ( -
- -
- ); - } -}); - -module.exports = ItemPage; diff --git a/front-ui/app/components/items/itemWithDetailsPage.js b/front-ui/app/components/items/itemWithDetailsPage.js index 9bd8f33..5242531 100644 --- a/front-ui/app/components/items/itemWithDetailsPage.js +++ b/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({ - item: ItemStore.getSelectedItem() - }); + if (this.isMounted()) { + this.setState({ + item: ItemStore.getLoadedItemWithDetails() + }); + } }, getInitialState: function () { return { - item : ItemStore.getSelectedItem() + item : ItemStore.getLoadedItemWithDetails() }; } diff --git a/front-ui/app/components/items/singleItem.js b/front-ui/app/components/items/singleItem.js index f6f1135..2bad435 100644 --- a/front-ui/app/components/items/singleItem.js +++ b/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) } diff --git a/front-ui/app/constants/itemConstants.js b/front-ui/app/constants/itemConstants.js index 2abf6a5..a0c0188 100644 --- a/front-ui/app/constants/itemConstants.js +++ b/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 }); \ No newline at end of file diff --git a/front-ui/app/constants/navigationConstants.js b/front-ui/app/constants/navigationConstants.js index 53cb592..e49b486 100644 --- a/front-ui/app/constants/navigationConstants.js +++ b/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 }); \ No newline at end of file diff --git a/front-ui/app/stores/itemStore.js b/front-ui/app/stores/itemStore.js index fd47b83..eb7c477 100644 --- a/front-ui/app/stores/itemStore.js +++ b/front-ui/app/stores/itemStore.js @@ -6,88 +6,107 @@ 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.setClassificationType(0); - items.setLimit(30); - items.setOffset(0); - - items.fetch({success: function() { +var loadItemsForFrontpage = function() { + items = _items + items.setClassificationType(0); + items.setLimit(30); + items.setOffset(0); + + items.fetch({ + success: function() { ItemStore.emitChange(); - }}); + } + }); }; -var setSelected = function(id) { - var item = new ItemWithDetails({id: id }); - item.fetch({ - success: function() { - _selectedItem = item; - ItemStore.emitChange(); - } +var 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+)\//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 - getSelectedItem: function() { - return _selectedItem; - }, + // item with details + getLoadedItemWithDetails: function() { + return _itemWithDetails; + }, - // Return All Items - getItems: function() { - return _items; - }, - // Emit Change event - emitChange: function() { - console.log("Emitting change!"); - this.emit('change'); - }, + // Return All Items + getItems: function() { + return _items; + }, - // Add change listener - addChangeListener: function(callback) { - this.on('change', callback); - }, + // Emit Change event + emitChange: function() { + console.log("Emitting change!"); + this.emit('change'); + }, - // Remove change listener - removeChangeListener: function(callback) { - this.removeListener('change', callback); - } + // Add change listener + addChangeListener: function(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 text; + var action = payload.action; + var text; - switch(action.actionType) { + switch (action.actionType) { - // Respond to SELECT_ITEM action - case ItemConstants.SELECT_ITEM: - setSelected(action.item.id); - break; + case ItemConstants.LOAD_ITEM_WITH_DETAILS: + fetchItemWithDetails(); + break; - case ItemConstants.LOAD_FOR_FRONTPAGE: - loadItemsForFrontpage(); - break; - default: - return true; - } + case ItemConstants.LOAD_FOR_FRONTPAGE: + loadItemsForFrontpage(); + break; - // If action was responded to, emit change event - ItemStore.emitChange(); - return true; + default: + return true; + } + + // If action was responded to, emit change event + ItemStore.emitChange(); + return true; }); -module.exports = ItemStore; +module.exports = ItemStore; \ No newline at end of file diff --git a/front-ui/app/stores/navigationStore.js b/front-ui/app/stores/navigationStore.js index 7bd08f5..2264eda 100644 --- a/front-ui/app/stores/navigationStore.js +++ b/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!");