From 284ab8a01af4bc802e8d9fe5ab405582d2d6f4b7 Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Mon, 10 Jul 2017 21:49:12 +0700
Subject: [PATCH] Move fetching my channels into redux
---
ui/js/actions/content.js | 17 ++++++++++
ui/js/constants/action_types.js | 4 +++
ui/js/page/publish/index.js | 11 ++++--
ui/js/page/publish/view.jsx | 59 +++++++++++++++++----------------
ui/js/reducers/claims.js | 35 ++++++++++---------
ui/js/selectors/claims.js | 18 ++++++++++
6 files changed, 99 insertions(+), 45 deletions(-)
diff --git a/ui/js/actions/content.js b/ui/js/actions/content.js
index b80f8fc0c..d9566b091 100644
--- a/ui/js/actions/content.js
+++ b/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);
+ };
+}
diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js
index 216c84762..e278bac3d 100644
--- a/ui/js/constants/action_types.js
+++ b/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";
diff --git a/ui/js/page/publish/index.js b/ui/js/page/publish/index.js
index fac4419c1..bfe1f06e0 100644
--- a/ui/js/page/publish/index.js
+++ b/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);
diff --git a/ui/js/page/publish/view.jsx b/ui/js/page/publish/view.jsx
index 0693d61cf..cb9e938c8 100644
--- a/ui/js/page/publish/view.jsx
+++ b/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 {
- {
- this.handleChannelChange(event);
- }}
- value={this.state.channel}
- >
-
- {this.state.channels.map(({ name }) =>
-
- )}
-
-
+ {this.props.fetchingChannels
+ ?
+ : {
+ this.handleChannelChange(event);
+ }}
+ value={this.state.channel}
+ >
+
+ {this.props.channels.map(({ name }) =>
+
+ )}
+
+ }
{this.state.channel == "new"
?
diff --git a/ui/js/reducers/claims.js b/ui/js/reducers/claims.js
index 7417bc2fb..f71e2cadd 100644
--- a/ui/js/reducers/claims.js
+++ b/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;
diff --git a/ui/js/selectors/claims.js b/ui/js/selectors/claims.js
index b966375e9..1792db453 100644
--- a/ui/js/selectors/claims.js
+++ b/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;
+ }
+);