added page/repost back
This commit is contained in:
parent
02600d3bb2
commit
9eed3acdb6
6 changed files with 153 additions and 9 deletions
|
@ -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 });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -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',
|
||||
});
|
||||
doHideModal();
|
||||
if (isModal) {
|
||||
doHideModal();
|
||||
} else {
|
||||
replace(getRedirect(contentUri, uri, redirectUri));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function cancelIt() {
|
||||
doClearRepostError();
|
||||
doHideModal();
|
||||
if (isModal) {
|
||||
doHideModal();
|
||||
} else {
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
|
||||
if (fetchingMyChannels) {
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -4,17 +4,22 @@ import { Modal } from 'modal/modal';
|
|||
import RepostCreate from 'component/repostCreate';
|
||||
|
||||
type Props = {
|
||||
closeModal: () => void,
|
||||
uri: string,
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
15
ui/page/repost/index.js
Normal file
15
ui/page/repost/index.js
Normal file
|
@ -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);
|
77
ui/page/repost/view.jsx
Normal file
77
ui/page/repost/view.jsx
Normal file
|
@ -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;
|
Loading…
Reference in a new issue