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;