Refactor fileActions

- moved doPrepareEdit incognito and channel calls to separate action - same with download - Tooltips - No major differences between mobile or default returned components so removed condition since mobile style will be changed later on this branch
2022-02-01 17:11:35 -03:00 · 2022-02-01 17:11:35 -03:00 · 5794432288
commit 5794432288
parent 1fb154f7fe
6 changed files with 133 additions and 153 deletions
--- a/ui/component/claimMenuList/index.js
+++ b/ui/component/claimMenuList/index.js
@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
 import { doCollectionEdit, doFetchItemsInCollection } from 'redux/actions/collections';
-import { doPrepareEdit } from 'redux/actions/publish';
+import { doEditForChannel } from 'redux/actions/publish';
 import {
  makeSelectCollectionForIdHasClaimUrl,
  makeSelectCollectionIsMine,
@ -12,7 +12,7 @@ import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
 import * as COLLECTIONS_CONSTS from 'constants/collections';
 import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { doChannelMute, doChannelUnmute } from 'redux/actions/blocked';
-import { doSetActiveChannel, doSetIncognito, doOpenModal } from 'redux/actions/app';
+import { doOpenModal } from 'redux/actions/app';
 import {
  doCommentModBlock,
  doCommentModUnBlock,
@ -76,16 +76,7 @@ const select = (state, props) => {
 };

 const perform = (dispatch) => ({
-  prepareEdit: (publishData, uri, fileInfo) => {
-    if (publishData.signing_channel) {
-      dispatch(doSetIncognito(false));
-      dispatch(doSetActiveChannel(publishData.signing_channel.claim_id));
-    } else {
-      dispatch(doSetIncognito(true));
-    }
-
-    dispatch(doPrepareEdit(publishData, uri, fileInfo, fs));
-  },
+  prepareEdit: (publishData, uri, fileInfo) => doEditForChannel(publishData, uri, fileInfo, fs),
  doToast: (props) => dispatch(doToast(props)),
  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
  doChannelMute: (channelUri) => dispatch(doChannelMute(channelUri)),
--- a/ui/component/fileActions/index.js
+++ b/ui/component/fileActions/index.js
@ -6,48 +6,39 @@ import {
  selectIsStreamPlaceholderForUri,
  makeSelectTagInClaimOrChannelForUri,
 } from 'redux/selectors/claims';
-import { makeSelectStreamingUrlForUri, makeSelectFileInfoForUri } from 'redux/selectors/file_info';
-import { doPrepareEdit } from 'redux/actions/publish';
+import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
+import { doEditForChannel } from 'redux/actions/publish';
 import { selectCostInfoForUri } from 'lbryinc';
-import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
+import { doClearPlayingUri, doDownloadUri } from 'redux/actions/content';
 import { doToast } from 'redux/actions/notifications';
-import { doOpenModal, doSetActiveChannel, doSetIncognito, doAnalyticsView } from 'redux/actions/app';
-import fs from 'fs';
+import { doOpenModal } from 'redux/actions/app';
 import FileActions from './view';
 import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
 import { DISABLE_DOWNLOAD_BUTTON_TAG } from 'constants/tags';

 const select = (state, props) => {
-  const claim = selectClaimForUri(state, props.uri);
+  const { uri } = props;
+
+  const claim = selectClaimForUri(state, uri);

  return {
    claim,
    claimIsMine: selectClaimIsMine(state, claim),
-    fileInfo: makeSelectFileInfoForUri(props.uri)(state),
-    renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
-    costInfo: selectCostInfoForUri(state, props.uri),
+    renderMode: makeSelectFileRenderModeForUri(uri)(state),
+    costInfo: selectCostInfoForUri(state, uri),
    hasChannels: selectHasChannels(state),
-    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, props.uri),
-    streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
+    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, uri),
+    streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
    disableDownloadButton: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_DOWNLOAD_BUTTON_TAG)(state),
  };
 };

-const perform = (dispatch) => ({
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  prepareEdit: (publishData, uri, fileInfo) => {
-    if (publishData.signing_channel) {
-      dispatch(doSetIncognito(false));
-      dispatch(doSetActiveChannel(publishData.signing_channel.claim_id));
-    } else {
-      dispatch(doSetIncognito(true));
-    }
-
-    dispatch(doPrepareEdit(publishData, uri, fileInfo, fs));
-  },
-  clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
-  doToast: (options) => dispatch(doToast(options)),
-  download: (uri) => dispatch(doPlayUri(uri, false, true, () => dispatch(doAnalyticsView(uri)))),
-});
+const perform = {
+  doOpenModal,
+  doEditForChannel,
+  doClearPlayingUri,
+  doToast,
+  doDownloadUri,
+};

 export default connect(select, perform)(FileActions);
--- a/ui/component/fileActions/view.jsx
+++ b/ui/component/fileActions/view.jsx
@ -5,11 +5,9 @@ import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
-import FileDownloadLink from 'component/fileDownloadLink';
 import { buildURI } from 'util/lbryURI';
 import * as COLLECTIONS_CONSTS from 'constants/collections';
 import * as RENDER_MODES from 'constants/file_render_modes';
-import { useIsMobile } from 'effects/use-screensize';
 import ClaimSupportButton from 'component/claimSupportButton';
 import ClaimCollectionAddButton from 'component/claimCollectionAddButton';
 import { useHistory } from 'react-router';
@ -17,56 +15,60 @@ import FileReactions from 'component/fileReactions';
 import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
 import { webDownloadClaim } from 'util/downloadClaim';
+import Tooltip from 'component/common/tooltip';

 type Props = {
  uri: string,
-  claim: StreamClaim,
-  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
-  prepareEdit: ({}, string, {}) => void,
-  claimIsMine: boolean,
-  fileInfo: FileListItem,
-  costInfo: ?{ cost: number },
-  renderMode: string,
-  hasChannels: boolean,
-  doToast: ({ message: string }) => void,
-  clearPlayingUri: () => void,
  hideRepost?: boolean,
+  // redux
+  claim: StreamClaim,
+  claimIsMine: boolean,
+  renderMode: string,
+  costInfo: ?{ cost: number },
+  hasChannels: boolean,
  isLivestreamClaim: boolean,
-  download: (string) => void,
  streamingUrl: ?string,
  disableDownloadButton: boolean,
+  doOpenModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
+  doEditForChannel: (claim: Claim, uri: string) => void,
+  doClearPlayingUri: () => void,
+  doToast: (data: { message: string }) => void,
+  doDownloadUri: (uri: string) => void,
 };

-function FileActions(props: Props) {
+export default function FileActions(props: Props) {
  const {
-    fileInfo,
    uri,
-    openModal,
    claimIsMine,
    claim,
    costInfo,
    renderMode,
-    prepareEdit,
    hasChannels,
-    clearPlayingUri,
-    doToast,
    hideRepost,
    isLivestreamClaim,
-    download,
    streamingUrl,
    disableDownloadButton,
+    doOpenModal,
+    doEditForChannel,
+    doClearPlayingUri,
+    doToast,
+    doDownloadUri,
  } = props;
+
  const {
    push,
    location: { pathname, search },
  } = useHistory();
-  const isMobile = useIsMobile();
-  const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
-  const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0));
-  const claimId = claim && claim.claim_id;
-  const { signing_channel: signingChannel } = claim;
+
+  const [downloadClicked, setDownloadClicked] = React.useState(false);
+
+  const { claim_id: claimId, signing_channel: signingChannel, value, meta: claimMeta } = claim;
  const channelName = signingChannel && signingChannel.name;
-  const fileName = claim && claim.value && claim.value.source && claim.value.source.name;
+  const fileName = value && value.source && value.source.name;
+
+  const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
+  const urlParams = new URLSearchParams(search);
+  const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);

  // We want to use the short form uri for editing
  // This is what the user is used to seeing, they don't care about the claim id
@ -84,15 +86,9 @@ function FileActions(props: Props) {
    editUri = buildURI(uriObject);
  }

-  const urlParams = new URLSearchParams(search);
-  const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
-
-  // @if TARGET='web'
-  const [downloadClicked, setDownloadClicked] = React.useState(false);
-
  function handleWebDownload() {
-    // download() causes 'streamingUrl' to be populated.
-    download(uri);
+    // doDownloadUri() causes 'streamingUrl' to be populated.
+    doDownloadUri(uri);
    setDownloadClicked(true);
  }

@ -102,11 +98,10 @@ function FileActions(props: Props) {
      setDownloadClicked(false);
    }
  }, [downloadClicked, streamingUrl, fileName]);
-  // @endif

  function handleRepostClick() {
    if (!hasChannels) {
-      clearPlayingUri();
+      doClearPlayingUri();
      push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`);
      doToast({ message: __('A channel is required to repost on %SITE_NAME%', { SITE_NAME }) });
    } else {
@ -114,59 +109,63 @@ function FileActions(props: Props) {
    }
  }

-  const lhsSection = (
-    <>
-      {ENABLE_FILE_REACTIONS && <FileReactions uri={uri} livestream={isLivestreamClaim} />}
-      <ClaimSupportButton uri={uri} fileAction />
-      <ClaimCollectionAddButton uri={uri} fileAction />
-      {!hideRepost && (
-        <Button
-          button="alt"
-          className="button--file-action"
-          icon={ICONS.REPOST}
-          label={
-            claim.meta.reposted > 1 ? __(`%repost_total% Reposts`, { repost_total: claim.meta.reposted }) : __('Repost')
-          }
-          description={__('Repost')}
-          requiresAuth={IS_WEB}
-          onClick={handleRepostClick}
-        />
-      )}
-      <Button
-        className="button--file-action"
-        icon={ICONS.SHARE}
-        label={isMobile ? undefined : __('Share')}
-        title={__('Share')}
-        onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable, collectionId })}
-      />
-    </>
-  );
+  return (
+    <div className="media__actions section__actions--no-margin">
+      {ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}
+
+      <ClaimSupportButton uri={uri} fileAction />
+
+      <ClaimCollectionAddButton uri={uri} fileAction />
+
+      {!hideRepost && (
+        <Tooltip title={__('Repost')} arrow={false}>
+          <Button
+            button="alt"
+            className="button--file-action"
+            icon={ICONS.REPOST}
+            label={
+              claimMeta.reposted > 1 ? __(`%repost_total% Reposts`, { repost_total: claimMeta.reposted }) : __('Repost')
+            }
+            requiresAuth
+            onClick={handleRepostClick}
+          />
+        </Tooltip>
+      )}
+
+      <Tooltip title={__('Share')} arrow={false}>
+        <Button
+          className="button--file-action"
+          icon={ICONS.SHARE}
+          label={__('Share')}
+          onClick={() => doOpenModal(MODALS.SOCIAL_SHARE, { uri, webShareable, collectionId })}
+        />
+      </Tooltip>

-  const rhsSection = (
-    <>
-      {/* @if TARGET='app' */}
-      <FileDownloadLink uri={uri} />
-      {/* @endif */}
      {claimIsMine && (
-        <Button
-          className="button--file-action"
-          icon={ICONS.EDIT}
-          label={isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')}
-          navigate={`/$/${PAGES.UPLOAD}`}
-          onClick={() => {
-            prepareEdit(claim, editUri, fileInfo);
-          }}
-        />
-      )}
-      {showDelete && (
-        <Button
-          title={__('Remove from your library')}
-          className="button--file-action"
-          icon={ICONS.DELETE}
-          description={__('Delete')}
-          onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
-        />
+        <>
+          <Tooltip title={isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')} arrow={false}>
+            <div style={{ margin: '0px' }}>
+              <Button
+                className="button--file-action"
+                icon={ICONS.EDIT}
+                label={isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')}
+                navigate={`/$/${PAGES.UPLOAD}`}
+                onClick={() => doEditForChannel(claim, editUri)}
+              />
+            </div>
+          </Tooltip>
+
+          <Tooltip title={__('Remove from your library')} arrow={false}>
+            <Button
+              className="button--file-action"
+              icon={ICONS.DELETE}
+              description={__('Delete')}
+              onClick={() => doOpenModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
+            />
+          </Tooltip>
+        </>
      )}
+
      {(!isLivestreamClaim || !claimIsMine) && (
        <Menu>
          <MenuButton
@ -178,8 +177,8 @@ function FileActions(props: Props) {
          >
            <Icon size={20} icon={ICONS.MORE} />
          </MenuButton>
+
          <MenuList className="menu__list">
-            {/* @if TARGET='web' */}
            {!isLivestreamClaim && !disableDownloadButton && (
              <MenuItem className="comment__menu-option" onSelect={handleWebDownload}>
                <div className="menu__link">
@ -188,7 +187,7 @@ function FileActions(props: Props) {
                </div>
              </MenuItem>
            )}
-            {/* @endif */}
+
            {!claimIsMine && (
              <MenuItem
                className="comment__menu-option"
@ -203,26 +202,6 @@ function FileActions(props: Props) {
          </MenuList>
        </Menu>
      )}
-    </>
+    </div>
  );
-
-  if (isMobile) {
-    return (
-      <div className="media__actions">
-        {lhsSection}
-        {rhsSection}
-      </div>
-    );
-  } else {
-    return (
-      <div className="media__actions">
-        <div className="section__actions section__actions--no-margin">
-          {lhsSection}
-          {rhsSection}
-        </div>
-      </div>
-    );
-  }
 }
-
-export default FileActions;
--- a/ui/component/fileDownloadLink/index.js
+++ b/ui/component/fileDownloadLink/index.js
@ -7,8 +7,8 @@ import {
  makeSelectStreamingUrlForUri,
 } from 'redux/selectors/file_info';
 import { selectCostInfoForUri } from 'lbryinc';
-import { doOpenModal, doAnalyticsView } from 'redux/actions/app';
-import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
+import { doOpenModal } from 'redux/actions/app';
+import { doSetPlayingUri, doDownloadUri } from 'redux/actions/content';
 import FileDownloadLink from './view';

 const select = (state, props) => {
@ -29,7 +29,7 @@ const select = (state, props) => {
 const perform = (dispatch) => ({
  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
  pause: () => dispatch(doSetPlayingUri({ uri: null })),
-  download: (uri) => dispatch(doPlayUri(uri, false, true, () => dispatch(doAnalyticsView(uri)))),
+  download: (uri) => dispatch(doDownloadUri(uri)),
 });

 export default connect(select, perform)(FileDownloadLink);
--- a/ui/redux/actions/content.js
+++ b/ui/redux/actions/content.js
@ -4,7 +4,7 @@ import * as MODALS from 'constants/modal_types';
 // @if TARGET='app'
 import { ipcRenderer } from 'electron';
 // @endif
-import { doOpenModal } from 'redux/actions/app';
+import { doOpenModal, doAnalyticsView } from 'redux/actions/app';
 import { makeSelectClaimForUri, selectClaimIsMineForUri, makeSelectClaimWasPurchased } from 'redux/selectors/claims';
 import {
  makeSelectFileInfoForUri,
@ -105,6 +105,8 @@ export function doSetPrimaryUri(uri: ?string) {
  };
 }

+export const doClearPlayingUri = () => (dispatch: Dispatch) => dispatch(doSetPlayingUri({ uri: null }));
+
 export function doSetPlayingUri({
  uri,
  source,
@ -142,6 +144,10 @@ export function doPurchaseUriWrapper(uri: string, cost: number, saveFile: boolea
  };
 }

+export function doDownloadUri(uri: string) {
+  return (dispatch: Dispatch) => dispatch(doPlayUri(uri, false, true, () => dispatch(doAnalyticsView(uri))));
+}
+
 export function doPlayUri(
  uri: string,
  skipCostCheck: boolean = false,
--- a/ui/redux/actions/publish.js
+++ b/ui/redux/actions/publish.js
@ -17,7 +17,7 @@ import { makeSelectPublishFormValue, selectPublishFormValues, selectMyClaimForUr
 import { doError } from 'redux/actions/notifications';
 import { push } from 'connected-react-router';
 import analytics from 'analytics';
-import { doOpenModal } from 'redux/actions/app';
+import { doOpenModal, doSetIncognito, doSetActiveChannel } from 'redux/actions/app';
 import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses';
 import { IMG_CDN_PUBLISH_URL, IMG_CDN_STATUS_URL } from 'constants/cdn_urls';
 import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
@ -530,6 +530,19 @@ export const doUploadThumbnail = (
  }
 };

+export const doEditForChannel = (publishData: any, uri: string, fileInfo: FileListItem, fs: any) => (
+  dispatch: Dispatch
+) => {
+  if (publishData.signing_channel) {
+    dispatch(doSetIncognito(false));
+    dispatch(doSetActiveChannel(publishData.signing_channel.claim_id));
+  } else {
+    dispatch(doSetIncognito(true));
+  }
+
+  dispatch(doPrepareEdit(publishData, uri, fileInfo, fs));
+};
+
 export const doPrepareEdit = (claim: StreamClaim, uri: string, fileInfo: FileListItem, fs: any) => (
  dispatch: Dispatch
 ) => {