updated show request reducers and actions

react/actions/show.js

@@ -1,18 +1,22 @@
 import * as actions from 'constants/show_action_types';
-
 // export action creators
 
-export function updateClaimRequest (claim) {
+export function updateRequestWithChannelRequest (name, id) {
   return {
-    type: actions.CLAIM_REQUEST_UPDATE,
+    type: actions.REQUEST_UPDATE_CHANNEL,
-    claim,
+    name,
+    id,
   };
 };
 
-export function updateChannelRequest (channel) {
+export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) {
   return {
-    type: actions.CHANNEL_REQUEST_UPDATE,
+    type       : actions.REQUEST_UPDATE_CLAIM,
-    channel,
+    name,
+    id,
+    channelName: null,
+    channelId  : null,
+    extension,
   };
 };
 
@@ -27,7 +31,7 @@ export function updateChannelData (name, longId, shortId) {
 
 export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) {
   return {
-    type: actions.CHANNEL_CLAIMS_UPDATE,
+    type: actions.CHANNEL_CLAIMS_DATA_UPDATE,
     claims,
     currentPage,
     totalPages,
@@ -35,9 +39,9 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC
   };
 };
 
-export function updateClaimData (data) {
+export function updateAssetData (data) {
   return {
-    type: actions.CLAIM_DATA_UPDATE,
+    type: actions.ASSET_DATA_UPDATE,
     data,
   };
 };

react/components/ShowAssetDetails/index.js

@@ -4,9 +4,9 @@ import AssetTitle from 'components/AssetTitle';
 import AssetDisplay from 'components/AssetDisplay';
 import AssetInfo from 'components/AssetInfo';
 
-class ShowDetails extends React.Component {
+class ShowAssetDetails extends React.Component {
   componentDidMount () {
-    console.log(this.props);
+    console.log('ShowAssetDetails props', this.props);
   }
   render () {
     return (
@@ -63,4 +63,4 @@ class ShowDetails extends React.Component {
 // claimId
 // claimName
 
-export default ShowDetails;
+export default ShowAssetDetails;

react/constants/show_action_types.js

@@ -1,5 +1,5 @@
-export const CLAIM_REQUEST_UPDATE = 'CLAIM_REQUEST_UPDATE';
+export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL';
-export const CHANNEL_REQUEST_UPDATE = 'CHANNEL_REQUEST_UPDATE';
+export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM';
 export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
-export const CHANNEL_CLAIMS_UPDATE = 'CHANNEL_CLAIMS_UPDATE';
+export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
-export const CLAIM_DATA_UPDATE = 'CLAIM_DATA_UPDATE';
+export const ASSET_DATA_UPDATE = 'ASSET_DATA_UPDATE';

react/constants/show_request_types.js

@@ -0,0 +1,2 @@
+export const CHANNEL = 'CHANNEL';
+export const ASSET = 'ASSET';

react/containers/ChannelClaimsDisplay/index.js

@@ -4,12 +4,12 @@ import {updateChannelClaimsData} from 'actions/show';
 
 const mapStateToProps = ({ show }) => {
   return {
-    name       : show.channel.name,
+    name       : show.channelData.name,
-    id         : show.channel.id,
+    longId     : show.channelData.longId,
-    claims     : show.channel.claimsData.claims,
+    claims     : show.channelClaimsData.claims,
-    currentPage: show.channel.claimsData.currentPage,
+    currentPage: show.channelClaimsData.currentPage,
-    totalPages : show.channel.claimsData.totalPages,
+    totalPages : show.channelClaimsData.totalPages,
-    totalClaims: show.channel.claimsData.totalClaims,
+    totalClaims: show.channelClaimsData.totalClaims,
   };
 };
 

react/containers/ChannelClaimsDisplay/view.jsx

@@ -7,12 +7,11 @@ class ChannelClaimsDisplay extends React.Component {
     super(props);
     this.state = {
       error: null,
-      page : 1,
     };
     this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this);
   }
   componentDidMount () {
-    this.getAndStoreChannelClaims(this.props.name, this.props.id, this.state.page);
+    this.getAndStoreChannelClaims(this.props.name, this.props.longId, this.props.currentPage);
   }
   getAndStoreChannelClaims (name, id, page) {
     if (!id) id = 'none';

react/containers/ShowAsset/index.js

@@ -1,22 +1,20 @@
-import { updateClaimData } from 'actions/show';
 import { connect } from 'react-redux';
+import { updateAssetData } from 'actions/show';
 import View from './view';
 
 const mapStateToProps = ({ show }) => {
   return {
-    request: {
+    modifier : show.assetRequest.modifier,
-      modifier : show.request.claim.modifier,
+    claim    : show.assetRequest.name,
-      claim    : show.request.claim.name,
+    extension: show.assetRequest.extension,
-      extension: show.request.claim.extension,
+    claimData: show.assetData,
-    },
-    claim: show.claim,
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    onClaimDataChange: (data) => {
+    onAssetDataUpdate: (data) => {
-      dispatch(updateClaimData(data));
+      dispatch(updateAssetData(data));
     },
   };
 };

react/containers/ShowAsset/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import ShowAssetLite from 'components/ShowAssetLite/index';
+import ShowAssetLite from 'components/ShowAssetLite';
-import ShowAssetDetails from 'components/ShowAssetDetails/index';
+import ShowAssetDetails from 'components/ShowAssetDetails';
 import request from 'utils/request';
 
 class ShowAsset extends React.Component {
@@ -15,8 +15,8 @@ class ShowAsset extends React.Component {
   componentDidMount () {
     console.log('ShowAsset did mount');
     console.log('ShowAsset props', this.props);
-    const modifier = this.props.request.modifier;
+    const modifier = this.props.modifier;
-    const name = this.props.request.claim;
+    const name = this.props.claim;
     // create request params
     let body = {};
     if (modifier) {
@@ -42,7 +42,7 @@ class ShowAsset extends React.Component {
         return that.getClaimData(name, claimLongId);
       })
       .then(claimData => {
-        this.props.onClaimDataChange(claimData);
+        this.props.onAssetDataUpdate(claimData);
       })
       .catch(error => {
         this.setState({error});
@@ -82,18 +82,18 @@ class ShowAsset extends React.Component {
     });
   }
   render () {
-    if (this.props.request.extension) {
+    if (this.props.extension) {
       return (
         <ShowAssetLite
           error={this.state.error}
-          claimData={this.props.claim}
+          claimData={this.props.claimData}
         />
       );
     }
     return (
       <ShowAssetDetails
         error={this.state.error}
-        claimData={this.props.claim}
+        claimData={this.props.claimData}
       />
     );
   }

react/containers/ShowChannel/index.js

@@ -1,17 +1,17 @@
 import { connect } from 'react-redux';
+import { updateChannelData } from 'actions/show';
 import View from './view';
-import {updateChannelData} from 'actions/show';
 
 const mapStateToProps = ({ show }) => {
   return {
     request: {
-      name: show.request.channel.name,
+      name: show.channelRequest.name,
-      id  : show.request.channel.id,
+      id  : show.channelRequest.id,
     },
     channel: {
-      name   : show.channel.name,
+      name   : show.channelData.name,
-      shortId: show.channel.shortId,
+      shortId: show.channelData.shortId,
-      longId : show.channel.longId,
+      longId : show.channelData.longId,
     },
   };
 };

react/containers/ShowPage/index.js

@@ -1,20 +1,20 @@
-import { updateChannelRequest, updateClaimRequest } from 'actions/show';
 import { connect } from 'react-redux';
+import { updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show';
 import View from './view';
 
 const mapStateToProps = ({ show }) => {
   return {
-    request: show.request,
+    requestType: show.requestType,
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    onChannelRequest: (channel) => {
+    onChannelRequest: (name, id) => {
-      dispatch(updateChannelRequest(channel));
+      dispatch(updateRequestWithChannelRequest(name, id));
     },
-    onClaimRequest: (claim) => {
+    onAssetRequest: (name, id, channelName, channelId, extension) => {
-      dispatch(updateClaimRequest(claim));
+      dispatch(updateRequestWithAssetRequest(name, id, channelName, channelId, extension));
     },
   };
 };

react/containers/ShowPage/view.jsx

@@ -4,6 +4,8 @@ import ShowAsset from 'containers/ShowAsset';
 import ShowChannel from 'containers/ShowChannel';
 import lbryUri from 'utils/lbryUri';
 
+import { CHANNEL, ASSET } from 'constants/show_request_types';
+
 class ShowPage extends React.Component {
   constructor (props) {
     super(props);
@@ -46,23 +48,11 @@ class ShowPage extends React.Component {
       return this.setState({error: error.message});
     }
     // update the store
-    let requestedClaim = {
-      name    : claimName,
-      modifier: {
-        id     : null,
-        channel: null,
-      },
-      extension,
-    };
     if (isChannel) {
-      requestedClaim['modifier']['channel'] = {
+      return this.props.onAssetRequest(claimName, null, channelName, channelClaimId, extension);
-        name: channelName,
-        id  : channelClaimId,
-      };
     } else {
-      requestedClaim['modifier']['id'] = claimId;
+      return this.props.onAssetRequest(claimName, claimId, null, null, extension);
     }
-    return this.props.onClaimRequest(requestedClaim);
   }
   parseAndUpdateClaimOnly (claim) {
     // this could be a request for an asset or a channel page
@@ -75,11 +65,7 @@ class ShowPage extends React.Component {
     }
     // return early if this request is for a channel
     if (isChannel) {
-      const requestedChannel = {
+      return this.props.onChannelRequest(channelName, channelClaimId);
-        name: channelName,
-        id  : channelClaimId,
-      }
-      return this.props.onChannelRequest(requestedChannel);
     }
     // if not for a channel, parse the claim request
     let claimName, extension;  // if I am destructuring below, do I still need to declare these here?
@@ -88,39 +74,25 @@ class ShowPage extends React.Component {
     } catch (error) {
       return this.setState({error: error.message});
     }
-    const requestedClaim = {
+    this.props.onAssetRequest(claimName, null, null, null, extension);
-      name    : claimName,
-      modifier: null,
-      extension,
-    }
-    this.props.onClaimRequest(requestedClaim);
   }
   render () {
     console.log('rendering ShowPage');
+    console.log('ShowPage props', this.props);
     if (this.state.error) {
       return (
         <ErrorPage error={this.state.error}/>
       );
     }
-    if (this.props.request) {
+    switch (this.props.requestType) {
-      if (this.props.request.channel) {
+      case CHANNEL:
-        return (
+        return <ShowChannel/>;
-          <ShowChannel />
+      case ASSET:
-        );
+        return <ShowAsset/>;
-      } else if (this.props.request.claim) {
+      default:
-        return (
+        return <p>loading...</p>;
-          <ShowAsset />
-        );
-      }
     }
-    return (
-      <p>loading...</p>
-    );
   }
 };
 
-// props
-// channel
-// show
-
 export default ShowPage;

react/reducers/show.js

@@ -1,22 +1,35 @@
 import * as actions from 'constants/show_action_types';
+import { CHANNEL, ASSET } from 'constants/show_request_types';
 
 const initialState = {
-  request: {
+  requestType   : null,
-    channel: null,
+  channelRequest: {
-    claim  : null,
+    name: null,
+    id  : null,
   },
-  channel: {
+  assetRequest: {
-    name      : null,
+    name    : null,
-    shortId   : null,
+    modifier: {
-    longId    : null,
+      id     : null,
-    claimsData: {
+      channel: {
-      claims     : null,
+        name: null,
-      currentPage: null,
+        id  : null,
-      totalPages : null,
+      },
-      totalClaims: null,
     },
+    extension: null,
   },
-  claim: null,
+  channelData: {
+    name   : null,
+    shortId: null,
+    longId : null,
+  },
+  channelClaimsData: {
+    claims     : null,
+    currentPage: 1,
+    totalPages : null,
+    totalClaims: null,
+  },
+  assetData: null,
 };
 
 /*
@@ -25,42 +38,49 @@ Reducers describe how the application's state changes in response to actions
 
 export default function (state = initialState, action) {
   switch (action.type) {
-    case actions.CLAIM_REQUEST_UPDATE:
+    case actions.REQUEST_UPDATE_CHANNEL:
       return Object.assign({}, state, {
-        request: {
+        requestType   : CHANNEL,
-          channel: null,
+        channelRequest: {
-          claim  : action.claim,
+          name: action.name,
+          id  : action.id,
         },
       });
-    case actions.CHANNEL_REQUEST_UPDATE:
+    case actions.REQUEST_UPDATE_CLAIM:
       return Object.assign({}, state, {
-        request: {
+        requestType : ASSET,
-          channel: action.channel,
+        assetRequest: {
-          claim  : null,
+          name    : action.name,
+          modifier: {
+            id     : action.id,
+            channel: {
+              name: action.channelName,
+              id  : action.channelId,
+            },
+          },
+          extension: action.extension,
         },
       });
     case actions.CHANNEL_DATA_UPDATE:
       return Object.assign({}, state, {
-        channel: Object.assign({}, state.channel, {
+        channelData: Object.assign({}, state.channel, {
           name   : action.name,
           shortId: action.shortId,
           longId : action.longId,
         }),
       });
-    case actions.CHANNEL_CLAIMS_UPDATE:
+    case actions.CHANNEL_CLAIMS_DATA_UPDATE:
       return Object.assign({}, state, {
-        channel: Object.assign({}, state.channel, {
+        channelClaimsData: {
-          claimsData: {
+          claims     : action.claims,
-            claims     : action.claims,
+          currentPage: action.currentPage,
-            currentPage: action.currentPage,
+          totalPages : action.totalPages,
-            totalPages : action.totalPages,
+          totalClaims: action.totalClaims,
-            totalClaims: action.totalClaims,
+        },
-          },
-        }),
       });
-    case actions.CLAIM_DATA_UPDATE:
+    case actions.ASSET_DATA_UPDATE:
       return Object.assign({}, state, {
-        claim: action.data,
+        assetData: action.data,
       });
     default:
       return state;