diff --git a/src/renderer/component/subscribeButton/index.js b/src/renderer/component/subscribeButton/index.js
new file mode 100644
index 000000000..d79e53052
--- /dev/null
+++ b/src/renderer/component/subscribeButton/index.js
@@ -0,0 +1,16 @@
+import { connect } from "react-redux";
+import {
+ doChannelSubscribe,
+ doChannelUnsubscribe,
+} from "redux/actions/subscriptions";
+import { selectSubscriptions } from "redux/selectors/subscriptions";;
+import SubscribeButton from "./view";
+
+const select = (state, props) => ({
+ subscriptions: selectSubscriptions(state),
+});
+
+export default connect(select, {
+ doChannelSubscribe,
+ doChannelUnsubscribe
+})(SubscribeButton);
diff --git a/src/renderer/component/subscribeButton/view.jsx b/src/renderer/component/subscribeButton/view.jsx
new file mode 100644
index 000000000..cd93cac91
--- /dev/null
+++ b/src/renderer/component/subscribeButton/view.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import Link from "component/link";
+
+export default ({
+ channelName,
+ uri,
+ subscriptions,
+ doChannelSubscribe,
+ doChannelUnsubscribe
+ }) => {
+
+ const isSubscribed =
+ subscriptions
+ .map(subscription => subscription.channelName)
+ .indexOf(channelName) !== -1;
+
+ const subscriptionHandler = isSubscribed
+ ? doChannelUnsubscribe
+ : doChannelSubscribe;
+
+ const subscriptionLabel = isSubscribed ? __("Unsubscribe") : __("Subscribe");
+
+ return channelName && uri ? (
+
+ subscriptionHandler({
+ channelName,
+ uri,
+ })}
+ />
+
+ ) : "";
+}
diff --git a/src/renderer/dist/js/bundle.js b/src/renderer/dist/js/bundle.js
index b604d2d9e..86e64efdc 100644
--- a/src/renderer/dist/js/bundle.js
+++ b/src/renderer/dist/js/bundle.js
@@ -22146,7 +22146,7 @@ var selectSubscriptionsFromClaims = exports.selectSubscriptionsFromClaims = (0,
Object.defineProperty(exports, "__esModule", {
value: true
});
-exports.setHasFetchedSubscriptions = exports.channelUnsubscribe = exports.channelSubscribe = undefined;
+exports.setHasFetchedSubscriptions = exports.doChannelUnsubscribe = exports.doChannelSubscribe = undefined;
var _action_types = __webpack_require__(11);
@@ -22160,7 +22160,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-var channelSubscribe = exports.channelSubscribe = function channelSubscribe(subscription) {
+var doChannelSubscribe = exports.doChannelSubscribe = function doChannelSubscribe(subscription) {
return function (dispatch) {
return dispatch({
type: actions.CHANNEL_SUBSCRIBE,
@@ -22169,7 +22169,7 @@ var channelSubscribe = exports.channelSubscribe = function channelSubscribe(subs
};
};
-var channelUnsubscribe = exports.channelUnsubscribe = function channelUnsubscribe(subscription) {
+var doChannelUnsubscribe = exports.doChannelUnsubscribe = function doChannelUnsubscribe(subscription) {
return function (dispatch) {
return dispatch({
type: actions.CHANNEL_UNSUBSCRIBE,
@@ -31196,11 +31196,11 @@ var perform = function perform(dispatch) {
navigate: function navigate(path, params) {
return dispatch((0, _navigation2.doNavigate)(path, params));
},
- channelSubscribe: function channelSubscribe(subscription) {
- return dispatch((0, _subscriptions2.channelSubscribe)(subscription));
+ doChannelSubscribe: function doChannelSubscribe(subscription) {
+ return dispatch((0, _subscriptions2.doChannelSubscribe)(subscription));
},
- channelUnsubscribe: function channelUnsubscribe(subscription) {
- return dispatch((0, _subscriptions2.channelUnsubscribe)(subscription));
+ doChannelUnsubscribe: function doChannelUnsubscribe(subscription) {
+ return dispatch((0, _subscriptions2.doChannelUnsubscribe)(subscription));
}
};
};
@@ -138339,8 +138339,8 @@ var ChannelPage = function (_React$PureComponent) {
uri = _props3.uri,
page = _props3.page,
totalPages = _props3.totalPages,
- channelSubscribe = _props3.channelSubscribe,
- channelUnsubscribe = _props3.channelUnsubscribe,
+ doChannelSubscribe = _props3.doChannelSubscribe,
+ doChannelUnsubscribe = _props3.doChannelUnsubscribe,
subscriptions = _props3.subscriptions;
var name = claim.name,
claimId = claim.claim_id;
@@ -138350,7 +138350,7 @@ var ChannelPage = function (_React$PureComponent) {
return subscription.channelName;
}).indexOf(name) !== -1;
- var subscriptionHandler = isSubscribed ? channelUnsubscribe : channelSubscribe;
+ var subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
var subscriptionLabel = isSubscribed ? "Unsubscribe" : "Subscribe";
var subscriptionUri = _lbryuri2.default.build({ channelName: name, claimId: claimId }, false);
@@ -139706,11 +139706,11 @@ var perform = function perform(dispatch) {
fetchCostInfo: function fetchCostInfo(uri) {
return dispatch((0, _cost_info.doFetchCostInfoForUri)(uri));
},
- channelSubscribe: function channelSubscribe(subscription) {
- return dispatch((0, _subscriptions.channelSubscribe)(subscription));
+ doChannelSubscribe: function doChannelSubscribe(subscription) {
+ return dispatch((0, _subscriptions.doChannelSubscribe)(subscription));
},
- channelUnsubscribe: function channelUnsubscribe(subscription) {
- return dispatch((0, _subscriptions.channelUnsubscribe)(subscription));
+ doChannelUnsubscribe: function doChannelUnsubscribe(subscription) {
+ return dispatch((0, _subscriptions.doChannelUnsubscribe)(subscription));
}
};
};
@@ -139835,8 +139835,8 @@ var FilePage = function (_React$PureComponent) {
tab = _props.tab,
uri = _props.uri,
rewardedContentClaimIds = _props.rewardedContentClaimIds,
- channelSubscribe = _props.channelSubscribe,
- channelUnsubscribe = _props.channelUnsubscribe,
+ doChannelSubscribe = _props.doChannelSubscribe,
+ doChannelUnsubscribe = _props.doChannelUnsubscribe,
subscriptions = _props.subscriptions;
@@ -139875,7 +139875,7 @@ var FilePage = function (_React$PureComponent) {
return subscription.channelName;
}).indexOf(channelName) !== -1;
- subscriptionHandler = isSubscribed ? channelUnsubscribe : channelSubscribe;
+ subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
subscriptionLabel = isSubscribed ? "Unsubscribe" : "Subscribe";
subscriptionUri = _lbryuri2.default.build({ channelName: channelName, claimId: channelClaimId }, false);
diff --git a/src/renderer/page/channel/index.js b/src/renderer/page/channel/index.js
index e0580b2bc..4597fd573 100644
--- a/src/renderer/page/channel/index.js
+++ b/src/renderer/page/channel/index.js
@@ -15,11 +15,6 @@ import {
} from "redux/selectors/navigation";
import { doNavigate } from "redux/actions/navigation";
import { makeSelectTotalPagesForChannel } from "redux/selectors/content";
-import { selectSubscriptions } from "redux/selectors/subscriptions";
-import {
- channelSubscribe,
- channelUnsubscribe,
-} from "redux/actions/subscriptions";
import ChannelPage from "./view";
const select = (state, props) => ({
@@ -29,16 +24,12 @@ const select = (state, props) => ({
page: makeSelectCurrentParam("page")(state),
params: selectCurrentParams(state),
totalPages: makeSelectTotalPagesForChannel(props.uri)(state),
- subscriptions: selectSubscriptions(state),
});
const perform = dispatch => ({
fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)),
fetchClaimCount: uri => dispatch(doFetchClaimCountByChannel(uri)),
navigate: (path, params) => dispatch(doNavigate(path, params)),
- channelSubscribe: subscription => dispatch(channelSubscribe(subscription)),
- channelUnsubscribe: subscription =>
- dispatch(channelUnsubscribe(subscription)),
});
export default connect(select, perform)(ChannelPage);
diff --git a/src/renderer/page/channel/view.jsx b/src/renderer/page/channel/view.jsx
index 62905e871..94b726bcd 100644
--- a/src/renderer/page/channel/view.jsx
+++ b/src/renderer/page/channel/view.jsx
@@ -4,6 +4,7 @@ import { BusyMessage } from "component/common";
import FileTile from "component/fileTile";
import ReactPaginate from "react-paginate";
import Link from "component/link";
+import SubscribeButton from "component/subscribeButton";
class ChannelPage extends React.PureComponent {
componentDidMount() {
@@ -39,23 +40,12 @@ class ChannelPage extends React.PureComponent {
uri,
page,
totalPages,
- channelSubscribe,
- channelUnsubscribe,
+ doChannelSubscribe,
+ doChannelUnsubscribe,
subscriptions,
} = this.props;
const { name, claim_id: claimId } = claim;
-
- const isSubscribed =
- subscriptions
- .map(subscription => subscription.channelName)
- .indexOf(name) !== -1;
-
- const subscriptionHandler = isSubscribed
- ? channelUnsubscribe
- : channelSubscribe;
-
- const subscriptionLabel = isSubscribed ? "Unsubscribe" : "Subscribe";
const subscriptionUri = lbryuri.build(
{ channelName: name, claimId },
false
@@ -89,18 +79,7 @@ class ChannelPage extends React.PureComponent {
{uri}
-
-
- subscriptionHandler({
- channelName: name,
- uri: subscriptionUri,
- })
- }
- />
-
+
diff --git a/src/renderer/page/file/index.js b/src/renderer/page/file/index.js
index fdfa68eec..ba1fc3398 100644
--- a/src/renderer/page/file/index.js
+++ b/src/renderer/page/file/index.js
@@ -1,14 +1,8 @@
-import React from "react";
import { connect } from "react-redux";
import { doNavigate } from "redux/actions/navigation";
import { doFetchFileInfo } from "redux/actions/file_info";
-import {
- channelSubscribe,
- channelUnsubscribe,
-} from "redux/actions/subscriptions";
import { makeSelectFileInfoForUri } from "redux/selectors/file_info";
import { selectRewardContentClaimIds } from "redux/selectors/content";
-import { selectSubscriptions } from "redux/selectors/subscriptions";
import { doFetchCostInfoForUri } from "redux/actions/cost_info";
import {
makeSelectClaimForUri,
@@ -29,16 +23,13 @@ const select = (state, props) => ({
tab: makeSelectCurrentParam("tab")(state),
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
- subscriptions: selectSubscriptions(state),
+
});
const perform = dispatch => ({
navigate: (path, params) => dispatch(doNavigate(path, params)),
fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)),
fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
- channelSubscribe: subscription => dispatch(channelSubscribe(subscription)),
- channelUnsubscribe: subscription =>
- dispatch(channelUnsubscribe(subscription)),
});
export default connect(select, perform)(FilePage);
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index ddbdd7661..6b91cd138 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -11,6 +11,7 @@ import WalletSendTip from "component/walletSendTip";
import DateTime from "component/dateTime";
import * as icons from "constants/icons";
import Link from "component/link";
+import SubscribeButton from "component/subscribeButton";
class FilePage extends React.PureComponent {
componentDidMount() {
@@ -43,9 +44,6 @@ class FilePage extends React.PureComponent {
tab,
uri,
rewardedContentClaimIds,
- channelSubscribe,
- channelUnsubscribe,
- subscriptions,
} = this.props;
const showTipBox = tab == "tip";
@@ -56,7 +54,6 @@ class FilePage extends React.PureComponent {
);
}
- const { height, channel_name: channelName, value } = claim;
const title = metadata.title;
const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
const mediaType = lbry.getMediaType(contentType);
@@ -65,30 +62,14 @@ class FilePage extends React.PureComponent {
const isPlayable =
Object.values(player.mime).indexOf(contentType) !== -1 ||
mediaType === "audio";
-
+ const { height, channel_name: channelName, value } = claim;
const channelClaimId =
value &&
value.publisherSignature &&
value.publisherSignature.certificateId;
- const canSubscribe = !!channelName && !!channelClaimId;
-
- let isSubscribed;
- let subscriptionHandler;
- let subscriptionLabel;
let subscriptionUri;
-
- if (canSubscribe) {
- isSubscribed =
- subscriptions
- .map(subscription => subscription.channelName)
- .indexOf(channelName) !== -1;
-
- subscriptionHandler = isSubscribed
- ? channelUnsubscribe
- : channelSubscribe;
-
- subscriptionLabel = isSubscribed ? "Unsubscribe" : "Subscribe";
+ if (channelName && channelClaimId) {
subscriptionUri = lbryuri.build(
{ channelName, claimId: channelClaimId },
false
@@ -131,20 +112,7 @@ class FilePage extends React.PureComponent {
- {canSubscribe && (
-
-
- subscriptionHandler({
- channelName,
- uri: subscriptionUri,
- })
- }
- label={subscriptionLabel}
- />
-
- )}
+
)}
diff --git a/src/renderer/redux/actions/subscriptions.js b/src/renderer/redux/actions/subscriptions.js
index 6cbff9d2c..6ec76f2bd 100644
--- a/src/renderer/redux/actions/subscriptions.js
+++ b/src/renderer/redux/actions/subscriptions.js
@@ -3,7 +3,7 @@ import * as actions from "constants/action_types";
import type { Subscription, Action, Dispatch } from "redux/reducers/subscriptions";
import lbry from "lbry";
-export const channelSubscribe = (subscription: Subscription) => (
+export const doChannelSubscribe = (subscription: Subscription) => (
dispatch: Dispatch
) => {
return dispatch({
@@ -12,7 +12,7 @@ export const channelSubscribe = (subscription: Subscription) => (
});
};
-export const channelUnsubscribe = (subscription: Subscription) => (
+export const doChannelUnsubscribe = (subscription: Subscription) => (
dispatch: Dispatch
) => {
return dispatch({
diff --git a/src/renderer/redux/reducers/subscriptions.js b/src/renderer/redux/reducers/subscriptions.js
index 551d35cad..23e9ef50e 100644
--- a/src/renderer/redux/reducers/subscriptions.js
+++ b/src/renderer/redux/reducers/subscriptions.js
@@ -14,12 +14,12 @@ export type Subscription = {
};
// Subscription action types
-type ChannelSubscribe = {
+type doChannelSubscribe = {
type: actions.CHANNEL_SUBSCRIBE,
data: Subscription,
};
-type ChannelUnsubscribe = {
+type doChannelUnsubscribe = {
type: actions.CHANNEL_UNSUBSCRIBE,
data: Subscription,
};
@@ -28,7 +28,7 @@ type HasFetchedSubscriptions = {
type: actions.HAS_FETCHED_SUBSCRIPTIONS
}
-export type Action = ChannelSubscribe | ChannelUnsubscribe | HasFetchedSubscriptions;
+export type Action = doChannelSubscribe | doChannelUnsubscribe | HasFetchedSubscriptions;
export type Dispatch = (action: Action) => any;
const defaultState = {
@@ -40,7 +40,7 @@ export default handleActions(
{
[actions.CHANNEL_SUBSCRIBE]: (
state: SubscriptionState,
- action: ChannelSubscribe
+ action: doChannelSubscribe
): SubscriptionState => {
const newSubscription: Subscription = action.data;
let newSubscriptions: Array = state.subscriptions.slice();
@@ -53,7 +53,7 @@ export default handleActions(
},
[actions.CHANNEL_UNSUBSCRIBE]: (
state: SubscriptionState,
- action: ChannelUnsubscribe
+ action: doChannelUnsubscribe
): SubscriptionState => {
const subscriptionToRemove: Subscription = action.data;