Move fetching my channels into redux

ui/js/actions/content.js

@@ -339,3 +339,20 @@ export function doFetchClaimListMine() {
     });
   };
 }
+
+export function doFetchChannelListMine() {
+  return function(dispatch, getState) {
+    dispatch({
+      type: types.FETCH_CHANNEL_LIST_MINE_STARTED,
+    });
+
+    const callback = channels => {
+      dispatch({
+        type: types.FETCH_CHANNEL_LIST_MINE_COMPLETED,
+        data: { claims: channels },
+      });
+    };
+
+    lbry.channel_list_mine().then(callback);
+  };
+}

ui/js/constants/action_types.js

@@ -64,6 +64,10 @@ export const FETCH_AVAILABILITY_COMPLETED = "FETCH_AVAILABILITY_COMPLETED";
 export const FILE_DELETE = "FILE_DELETE";
 export const ABANDON_CLAIM_STARTED = "ABANDON_CLAIM_STARTED";
 export const ABANDON_CLAIM_COMPLETED = "ABANDON_CLAIM_COMPLETED";
+export const FETCH_CHANNEL_LIST_MINE_STARTED =
+  "FETCH_CHANNEL_LIST_MINE_STARTED";
+export const FETCH_CHANNEL_LIST_MINE_COMPLETED =
+  "FETCH_CHANNEL_LIST_MINE_COMPLETED";
 
 // Search
 export const SEARCH_STARTED = "SEARCH_STARTED";

ui/js/page/publish/index.js

@@ -2,13 +2,19 @@ import React from "react";
 import { connect } from "react-redux";
 import { doNavigate, doHistoryBack } from "actions/app";
 import { doClaimRewardType } from "actions/rewards";
-import { selectMyClaims } from "selectors/claims";
-import { doFetchClaimListMine } from "actions/content";
+import {
+  selectMyClaims,
+  selectFetchingMyChannels,
+  selectMyChannelClaims,
+} from "selectors/claims";
+import { doFetchClaimListMine, doFetchChannelListMine } from "actions/content";
 import rewards from "rewards";
 import PublishPage from "./view";
 
 const select = state => ({
   myClaims: selectMyClaims(state),
+  fetchingChannels: selectFetchingMyChannels(state),
+  channels: selectMyChannelClaims(state),
 });
 
 const perform = dispatch => ({
@@ -17,6 +23,7 @@ const perform = dispatch => ({
   fetchClaimListMine: () => dispatch(doFetchClaimListMine()),
   claimFirstChannelReward: () =>
     dispatch(doClaimRewardType(rewards.TYPE_FIRST_CHANNEL)),
+  fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
 });
 
 export default connect(select, perform)(PublishPage);

ui/js/page/publish/view.jsx

@@ -5,6 +5,7 @@ import { FormField, FormRow } from "component/form.js";
 import Link from "component/link";
 import rewards from "rewards";
 import Modal from "component/modal";
+import { BusyMessage } from "component/common";
 
 class PublishPage extends React.PureComponent {
   constructor(props) {
@@ -13,7 +14,6 @@ class PublishPage extends React.PureComponent {
     this._requiredFields = ["meta_title", "name", "bid", "tos_agree"];
 
     this.state = {
-      channels: null,
       rawName: "",
       name: "",
       bid: 10,
@@ -41,15 +41,18 @@ class PublishPage extends React.PureComponent {
   }
 
   _updateChannelList(channel) {
+    const { fetchingChannels, fetchChannelListMine } = this.props;
+
+    if (!fetchingChannels) fetchChannelListMine();
     // Calls API to update displayed list of channels. If a channel name is provided, will select
     // that channel at the same time (used immediately after creating a channel)
-    lbry.channel_list_mine().then(channels => {
-      this.props.claimFirstChannelReward();
-      this.setState({
-        channels: channels,
-        ...(channel ? { channel } : {}),
-      });
-    });
+    // lbry.channel_list_mine().then(channels => {
+    //   this.props.claimFirstChannelReward();
+    //   this.setState({
+    //     channels: channels,
+    //     ...(channel ? { channel } : {}),
+    //   });
+    // });
   }
 
   handleSubmit(event) {
@@ -465,10 +468,6 @@ class PublishPage extends React.PureComponent {
   }
 
   render() {
-    if (this.state.channels === null) {
-      return null;
-    }
-
     const lbcInputHelp = __(
       "This LBC remains yours and the deposit can be undone at any time."
     );
@@ -729,22 +728,26 @@ class PublishPage extends React.PureComponent {
               </div>
             </div>
             <div className="card__content">
-              <FormRow
-                type="select"
-                tabIndex="1"
-                onChange={event => {
-                  this.handleChannelChange(event);
-                }}
-                value={this.state.channel}
-              >
-                <option key="anonymous" value="anonymous">
-                  {__("Anonymous")}
-                </option>
-                {this.state.channels.map(({ name }) =>
-                  <option key={name} value={name}>{name}</option>
-                )}
-                <option key="new" value="new">{__("New identity...")}</option>
-              </FormRow>
+              {this.props.fetchingChannels
+                ? <BusyMessage message="Fetching identities" />
+                : <FormRow
+                    type="select"
+                    tabIndex="1"
+                    onChange={event => {
+                      this.handleChannelChange(event);
+                    }}
+                    value={this.state.channel}
+                  >
+                    <option key="anonymous" value="anonymous">
+                      {__("Anonymous")}
+                    </option>
+                    {this.props.channels.map(({ name }) =>
+                      <option key={name} value={name}>{name}</option>
+                    )}
+                    <option key="new" value="new">
+                      {__("New identity...")}
+                    </option>
+                  </FormRow>}
             </div>
             {this.state.channel == "new"
               ? <div className="card__content">

ui/js/reducers/claims.js

@@ -50,21 +50,26 @@ reducers[types.FETCH_CLAIM_LIST_MINE_COMPLETED] = function(state, action) {
   });
 };
 
-// reducers[types.FETCH_CHANNEL_CLAIMS_STARTED] = function(state, action) {
-//   const {
-//     uri,
-//   } = action.data
-//
-//   const newClaims = Object.assign({}, state.claimsByChannel)
-//
-//   if (claims !== undefined) {
-//     newClaims[uri] = claims
-//   }
-//
-//   return Object.assign({}, state, {
-//     claimsByChannel: newClaims
-//   })
-// }
+reducers[types.FETCH_CHANNEL_LIST_MINE_STARTED] = function(state, action) {
+  return Object.assign({}, state, { fetchingMyChannels: true });
+};
+
+reducers[types.FETCH_CHANNEL_LIST_MINE_COMPLETED] = function(state, action) {
+  const { claims } = action.data;
+  const myChannelClaims = new Set(state.myChannelClaims);
+  const byId = Object.assign({}, state.byId);
+
+  claims.forEach(claim => {
+    myChannelClaims.add(claim.claim_id);
+    byId[claims.claim_id] = claim;
+  });
+
+  return Object.assign({}, state, {
+    byId,
+    fetchingMyChannels: false,
+    myChannelClaims,
+  });
+};
 
 reducers[types.FETCH_CHANNEL_CLAIMS_COMPLETED] = function(state, action) {
   const { uri, claims } = action.data;

ui/js/selectors/claims.js

@@ -124,3 +124,21 @@ export const selectMyClaimsOutpoints = createSelector(
     return outpoints;
   }
 );
+
+export const selectFetchingMyChannels = createSelector(
+  _selectState,
+  state => !!state.fetchingMyChannels
+);
+
+export const selectMyChannelClaims = createSelector(
+  _selectState,
+  selectClaimsById,
+  (state, byId) => {
+    const ids = state.myChannelClaims || [];
+    const claims = [];
+
+    ids.forEach(id => claims.push(byId[id]));
+
+    return claims;
+  }
+);