moved state from components to redux

react/actions/show.js

@@ -19,3 +19,29 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId,
     extension,
   };
 };
+
+export function updateChannelData (name, longId, shortId) {
+  return {
+    type: actions.CHANNEL_DATA_UPDATE,
+    name,
+    longId,
+    shortId,
+  };
+};
+
+export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) {
+  return {
+    type: actions.CHANNEL_CLAIMS_DATA_UPDATE,
+    claims,
+    currentPage,
+    totalPages,
+    totalClaims,
+  };
+};
+
+export function updateAssetClaimData (data) {
+  return {
+    type: actions.ASSET_CLAIM_DATA_UPDATE,
+    data,
+  };
+};

react/components/AssetDisplay/index.js

@@ -128,6 +128,7 @@ AssetDisplay.propTypes = {
   contentType: PropTypes.string.isRequired,
   fileExt    : PropTypes.string.isRequired,
   thumbnail  : PropTypes.string,
+  // shortId    : PropTypes.string.isRequired,
 };
 
 export default AssetDisplay;

react/constants/show_action_types.js

@@ -1,2 +1,5 @@
 export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL';
 export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM';
+export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
+export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
+export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE';

react/containers/ChannelClaimsDisplay/index.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import { updateChannelClaimsData } from 'actions/show';
+import View from './view';
+
+const mapStateToProps = ({ show }) => {
+  return {
+    claims     : show.showChannel.channelClaimsData.claims,
+    currentPage: show.showChannel.channelClaimsData.currentPage,
+    totalPages : show.showChannel.channelClaimsData.totalPages,
+    totalClaims: show.showChannel.channelClaimsData.totalClaims,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => {
+      dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims));
+    },
+    onChannelClaimsDataClear: () => {
+      dispatch(updateChannelClaimsData(null, null, null, null));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/ChannelClaimsDisplay/view.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import AssetPreview from 'components/AssetPreview';
+import React from 'react/index';
+import AssetPreview from 'components/AssetPreview/index';
 import request from 'utils/request';
 
 class ChannelClaimsDisplay extends React.Component {
@@ -7,10 +7,6 @@ class ChannelClaimsDisplay extends React.Component {
     super(props);
     this.state = {
       error: null,
-      claims     : null,
-      currentPage: null,
-      totalPages : null,
-      totalClaims: null,
     };
     this.updateClaimsData = this.updateClaimsData.bind(this);
     this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this);
@@ -35,23 +31,22 @@ class ChannelClaimsDisplay extends React.Component {
         if (!success) {
           return that.setState({error: message});
         }
-        this.setState({
-          claims     : data.claims,
-          currentPage: data.currentPage,
-          totalPages : data.totalPages,
-          totalClaims: data.totalResults,
-        });
+        that.setState({error: null}); // move this error to redux state
+        that.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults);
       })
       .catch((error) => {
         that.setState({error: error.message});
       });
   }
+  componentWillUnmount () {
+    this.props.onChannelClaimsDataClear();
+  }
   showPreviousResultsPage () {
-    const previousPage = parseInt(this.state.currentPage) - 1;
+    const previousPage = parseInt(this.props.currentPage) - 1;
     this.updateClaimsData(this.props.name, this.props.longId, previousPage);
   }
   showNextResultsPage () {
-    const nextPage = parseInt(this.state.currentPage) + 1;
+    const nextPage = parseInt(this.props.currentPage) + 1;
     this.updateClaimsData(this.props.name, this.props.longId, nextPage);
   }
   render () {
@@ -65,9 +60,9 @@ class ChannelClaimsDisplay extends React.Component {
           </div>
         ) : (
           <div className="row row--tall">
-            {this.state.claims &&
+            {this.props.claims &&
             <div>
-              {this.state.claims.map((claim, index) => <AssetPreview
+              {this.props.claims.map((claim, index) => <AssetPreview
                 name={claim.name}
                 claimId={claim.claimId}
                 fileExt={claim.fileExt}
@@ -75,8 +70,8 @@ class ChannelClaimsDisplay extends React.Component {
                 key={`${claim.name}-${index}`}
               />)}
               <div>
-                {(this.state.currentPage > 1) && <button onClick={this.showPreviousResultsPage}>Previous Page</button>}
-                {(this.state.currentPage < this.state.totalPages) && <button onClick={this.showNextResultsPage}>Next Page</button>}
+                {(this.props.currentPage > 1) && <button onClick={this.showPreviousResultsPage}>Previous Page</button>}
+                {(this.props.currentPage < this.props.totalPages) && <button onClick={this.showNextResultsPage}>Next Page</button>}
               </div>
             </div>
             }

react/containers/ShowAsset/index.js

@@ -1,12 +1,25 @@
 import { connect } from 'react-redux';
 import View from './view';
+import { updateAssetClaimData } from 'actions/show';
 
 const mapStateToProps = ({ show }) => {
   return {
     modifier : show.assetRequest.modifier,
     claim    : show.assetRequest.name,
     extension: show.assetRequest.extension,
+    claimData: show.showAsset.claimData,
   };
 };
 
-export default connect(mapStateToProps, null)(View);
+const mapDispatchToProps = dispatch => {
+  return {
+    onAssetClaimDataUpdate: (claimData) => {
+      dispatch(updateAssetClaimData(claimData));
+    },
+    onAssetClaimDataClear: () => {
+      dispatch(updateAssetClaimData(null));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/ShowAsset/view.jsx

@@ -8,7 +8,6 @@ class ShowAsset extends React.Component {
     super(props);
     this.state = {
       error: null,
-      claimData: null,
     };
     this.getLongClaimId = this.getLongClaimId.bind(this);
     this.getClaimData = this.getClaimData.bind(this);
@@ -43,7 +42,8 @@ class ShowAsset extends React.Component {
         return that.getClaimData(name, claimLongId);
       })
       .then(claimData => {
-        this.setState({claimData});
+        this.setState({error: null}); // note: move this to redux level
+        this.props.onAssetClaimDataUpdate(claimData);
       })
       .catch(error => {
         this.setState({error});
@@ -87,14 +87,15 @@ class ShowAsset extends React.Component {
       return (
         <ShowAssetLite
           error={this.state.error}
-          claimData={this.state.claimData}
+          claimData={this.props.claimData}
         />
       );
     }
     return (
       <ShowAssetDetails
         error={this.state.error}
-        claimData={this.state.claimData}
+        claimData={this.props.claimData}
+        // shortUrl={this.props.shortUrl}
       />
     );
   }

react/containers/ShowChannel/index.js

@@ -1,11 +1,26 @@
 import { connect } from 'react-redux';
+import {updateChannelData} from 'actions/show';
 import View from './view';
 
 const mapStateToProps = ({ show }) => {
   return {
     requestName: show.channelRequest.name,
     requestId  : show.channelRequest.id,
+    name       : show.showChannel.channelData.name,
+    shortId    : show.showChannel.channelData.shortId,
+    longId     : show.showChannel.channelData.longId,
   };
 };
 
-export default connect(mapStateToProps, null)(View);
+const mapDispatchToProps = dispatch => {
+  return {
+    onChannelDataUpdate: (name, longId, shortId) => {
+      dispatch(updateChannelData(name, longId, shortId));
+    },
+    onChannelDataClear: () => {
+      dispatch(updateChannelData(null, null, null));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/ShowChannel/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import NavBar from 'containers/NavBar';
-import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay';
+import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
 import request from 'utils/request';
 
 class ShowChannel extends React.Component {
@@ -8,9 +8,6 @@ class ShowChannel extends React.Component {
     super(props);
     this.state = {
       error: null,
-      name   : null,
-      shortId: null,
-      longId : null,
     };
     this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this);
   }
@@ -32,17 +29,16 @@ class ShowChannel extends React.Component {
         if (!success) {
           return that.setState({error: message});
         }
-        this.setState({
-          error  : null,
-          name   : data.channelName,
-          longId : data.longChannelClaimId,
-          shortId: data.shortChannelClaimId,
-        });
+        that.setState({error: null}); // note: store this error at app level also
+        that.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId);
       })
       .catch((error) => {
         that.setState({error: error.message});
       });
   }
+  componentWillUnmount () {
+    this.props.onChannelDataClear();
+  }
   render () {
     return (
       <div>
@@ -56,17 +52,12 @@ class ShowChannel extends React.Component {
         ) : (
           <div className="row row--tall row--padded">
             <div className="column column--10">
-              <h2>channel name: {this.state.name ? this.state.name : 'loading...'}</h2>
-              <p>full channel id: {this.state.longId ? this.state.longId : 'loading...'}</p>
-              <p>short channel id: {this.state.shortId ? this.state.shortId : 'loading...'}</p>
+              <h2>channel name: {this.props.name ? this.props.name : 'loading...'}</h2>
+              <p>full channel id: {this.props.longId ? this.props.longId : 'loading...'}</p>
+              <p>short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}</p>
             </div>
             <div className="column column--10">
-              {(this.state.name && this.state.longId) &&
-              <ChannelClaimsDisplay
-                name={this.state.name}
-                longId={this.state.longId}
-              />
-              }
+              {(this.props.name && this.props.longId) && <ChannelClaimsDisplay />}
             </div>
           </div>
         )}

react/reducers/show.js

@@ -18,6 +18,22 @@ const initialState = {
     },
     extension: null,
   },
+  showChannel: {
+    channelData: {
+      name   : null,
+      shortId: null,
+      longId : null,
+    },
+    channelClaimsData: {
+      claims     : null,
+      currentPage: null,
+      totalPages : null,
+      totalClaims: null,
+    },
+  },
+  showAsset: {
+    claimData: null,
+  },
 };
 
 /*
@@ -49,6 +65,33 @@ export default function (state = initialState, action) {
           extension: action.extension,
         },
       });
+    case actions.CHANNEL_DATA_UPDATE:
+      return Object.assign({}, state, {
+        showChannel: Object.assign({}, state.showChannel, {
+          channelData: Object.assign({}, state.channel, {
+            name   : action.name,
+            shortId: action.shortId,
+            longId : action.longId,
+          }),
+        }),
+      });
+    case actions.CHANNEL_CLAIMS_DATA_UPDATE:
+      return Object.assign({}, state, {
+        showChannel: Object.assign({}, state.showChannel, {
+          channelClaimsData: {
+            claims     : action.claims,
+            currentPage: action.currentPage,
+            totalPages : action.totalPages,
+            totalClaims: action.totalClaims,
+          },
+        }),
+      });
+    case actions.ASSET_CLAIM_DATA_UPDATE:
+      return Object.assign({}, state, {
+        showAsset: {
+          claimData: action.data,
+        },
+      });
     default:
       return state;
   }