lbry-desktop/ui/page/repost/view.jsx
2020-12-28 15:00:15 -05:00

77 lines
2 KiB
JavaScript

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