use common subscribeButton component

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);

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 ? (
+    <div className="card__actions">
+      <Link
+        button={isSubscribed ? "alt" : "primary"}
+        label={subscriptionLabel}
+        onClick={() => subscriptionHandler({
+          channelName,
+          uri,
+        })}
+      />
+    </div>
+  ) : "";
+}

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) {
+    doChannelSubscribe: function doChannelSubscribe(subscription) {
-      return dispatch((0, _subscriptions2.channelSubscribe)(subscription));
+      return dispatch((0, _subscriptions2.doChannelSubscribe)(subscription));
     },
-    channelUnsubscribe: function channelUnsubscribe(subscription) {
+    doChannelUnsubscribe: function doChannelUnsubscribe(subscription) {
-      return dispatch((0, _subscriptions2.channelUnsubscribe)(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,
+          doChannelSubscribe = _props3.doChannelSubscribe,
-          channelUnsubscribe = _props3.channelUnsubscribe,
+          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) {
+    doChannelSubscribe: function doChannelSubscribe(subscription) {
-      return dispatch((0, _subscriptions.channelSubscribe)(subscription));
+      return dispatch((0, _subscriptions.doChannelSubscribe)(subscription));
     },
-    channelUnsubscribe: function channelUnsubscribe(subscription) {
+    doChannelUnsubscribe: function doChannelUnsubscribe(subscription) {
-      return dispatch((0, _subscriptions.channelUnsubscribe)(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,
+          doChannelSubscribe = _props.doChannelSubscribe,
-          channelUnsubscribe = _props.channelUnsubscribe,
+          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);

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);

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,
+      doChannelSubscribe,
-      channelUnsubscribe,
+      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 {
             <div className="card__title-identity">
               <h1>{uri}</h1>
             </div>
-            <div className="card__actions">
+            <SubscribeButton uri={uri} channelName={name} />
-              <Link
-                button="primary"
-                label={subscriptionLabel}
-                onClick={() =>
-                  subscriptionHandler({
-                    channelName: name,
-                    uri: subscriptionUri,
-                  })
-                }
-              />
-            </div>
           </div>
           <div className="card__content">
             <p className="empty">

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);

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 (channelName && channelClaimId) {
-    if (canSubscribe) {
-      isSubscribed =
-        subscriptions
-          .map(subscription => subscription.channelName)
-          .indexOf(channelName) !== -1;
-
-      subscriptionHandler = isSubscribed
-        ? channelUnsubscribe
-        : channelSubscribe;
-
-      subscriptionLabel = isSubscribed ? "Unsubscribe" : "Subscribe";
       subscriptionUri = lbryuri.build(
         { channelName, claimId: channelClaimId },
         false
@@ -131,20 +112,7 @@ class FilePage extends React.PureComponent {
                   </span>
                 </div>
               </div>
-              {canSubscribe && (
+              <SubscribeButton uri={subscriptionUri} channelName={channelName} />
-                <div className="card__actions">
-                  <Link
-                    button="primary"
-                    onClick={() =>
-                      subscriptionHandler({
-                        channelName,
-                        uri: subscriptionUri,
-                      })
-                    }
-                    label={subscriptionLabel}
-                  />
-                </div>
-              )}
               <FileDetails uri={uri} />
             </div>
           )}

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({

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<Subscription> = 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;