added page/repost back

This commit is contained in:
Bradley Ray 2021-12-11 11:01:38 -06:00
parent 02600d3bb2
commit 9eed3acdb6
6 changed files with 153 additions and 9 deletions

View file

@ -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 });
}
}}
/>

View file

@ -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) {

View file

@ -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} />

View file

@ -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
View 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
View 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;