ui/component/claimRepostButton/index.js

@@ -0,0 +1,6 @@
+import { connect  } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { doToast } from 'redux/actions/notifications';
+import ClaimReportButton from './view';
+
+export default connect(null, { doOpenModal, doToast })(ClaimReportButton);

ui/component/claimRepostButton/view.jsx

@@ -0,0 +1,43 @@
+// @flow
+import { SITE_NAME } from 'config';
+import * as PAGES from 'constants/pages';
+import * as MODALS from 'constants/modal_types';
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+    uri: string,
+    claim: StreamClaim,
+    hasChannels: boolean,
+    doOpenModal: (string, {}) => void,
+    doToast: ({ message: string }) => void,
+};
+
+
+export default function ClaimRepostButton(props: Props) {
+    const { uri, claim, hasChannels, doOpenModal, doToast }  = props;
+
+    return (
+        <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={() => {
+              if (!hasChannels) {
+                doToast({
+                  message: __('A channel is required to repost on %SITE_NAME%', { SITE_NAME }),
+                  linkText: __('Create Channel'),
+                  linkTarget: '/channel/new',
+                });
+              } else {
+                doOpenModal(MODALS.REPOST, { uri })
+              }}}
+        />
+   );
+}

ui/component/fileActions/view.jsx

@@ -16,6 +16,7 @@ import { useHistory } from 'react-router';
 import FileReactions from 'component/fileReactions';
 import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
+import ClaimRepostButton from 'component/claimRepostButton';
 
 type Props = {
   uri: string,
@@ -82,33 +83,13 @@ function FileActions(props: Props) {
   const urlParams = new URLSearchParams(search);
   const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
 
-  function handleRepostClick() {
-    if (!hasChannels) {
-      clearPlayingUri();
-      push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`);
-      doToast({ message: __('A channel is required to repost on %SITE_NAME%', { SITE_NAME }) });
-    } else {
-      push(`/$/${PAGES.REPOST_NEW}?from=${encodeURIComponent(uri)}&redirect=${pathname}`);
-    }
-  }
-
   const lhsSection = (
     <>
       {ENABLE_FILE_REACTIONS && !reactionsDisabled && <FileReactions uri={uri} />}
       <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}
-        />
+        <ClaimRepostButton uri={uri} claim={claim} hasChannels={hasChannels} />
       )}
       <Button
         className="button--file-action"

ui/component/repostCreate/view.jsx

@@ -23,6 +23,7 @@ type Props = {
   doToast: ({ message: string }) => void,
   doClearRepostError: () => void,
   doRepost: (StreamRepostOptions) => Promise<*>,
+  doHideModal: () => void,
   title: string,
   claim?: StreamClaim,
   enteredContentClaim?: StreamClaim,
@@ -33,11 +34,7 @@ type Props = {
   reposting: boolean,
   uri: string,
   name: string,
-  contentUri: string,
-  setRepostUri: (string) => void,
-  setContentUri: (string) => void,
   doCheckPendingClaims: () => void,
-  redirectUri?: string,
   passedRepostAmount: number,
   enteredRepostAmount: number,
   isResolvingPassedRepost: boolean,
@@ -49,7 +46,6 @@ type Props = {
 
 function RepostCreate(props: Props) {
   const {
-    redirectUri,
     doToast,
     doClearRepostError,
     doRepost,
@@ -60,9 +56,6 @@ function RepostCreate(props: Props) {
     doCheckPublishNameAvailability,
     uri, // ?from
     name, // ?to
-    contentUri,
-    setRepostUri,
-    setContentUri,
     doCheckPendingClaims,
     enteredRepostAmount,
     passedRepostAmount,
@@ -71,6 +64,7 @@ function RepostCreate(props: Props) {
     activeChannelClaim,
     fetchingMyChannels,
     incognito,
+    doHideModal,
   } = props;
 
   const defaultName = name || (claim && claim.name) || '';
@@ -82,6 +76,8 @@ function RepostCreate(props: Props) {
   const [enteredRepostName, setEnteredRepostName] = React.useState(defaultName);
   const [available, setAvailable] = React.useState(true);
   const [enteredContent, setEnteredContentUri] = React.useState(undefined);
+  const [contentUri, setContentUri] = React.useState('');
+  const [repostUri, setRepostUri] = React.useState('');
   const [contentError, setContentError] = React.useState('');
 
   const { replace, goBack } = useHistory();
@@ -256,28 +252,6 @@ function RepostCreate(props: Props) {
 
   const repostClaimId = contentClaimId || enteredClaimId;
 
-  const getRedirect = (entered, passed, redirect) => {
-    if (redirect) {
-      return redirect;
-    } else if (entered) {
-      try {
-        const { claimName } = parseURI(entered);
-        return claimName ? `/${claimName}` : '/';
-      } catch (e) {
-        return '/';
-      }
-    } else if (passed) {
-      try {
-        const { claimName } = parseURI(passed);
-        return claimName ? `/${claimName}` : '/';
-      } catch (e) {
-        return '/';
-      }
-    } else {
-      return '/';
-    }
-  };
-
   function handleSubmit() {
     if (enteredRepostName && repostBid && repostClaimId) {
       doRepost({
@@ -293,14 +267,14 @@ function RepostCreate(props: Props) {
           linkText: __('Uploads'),
           linkTarget: '/uploads',
         });
-        replace(getRedirect(contentUri, uri, redirectUri));
+        doHideModal();
       });
     }
   }
 
   function cancelIt() {
     doClearRepostError();
-    goBack();
+    doHideModal();
   }
 
   if (fetchingMyChannels) {

ui/constants/modal_types.js

@@ -19,6 +19,7 @@ export const AFFIRM_PURCHASE = 'affirm_purchase';
 export const CONFIRM_CLAIM_REVOKE = 'confirm_claim_revoke';
 export const FIRST_SUBSCRIPTION = 'firstSubscription';
 export const SEND_TIP = 'send_tip';
+export const REPOST = 'repost';
 export const CONFIRM_SEND_TIP = 'confirm_send_tip';
 export const SOCIAL_SHARE = 'social_share';
 export const PUBLISH = 'publish';

ui/modal/modalRepost/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import ModalRepost from './view';
+
+const perform = dispatch => ({
+    closeModal: () => dispatch(doHideModal()),
+})
+
+export default connect(null, perform)(ModalRepost);

ui/modal/modalRepost/view.jsx

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import RepostCreate from 'component/repostCreate';
+
+type Props = {
+    closeModal: () => void,
+    uri: string,
+}
+
+class ModalRepost extends React.PureComponent<Props> {
+    render() {
+        const { closeModal, uri } = this.props;
+
+        return (
+            <Modal onAborted={closeModal} isOpen type="card">
+                <RepostCreate uri={uri} name={null} onCancel={closeModal} />
+            </Modal>
+        );
+    }
+}
+
+export default ModalRepost;

ui/modal/modalRouter/view.jsx

@@ -53,6 +53,7 @@ import ModalRemoveFile from 'modal/modalRemoveFile';
 import ModalRevokeClaim from 'modal/modalRevokeClaim';
 import ModalRewardCode from 'modal/modalRewardCode';
 import ModalSendTip from 'modal/modalSendTip';
+import ModalRepost from 'modal/modalRepost';
 import ModalSetReferrer from 'modal/modalSetReferrer';
 import ModalSignOut from 'modal/modalSignOut';
 import ModalSocialShare from 'modal/modalSocialShare';
@@ -124,6 +125,8 @@ function ModalRouter(props: Props) {
         return ModalFirstSubscription;
       case MODALS.SEND_TIP:
         return ModalSendTip;
+      case MODALS.REPOST:
+        return ModalRepost;
       case MODALS.SOCIAL_SHARE:
         return ModalSocialShare;
       case MODALS.PUBLISH: