added page/repost back

ui/component/claimRepostButton/view.jsx

@@ -15,6 +15,8 @@ type Props = {
 
 export default function ClaimRepostButton(props: Props) {
   const { uri, claim, hasChannels, doOpenModal, doToast }  = props;
+  const [contentUri, setContentUri] = React.useState('');
+  const [repostUri, setRepostUri] = React.useState('');
 
   return (
     <Button
@@ -34,7 +36,7 @@ export default function ClaimRepostButton(props: Props) {
             linkTarget: '/channel/new',
           });
         } else {
-          doOpenModal(MODALS.REPOST, { uri });
+          doOpenModal(MODALS.REPOST, { uri, contentUri, setContentUri, repostUri, setRepostUri, isModal: true });
         }
       }}
     />

ui/component/repostCreate/view.jsx

@@ -3,6 +3,7 @@
 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';
@@ -41,6 +42,12 @@ type Props = {
   activeChannelClaim: ?ChannelClaim,
   fetchingMyChannels: boolean,
   incognito: boolean,
+  contentUri: string,
+  setContentUri: () => void,
+  repostUri: string,
+  setRepostUri: () => void,
+  isModal: boolean,
+  redirectUri?: string,
 };
 
 function RepostCreate(props: Props) {
@@ -64,6 +71,12 @@ function RepostCreate(props: Props) {
     fetchingMyChannels,
     incognito,
     doHideModal,
+    contentUri,
+    setContentUri,
+    repostUri,
+    setRepostUri,
+    isModal,
+    redirectUri
   } = props;
 
   const defaultName = name || (claim && claim.name) || '';
@@ -75,9 +88,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();
 
   const resolvingRepost = isResolvingEnteredRepost || isResolvingPassedRepost;
   const repostUrlName = `lbry://${incognito || !activeChannelClaim ? '' : `${activeChannelClaim.name}/`}`;
@@ -250,6 +262,28 @@ 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({
@@ -265,14 +299,23 @@ function RepostCreate(props: Props) {
           linkText: __('Uploads'),
           linkTarget: '/uploads',
         });
+        if (isModal) {
           doHideModal();
+        } else {
+          replace(getRedirect(contentUri, uri, redirectUri));
+        }
       });
     }
   }
 
+
   function cancelIt() {
     doClearRepostError();
+    if (isModal) {
       doHideModal();
+    } else {
+      goBack();
+    }
   }
 
   if (fetchingMyChannels) {

ui/component/router/view.jsx

@@ -48,6 +48,7 @@ import PasswordSetPage from 'page/passwordSet';
 import PublishPage from 'page/publish';
 import ReportContentPage from 'page/reportContent';
 import ReportPage from 'page/report';
+import RepostNew from 'page/repost'
 import SearchPage from 'page/search';
 
 import SettingsCreatorPage from 'page/settingsCreator';
@@ -272,6 +273,7 @@ function AppRouter(props: Props) {
         component={ChannelsFollowingDiscoverPage}
       />
       <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/modal/modalRepost/view.jsx

@@ -6,15 +6,20 @@ import RepostCreate from 'component/repostCreate';
 type Props = {
   closeModal: () => void,
   uri: string,
+  name: string,
+  contentUri: string,
+  setContentUri: () => void,
+  repostUri: string,
+  setRepostUri: () => void,
 }
 
 class ModalRepost extends React.PureComponent<Props> {
   render() {
-    const { closeModal, uri } = this.props;
+    const { closeModal, uri, name, contentUri, setContentUri, repostUri, setRepostUri } = this.props;
 
     return (
       <Modal onAborted={closeModal} isOpen type="card">
-        <RepostCreate uri={uri} name={null} onCancel={closeModal} />
+        <RepostCreate uri={uri} name={name} onCancel={closeModal} contentUri={contentUri} setContentUri={setContentUri} repostUri={repostUri} setRepostUri={setRepostUri} />
       </Modal>
     );
   }

ui/page/repost/index.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,77 @@
+// @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;