Make Repost a Modal (#978)

ui/component/fileActions/index.js

@@ -8,7 +8,7 @@ import {
 import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
 import { doEditForChannel } from 'redux/actions/publish';
 import { selectCostInfoForUri } from 'lbryinc';
-import { doClearPlayingUri, doDownloadUri } from 'redux/actions/content';
+import { doDownloadUri } from 'redux/actions/content';
 import { doToast } from 'redux/actions/notifications';
 import { doOpenModal } from 'redux/actions/app';
 import FileActions from './view';
@@ -36,7 +36,6 @@ const select = (state, props) => {
 const perform = {
   doOpenModal,
   doEditForChannel,
-  doClearPlayingUri,
   doToast,
   doDownloadUri,
 };

ui/component/fileActions/view.jsx

@@ -32,7 +32,6 @@ type Props = {
   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,
 };
@@ -51,14 +50,13 @@ export default function FileActions(props: Props) {
     disableDownloadButton,
     doOpenModal,
     doEditForChannel,
-    doClearPlayingUri,
     doToast,
     doDownloadUri,
   } = props;
 
   const {
     push,
-    location: { pathname, search },
+    location: { search },
   } = useHistory();
 
   const isMobile = useIsMobile();
@@ -104,13 +102,13 @@ export default function FileActions(props: Props) {
 
   function handleRepostClick() {
     if (!hasChannels) {
-      doClearPlayingUri();
-      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=${encodeURIComponent(pathname)}`);
+      return;
     }
+
+    doOpenModal(MODALS.REPOST, { uri });
   }
+
   return (
     <div className="media__actions">
       {ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}

ui/component/repostCreate/view.jsx

@@ -1,9 +1,7 @@
 // @flow
-
 import * as ICONS from 'constants/icons';
 import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
 import React from 'react';
-import { useHistory } from 'react-router';
 import Card from 'component/common/card';
 import Button from 'component/button';
 import ChannelSelector from 'component/channelSelector';
@@ -23,6 +21,7 @@ type Props = {
   doToast: ({ message: string }) => void,
   doClearRepostError: () => void,
   doRepost: (StreamRepostOptions) => Promise<*>,
+  doHideModal: () => void,
   title: string,
   claim?: StreamClaim,
   enteredContentClaim?: StreamClaim,
@@ -36,7 +35,6 @@ type Props = {
   setRepostUri: (string) => void,
   setContentUri: (string) => void,
   doCheckPendingClaims: () => void,
-  redirectUri?: string,
   passedRepostAmount: number,
   enteredRepostAmount: number,
   isResolvingPassedRepost: boolean,
@@ -48,10 +46,10 @@ type Props = {
 
 function RepostCreate(props: Props) {
   const {
-    redirectUri,
     doToast,
     doClearRepostError,
     doRepost,
+    doHideModal,
     claim,
     enteredContentClaim,
     balance,
@@ -83,7 +81,6 @@ function RepostCreate(props: Props) {
   const [enteredContent, setEnteredContentUri] = React.useState(undefined);
   const [contentError, setContentError] = React.useState('');
 
-  const { replace, goBack } = useHistory();
   const resolvingRepost = isResolvingEnteredRepost || isResolvingPassedRepost;
   const repostUrlName = `lbry://${incognito || !activeChannelClaim ? '' : `${activeChannelClaim.name}/`}`;
 
@@ -255,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({
@@ -292,14 +267,14 @@ function RepostCreate(props: Props) {
           linkText: __('Uploads'),
           linkTarget: '/uploads',
         });
-        replace(getRedirect(contentUri, uri, redirectUri));
+        doHideModal();
       });
     }
   }
 
   function cancelIt() {
     doClearRepostError();
-    goBack();
+    doHideModal();
   }
 
   if (fetchingMyChannels) {
@@ -312,12 +287,12 @@ function RepostCreate(props: Props) {
 
   return (
     <>
-      <ChannelSelector />
-
       <Card
+        title={__('Repost')}
         className="repost-wrapper"
         actions={
           <div>
+            <ChannelSelector />
             {uri && (
               <fieldset-section>
                 <ClaimPreview key={uri} uri={uri} actions={''} showNullPlaceholder />

ui/component/router/view.jsx

@@ -83,7 +83,6 @@ const PasswordSetPage = lazyImport(() => import('page/passwordSet' /* webpackChu
 const PublishPage = lazyImport(() => import('page/publish' /* webpackChunkName: "publish" */));
 const ReportContentPage = lazyImport(() => import('page/reportContent' /* webpackChunkName: "reportContent" */));
 const ReportPage = lazyImport(() => import('page/report' /* webpackChunkName: "report" */));
-const RepostNew = lazyImport(() => import('page/repost' /* webpackChunkName: "repost" */));
 const RewardsPage = lazyImport(() => import('page/rewards' /* webpackChunkName: "rewards" */));
 const RewardsVerifyPage = lazyImport(() => import('page/rewardsVerify' /* webpackChunkName: "rewardsVerify" */));
 const SearchPage = lazyImport(() => import('page/search' /* webpackChunkName: "search" */));
@@ -347,7 +346,6 @@ function AppRouter(props: Props) {
         />
         <PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
         <PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
-        <PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
         <PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
         <PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
         <PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />

ui/component/searchTopClaim/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
 import { doResolveUris } from 'redux/actions/claims';
+import { doOpenModal } from 'redux/actions/app';
 import { selectPendingIds, makeSelectClaimForUri } from 'redux/selectors/claims';
 import { makeSelectWinningUriForQuery, selectIsResolvingWinningUri } from 'redux/selectors/search';
 import SearchTopClaim from './view';
@@ -25,6 +26,7 @@ const perform = (dispatch) => ({
     dispatch(push(`/$/${PAGES.UPLOAD}`));
   },
   doResolveUris: (uris) => dispatch(doResolveUris(uris)),
+  doOpenModal: (id, props) => dispatch(doOpenModal(id, props)),
 });
 
 export default connect(select, perform)(SearchTopClaim);

ui/component/searchTopClaim/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
+import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import { parseURI } from 'util/lbryURI';
 import ClaimPreview from 'component/claimPreview';
@@ -8,11 +9,11 @@ import Button from 'component/button';
 import ClaimEffectiveAmount from 'component/claimEffectiveAmount';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import I18nMessage from 'component/i18nMessage';
-import { useHistory } from 'react-router';
 import LbcSymbol from 'component/common/lbc-symbol';
 import { DOMAIN } from 'config';
 
 type Props = {
+  doOpenModal: (string, {}) => void,
   query: string,
   winningUri: ?string,
   doResolveUris: (Array<string>) => void,
@@ -28,6 +29,7 @@ type Props = {
 export default function SearchTopClaim(props: Props) {
   const {
     doResolveUris,
+    doOpenModal,
     query = '',
     winningUri,
     winningClaim,
@@ -38,7 +40,6 @@ export default function SearchTopClaim(props: Props) {
     isSearching,
   } = props;
   const uriFromQuery = `lbry://${query}`;
-  const { push } = useHistory();
   let name;
   let channelUriFromQuery;
   let winningUriIsChannel;
@@ -115,13 +116,7 @@ export default function SearchTopClaim(props: Props) {
         <div className="card card--section help--inline">
           <I18nMessage
             tokens={{
-              repost: (
-                <Button
-                  button="link"
-                  onClick={() => push(`/$/${PAGES.REPOST_NEW}${name ? `?to=${name}` : ''}`)}
-                  label={__('Repost')}
-                />
-              ),
+              repost: <Button button="link" onClick={() => doOpenModal(MODALS.REPOST, {})} label={__('Repost')} />,
               publish: (
                 <span>
                   <Button button="link" onClick={() => beginPublish(name)} label={__('publish')} />

ui/constants/modal_types.js

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

ui/constants/pageTitles.js

@@ -48,7 +48,6 @@ export const PAGE_TITLE = {
   [PAGES.RECEIVE]: 'Your address',
   [PAGES.REPORT]: 'Report an issue or request a feature',
   [PAGES.REPORT_CONTENT]: 'Report content',
-  [PAGES.REPOST_NEW]: 'Repost',
   [PAGES.REWARDS]: 'Rewards',
   [PAGES.REWARDS_VERIFY]: 'Verify to earn Credits',
   [PAGES.SEARCH]: 'Search',

ui/constants/pages.js

@@ -45,7 +45,6 @@ exports.REPORT = 'report';
 exports.REPORT_CONTENT = 'report_content';
 exports.REWARDS = 'rewards';
 exports.REWARDS_VERIFY = 'rewards/verify';
-exports.REPOST_NEW = 'repost';
 exports.SEND = 'send';
 exports.SETTINGS = 'settings';
 exports.SETTINGS_STRIPE_CARD = 'settings/card';

ui/modal/modalRepost/index.js

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

ui/modal/modalRepost/view.jsx

@@ -0,0 +1,64 @@
+// @flow
+import React from 'react';
+import { useHistory } from 'react-router';
+import Modal from 'modal/modal';
+import RepostCreate from 'component/repostCreate';
+import useThrottle from 'effects/use-throttle';
+
+type Props = {
+  uri?: string,
+  contentName?: string,
+  // --- redux ---
+  closeModal: () => void,
+  resolveUri: (string) => void,
+};
+
+function ModalRepost(props: Props) {
+  const { uri, contentName, closeModal, resolveUri } = props;
+
+  const {
+    location: { search },
+  } = useHistory();
+
+  const urlParams = new URLSearchParams(search);
+  const param = urlParams.get('name') || urlParams.get('q') || contentName;
+  const repostTo = param && param[0] === '@' ? param.slice(1) : param;
+
+  const [contentUri, setContentUri] = React.useState('');
+  const [repostUri, setRepostUri] = React.useState('');
+  const throttledContentValue = useThrottle(contentUri, 500);
+  const throttledRepostValue = useThrottle(repostUri, 500);
+
+  React.useEffect(() => {
+    if (throttledContentValue) {
+      resolveUri(throttledContentValue);
+    }
+  }, [throttledContentValue, resolveUri]);
+
+  React.useEffect(() => {
+    if (throttledRepostValue) {
+      resolveUri(throttledRepostValue);
+    }
+  }, [throttledRepostValue, resolveUri]);
+
+  React.useEffect(() => {
+    if (repostTo) {
+      resolveUri(repostTo);
+    }
+  }, [repostTo, resolveUri]);
+
+  return (
+    <Modal onAborted={closeModal} isOpen type="card">
+      <RepostCreate
+        uri={uri}
+        name={repostTo}
+        contentUri={contentUri}
+        repostUri={repostUri}
+        setContentUri={setContentUri}
+        setRepostUri={setRepostUri}
+      />
+    </Modal>
+  );
+}
+
+export default ModalRepost;

ui/modal/modalRouter/view.jsx

@@ -39,6 +39,7 @@ const MAP = Object.freeze({
   [MODALS.PHONE_COLLECTION]: lazyImport(() => import('modal/modalPhoneCollection' /* webpackChunkName: "modalPhoneCollection" */)),
   [MODALS.PUBLISH]: lazyImport(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */)),
   [MODALS.PUBLISH_PREVIEW]: lazyImport(() => import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */)),
+  [MODALS.REPOST]: lazyImport(() => import('modal/modalRepost' /* webpackChunkName: "modalRepost" */)),
   [MODALS.REWARD_GENERATED_CODE]: lazyImport(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */)),
   [MODALS.SEND_TIP]: lazyImport(() => import('modal/modalSendTip' /* webpackChunkName: "modalSendTip" */)),
   [MODALS.SET_REFERRER]: lazyImport(() => import('modal/modalSetReferrer' /* webpackChunkName: "modalSetReferrer" */)),

ui/page/repost/index.js

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import { doResolveUri } from 'redux/actions/claims';
-import { selectBalance } from 'redux/selectors/wallet';
-import RepostPage from './view';
-
-const select = (state, props) => ({
-  balance: selectBalance(state),
-});
-
-const perform = (dispatch) => ({
-  resolveUri: (uri) => dispatch(doResolveUri(uri)),
-});
-
-export default connect(select, perform)(RepostPage);

ui/page/repost/view.jsx

@@ -1,77 +0,0 @@
-// @flow
-import React from 'react';
-import Page from 'component/page';
-import { useHistory } from 'react-router';
-import RepostCreate from 'component/repostCreate';
-import YrblWalletEmpty from 'component/yrblWalletEmpty';
-import useThrottle from 'effects/use-throttle';
-import classnames from 'classnames';
-
-type Props = {
-  balance: number,
-  resolveUri: string => void,
-};
-function RepostPage(props: Props) {
-  const { balance, resolveUri } = props;
-
-  const REPOST_FROM = 'from';
-  const REPOST_TO = 'to';
-  const REDIRECT = 'redirect';
-  const {
-    location: { search },
-  } = useHistory();
-
-  const urlParams = new URLSearchParams(search);
-  const repostFrom = urlParams.get(REPOST_FROM);
-  const redirectUri = urlParams.get(REDIRECT);
-  const repostTo = urlParams.get(REPOST_TO);
-  const [contentUri, setContentUri] = React.useState('');
-  const [repostUri, setRepostUri] = React.useState('');
-  const throttledContentValue = useThrottle(contentUri, 500);
-  const throttledRepostValue = useThrottle(repostUri, 500);
-
-  React.useEffect(() => {
-    if (throttledContentValue) {
-      resolveUri(throttledContentValue);
-    }
-  }, [throttledContentValue, resolveUri]);
-
-  React.useEffect(() => {
-    if (throttledRepostValue) {
-      resolveUri(throttledRepostValue);
-    }
-  }, [throttledRepostValue, resolveUri]);
-
-  React.useEffect(() => {
-    if (repostTo) {
-      resolveUri(repostTo);
-    }
-  }, [repostTo, resolveUri]);
-
-  const decodedFrom = repostFrom && decodeURIComponent(repostFrom);
-  return (
-    <Page
-      noFooter
-      noSideNavigation
-      backout={{
-        title: __('Repost'),
-        backLabel: __('Back'),
-      }}
-    >
-      {balance === 0 && <YrblWalletEmpty />}
-      <div className={classnames({ 'card--disabled': balance === 0 })}>
-        <RepostCreate
-          uri={decodedFrom}
-          name={repostTo}
-          redirectUri={redirectUri}
-          repostUri={repostUri}
-          contentUri={contentUri}
-          setContentUri={setContentUri}
-          setRepostUri={setRepostUri}
-        />
-      </div>
-    </Page>
-  );
-}
-
-export default RepostPage;

ui/page/show/index.js

@@ -16,6 +16,7 @@ import {
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { doResolveUri } from 'redux/actions/claims';
 import { doBeginPublish } from 'redux/actions/publish';
+import { doOpenModal } from 'redux/actions/app';
 import { doFetchItemsInCollection } from 'redux/actions/collections';
 import { isStreamPlaceholderClaim } from 'util/claim';
 import { normalizeURI } from 'util/lbryURI';
@@ -91,6 +92,7 @@ const perform = {
   doResolveUri,
   doBeginPublish,
   doFetchItemsInCollection,
+  doOpenModal,
 };
 
 export default withRouter(connect(select, perform)(ShowPage));

ui/page/show/view.jsx

@@ -1,9 +1,8 @@
 // @flow
 import { DOMAIN, ENABLE_NO_SOURCE_CLAIMS } from 'config';
-import * as PAGES from 'constants/pages';
 import React, { useEffect } from 'react';
 import { lazyImport } from 'util/lazyImport';
-import { Redirect, useHistory } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
 import Spinner from 'component/spinner';
 import ChannelPage from 'page/channel';
 import Page from 'component/page';
@@ -13,6 +12,7 @@ import Yrbl from 'component/yrbl';
 import { formatLbryUrlForWeb } from 'util/url';
 import { parseURI } from 'util/lbryURI';
 import * as COLLECTIONS_CONSTS from 'constants/collections';
+import * as MODALS from 'constants/modal_types';
 
 const AbandonedChannelPreview = lazyImport(() =>
   import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
@@ -40,6 +40,7 @@ type Props = {
   doResolveUri: (uri: string, returnCached: boolean, resolveReposts: boolean, options: any) => void,
   doBeginPublish: (name: ?string) => void,
   doFetchItemsInCollection: ({ collectionId: string }) => void,
+  doOpenModal: (string, {}) => void,
 };
 
 export default function ShowPage(props: Props) {
@@ -62,9 +63,9 @@ export default function ShowPage(props: Props) {
     doResolveUri,
     doBeginPublish,
     doFetchItemsInCollection,
+    doOpenModal,
   } = props;
 
-  const { push } = useHistory();
   const { search, pathname, hash } = location;
   const urlParams = new URLSearchParams(search);
   const linkedCommentId = urlParams.get('lc');
@@ -190,8 +191,8 @@ export default function ShowPage(props: Props) {
                     />
                     <Button
                       button="secondary"
-                      onClick={() => push(`/$/${PAGES.REPOST_NEW}${contentName ? `?to=${contentName}` : ''}`)}
                       label={__('Repost Something')}
+                      onClick={() => doOpenModal(MODALS.REPOST, { contentName })}
                     />
                   </div>
                 )

ui/page/top/index.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import TopPage from './view';
 import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
 import { doResolveUris } from 'redux/actions/claims';
+import { doOpenModal } from 'redux/actions/app';
 import { push } from 'connected-react-router';
 import * as PAGES from 'constants/pages';
 
@@ -22,6 +23,7 @@ const perform = (dispatch) => ({
     dispatch(push(`/$/${PAGES.UPLOAD}`));
   },
   doResolveUris: (uris) => dispatch(doResolveUris(uris)),
+  doOpenModal: (id, props) => dispatch(doOpenModal(id, props)),
 });
 
 export default connect(select, perform)(TopPage);

ui/page/top/view.jsx

@@ -7,16 +7,17 @@ import ClaimEffectiveAmount from 'component/claimEffectiveAmount';
 import SearchTopClaim from 'component/searchTopClaim';
 import * as CS from 'constants/claim_search';
 import Button from 'component/button';
-import * as PAGES from 'constants/pages';
+import * as MODALS from 'constants/modal_types';
 import { SIMPLE_SITE } from 'config';
 
 type Props = {
   name: string,
   beginPublish: (string) => void,
+  doOpenModal: (string, {}) => void,
 };
 
 function TopPage(props: Props) {
-  const { name, beginPublish } = props;
+  const { name, beginPublish, doOpenModal } = props;
   const [channelActive, setChannelActive] = React.useState(false);
   // if the query was actually '@name', still offer repost for 'name'
   const queryName = name[0] === '@' ? name.slice(1) : name;
@@ -30,7 +31,7 @@ function TopPage(props: Props) {
         streamType={SIMPLE_SITE ? CS.CONTENT_ALL : undefined}
         meta={
           <div className="search__top-links">
-            <Button button="secondary" navigate={`/$/${PAGES.REPOST_NEW}?to=${queryName}`} label={__('Repost Here')} />
+            <Button button="secondary" onClick={() => doOpenModal(MODALS.REPOST, {})} label={__('Repost Here')} />
             <Button button="secondary" onClick={() => beginPublish(queryName)} label={__('Publish Here')} />
           </div>
         }

ui/scss/init/_gui.scss

@@ -1117,6 +1117,13 @@ img {
 }
 
 .repost-wrapper {
+  // Repost now uses a modal. Lock the width because the bid message
+  // keeps changing as you type the desired name.
+  min-width: var(--modal-width);
+  @media (max-width: $breakpoint-small) {
+    min-width: 100%;
+  }
+
   .claim-preview__wrapper {
     background-color: rgba(var(--color-header-background-base), 0.6);
     &:hover {