Fix to allow multiple ItemScene to be open at once (fixes #336)

lib/app.js

@@ -129,6 +129,7 @@ class App extends React.Component {
         navigator={navigator}
         onRefresh={this.onRefresh.bind(this)}/>;
       case 'item': return <ItemScene
+        itemId={route.itemId}
         navigator={navigator} />;
       case 'settings': return <SettingsScene
         navigator={navigator}
@@ -225,8 +226,10 @@ class App extends React.Component {
     const parsed = URL.parse(url, true);
     switch (parsed.host) {
       case 'item':
-        this.props.itemOpened(parsed.query.url);
-        this.refs.navigator.push({ type: 'item' });
+        this.refs.navigator.push({
+          type: 'item',
+          itemId: parsed.query.url,
+        });
       break;
     }
   }
@@ -377,7 +380,6 @@ App.propTypes = {
   setUserFlag: React.PropTypes.func,
   itemFound: React.PropTypes.func,
   itemLost: React.PropTypes.func,
-  itemOpened: React.PropTypes.func,
   dispatch: React.PropTypes.func,
 
   // state
@@ -419,7 +421,6 @@ function mapDispatchToProps(dispatch) {
   const bound = bindActionCreators({
     itemFound: actions.itemFound,
     itemLost: actions.itemLost,
-    itemOpened: actions.itemOpened,
     setUserFlag: actions.setUserFlag,
     setIndicateScanning: actions.setIndicateScanning,
   }, dispatch);

lib/store/actions.js

@@ -58,20 +58,6 @@ const actions = {
     };
   },
 
-  itemOpened(id) {
-    return {
-      type: 'ITEM_OPENED',
-      id,
-    };
-  },
-
-  itemClosed(id) {
-    return {
-      type: 'ITEM_CLOSED',
-      id,
-    };
-  },
-
   fetchItemIfNeeded(id) {
     return (dispatch, getState) => {
       if (!id) return Promise.resolve();

lib/store/reducer.js

@@ -17,7 +17,7 @@ const {
 const initialState = {
   items: {},
   itemsNearby: [],
-  openItem: null,
+
   network: {
     status: HEALTHY,
     timestamp: Date.now(),
@@ -35,6 +35,7 @@ const initialState = {
     status: null,
     value: null,
   },
+
   location: {
     latitude: null,
     longitude: null,
@@ -49,8 +50,6 @@ module.exports = (state = initialState, action) => {
     case 'ITEM_FOUND': return itemFound(state, action.id, action.value);
     case 'ITEM_UPDATED': return itemUpdated(state, action.id, action.value);
     case 'ITEM_LOST': return itemLost(state, action.id);
-    case 'ITEM_OPENED': return itemOpened(state, action.id);
-    case 'ITEM_CLOSED': return itemClosed(state, action.id);
     case 'ITEM_FETCHING': return itemFetching(state, action.id);
     case 'ITEM_FETCHED': return itemFetched(state, action.id, action.value);
     case 'ITEM_FETCH_ERROR': return itemFetchError(state, action.id, action.value);
@@ -195,22 +194,6 @@ function itemLost(state, id) {
   };
 }
 
-function itemOpened(state, id) {
-  debug('item opened', id);
-  return {
-    ...state,
-    openItem: id,
-  };
-}
-
-function itemClosed(state) {
-  debug('item closed');
-  return {
-    ...state,
-    openItem: null,
-  };
-}
-
 function refreshItems(state) {
   return {
     ...state,

lib/views/item/item-scene.js

@@ -11,20 +11,20 @@ import ItemDetail from './item-detail';
 
 class ItemScene extends Component {
   componentDidMount() {
-    const { openItem, dispatch } = this.props;
-    dispatch(fetchItemIfNeeded(openItem));
+    const { itemId, dispatch } = this.props;
+    dispatch(fetchItemIfNeeded(itemId));
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.openItem !== this.props.openItem) {
-      const { dispatch, openItem } = nextProps;
-      dispatch(fetchItemIfNeeded(openItem));
+    if (nextProps.itemId !== this.props.itemId) {
+      const { dispatch, itemId } = nextProps;
+      dispatch(fetchItemIfNeeded(itemId));
     }
   }
 
   render() {
-    const { openItem, items, navigator } = this.props;
-    const item = items[openItem];
+    const { itemId, items, navigator } = this.props;
+    const item = items[itemId];
 
     return <ItemDetail
         item={item}
@@ -35,10 +35,8 @@ class ItemScene extends Component {
 
 ItemScene.propTypes = {
   navigator: PropTypes.object.isRequired,
-  itemUrl: PropTypes.string,
-  openItem: PropTypes.string,
+  itemId: PropTypes.string,
   items: PropTypes.object,
-  setOpenItem: PropTypes.func,
   dispatch: PropTypes.func.isRequired,
 };
 
@@ -55,10 +53,9 @@ ItemScene.propTypes = {
  * @param  {ReduxStore} store
  * @return {Object}
  */
-function mapStateToProps({ openItem, items }) {
+function mapStateToProps({ items }) {
   return {
     items,
-    openItem,
   };
 }
 

lib/views/list/list-scene.js

@@ -4,7 +4,6 @@
  * Dependencies
  */
 
-import { bindActionCreators } from 'redux';
 import React, { Component, PropTypes } from 'react';
 import { flags } from '../../../config';
 import track from '../../utils/tracker';
@@ -13,7 +12,7 @@ import { connect } from 'react-redux';
 import Debug from '../../debug';
 import ListView from './list';
 
-import actions, {
+import {
   fetchItemIfNeeded,
 } from '../../store/actions';
 
@@ -112,8 +111,10 @@ class ListScene extends Component {
   onItemPress(id) {
     track.tapListItem(id);
     if (!flags.itemsExpandable) return Linking.openURL(id);
-    this.props.itemOpened(id);
-    this.props.navigator.push({ type: 'item' });
+    this.props.navigator.push({
+      type: 'item',
+      itemId: id,
+    });
   }
 
   onSubscriptionsPress() {
@@ -136,7 +137,6 @@ ListScene.propTypes = {
   items: PropTypes.array,
 
   onRefresh: PropTypes.func.isRequired,
-  itemOpened: PropTypes.func.isRequired,
   dispatch: PropTypes.func.isRequired,
 };
 
@@ -164,27 +164,12 @@ function mapStateToProps({ items, itemsNearby, userFlags, indicateScanning }) {
     indicateScanning,
   };
 }
-/**
- * Maps the methods exported from `action-creators.js`
- * to `this.props.<ACTION_NAME>`.
- *
- * @param  {function} dispatch
- * @return {Object}
- */
-function mapDispatchToProps(dispatch) {
-  const { itemOpened } = actions;
-
-  return {
-    ...bindActionCreators({ itemOpened }, dispatch),
-    dispatch,
-  };
-}
 
 /**
  * Exports
  */
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ListScene);
+module.exports = connect(mapStateToProps)(ListScene);
 
 const styles = StyleSheet.create({
   root: {