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) {
|
export default function ClaimRepostButton(props: Props) {
|
||||||
const { uri, claim, hasChannels, doOpenModal, doToast } = props;
|
const { uri, claim, hasChannels, doOpenModal, doToast } = props;
|
||||||
|
const [contentUri, setContentUri] = React.useState('');
|
||||||
|
const [repostUri, setRepostUri] = React.useState('');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
|
@ -34,7 +36,7 @@ export default function ClaimRepostButton(props: Props) {
|
||||||
linkTarget: '/channel/new',
|
linkTarget: '/channel/new',
|
||||||
});
|
});
|
||||||
} else {
|
} 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 * as ICONS from 'constants/icons';
|
||||||
import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
|
import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useHistory } from 'react-router';
|
||||||
import Card from 'component/common/card';
|
import Card from 'component/common/card';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import ChannelSelector from 'component/channelSelector';
|
import ChannelSelector from 'component/channelSelector';
|
||||||
|
@ -41,6 +42,12 @@ type Props = {
|
||||||
activeChannelClaim: ?ChannelClaim,
|
activeChannelClaim: ?ChannelClaim,
|
||||||
fetchingMyChannels: boolean,
|
fetchingMyChannels: boolean,
|
||||||
incognito: boolean,
|
incognito: boolean,
|
||||||
|
contentUri: string,
|
||||||
|
setContentUri: () => void,
|
||||||
|
repostUri: string,
|
||||||
|
setRepostUri: () => void,
|
||||||
|
isModal: boolean,
|
||||||
|
redirectUri?: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
function RepostCreate(props: Props) {
|
function RepostCreate(props: Props) {
|
||||||
|
@ -64,6 +71,12 @@ function RepostCreate(props: Props) {
|
||||||
fetchingMyChannels,
|
fetchingMyChannels,
|
||||||
incognito,
|
incognito,
|
||||||
doHideModal,
|
doHideModal,
|
||||||
|
contentUri,
|
||||||
|
setContentUri,
|
||||||
|
repostUri,
|
||||||
|
setRepostUri,
|
||||||
|
isModal,
|
||||||
|
redirectUri
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const defaultName = name || (claim && claim.name) || '';
|
const defaultName = name || (claim && claim.name) || '';
|
||||||
|
@ -75,9 +88,8 @@ function RepostCreate(props: Props) {
|
||||||
const [enteredRepostName, setEnteredRepostName] = React.useState(defaultName);
|
const [enteredRepostName, setEnteredRepostName] = React.useState(defaultName);
|
||||||
const [available, setAvailable] = React.useState(true);
|
const [available, setAvailable] = React.useState(true);
|
||||||
const [enteredContent, setEnteredContentUri] = React.useState(undefined);
|
const [enteredContent, setEnteredContentUri] = React.useState(undefined);
|
||||||
const [contentUri, setContentUri] = React.useState('');
|
|
||||||
const [repostUri, setRepostUri] = React.useState('');
|
|
||||||
const [contentError, setContentError] = React.useState('');
|
const [contentError, setContentError] = React.useState('');
|
||||||
|
const { replace, goBack } = useHistory();
|
||||||
|
|
||||||
const resolvingRepost = isResolvingEnteredRepost || isResolvingPassedRepost;
|
const resolvingRepost = isResolvingEnteredRepost || isResolvingPassedRepost;
|
||||||
const repostUrlName = `lbry://${incognito || !activeChannelClaim ? '' : `${activeChannelClaim.name}/`}`;
|
const repostUrlName = `lbry://${incognito || !activeChannelClaim ? '' : `${activeChannelClaim.name}/`}`;
|
||||||
|
@ -250,6 +262,28 @@ function RepostCreate(props: Props) {
|
||||||
|
|
||||||
const repostClaimId = contentClaimId || enteredClaimId;
|
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() {
|
function handleSubmit() {
|
||||||
if (enteredRepostName && repostBid && repostClaimId) {
|
if (enteredRepostName && repostBid && repostClaimId) {
|
||||||
doRepost({
|
doRepost({
|
||||||
|
@ -265,14 +299,23 @@ function RepostCreate(props: Props) {
|
||||||
linkText: __('Uploads'),
|
linkText: __('Uploads'),
|
||||||
linkTarget: '/uploads',
|
linkTarget: '/uploads',
|
||||||
});
|
});
|
||||||
doHideModal();
|
if (isModal) {
|
||||||
|
doHideModal();
|
||||||
|
} else {
|
||||||
|
replace(getRedirect(contentUri, uri, redirectUri));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function cancelIt() {
|
function cancelIt() {
|
||||||
doClearRepostError();
|
doClearRepostError();
|
||||||
doHideModal();
|
if (isModal) {
|
||||||
|
doHideModal();
|
||||||
|
} else {
|
||||||
|
goBack();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (fetchingMyChannels) {
|
if (fetchingMyChannels) {
|
||||||
|
|
|
@ -48,6 +48,7 @@ import PasswordSetPage from 'page/passwordSet';
|
||||||
import PublishPage from 'page/publish';
|
import PublishPage from 'page/publish';
|
||||||
import ReportContentPage from 'page/reportContent';
|
import ReportContentPage from 'page/reportContent';
|
||||||
import ReportPage from 'page/report';
|
import ReportPage from 'page/report';
|
||||||
|
import RepostNew from 'page/repost'
|
||||||
import SearchPage from 'page/search';
|
import SearchPage from 'page/search';
|
||||||
|
|
||||||
import SettingsCreatorPage from 'page/settingsCreator';
|
import SettingsCreatorPage from 'page/settingsCreator';
|
||||||
|
@ -272,6 +273,7 @@ function AppRouter(props: Props) {
|
||||||
component={ChannelsFollowingDiscoverPage}
|
component={ChannelsFollowingDiscoverPage}
|
||||||
/>
|
/>
|
||||||
<PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
|
<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.UPLOADS}`} component={FileListPublished} />
|
||||||
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
|
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
|
||||||
<PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
|
<PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
|
||||||
|
|
|
@ -4,17 +4,22 @@ import { Modal } from 'modal/modal';
|
||||||
import RepostCreate from 'component/repostCreate';
|
import RepostCreate from 'component/repostCreate';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
closeModal: () => void,
|
closeModal: () => void,
|
||||||
uri: string,
|
uri: string,
|
||||||
|
name: string,
|
||||||
|
contentUri: string,
|
||||||
|
setContentUri: () => void,
|
||||||
|
repostUri: string,
|
||||||
|
setRepostUri: () => void,
|
||||||
}
|
}
|
||||||
|
|
||||||
class ModalRepost extends React.PureComponent<Props> {
|
class ModalRepost extends React.PureComponent<Props> {
|
||||||
render() {
|
render() {
|
||||||
const { closeModal, uri } = this.props;
|
const { closeModal, uri, name, contentUri, setContentUri, repostUri, setRepostUri } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal onAborted={closeModal} isOpen type="card">
|
<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>
|
</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