lbry-desktop/ui/modal/modalRepost/view.jsx
2022-05-02 09:39:01 -04:00

64 lines
1.7 KiB
JavaScript

// @flow
import React from 'react';
import { useHistory } from 'react-router';
import Modal from 'modal/modal';
import RepostCreate from 'component/repostCreate';
import useThrottle from 'effects/use-throttle';
type Props = {
uri?: string,
contentName?: string,
// --- redux ---
closeModal: () => void,
resolveUri: (string) => void,
};
function ModalRepost(props: Props) {
const { uri, contentName, closeModal, resolveUri } = props;
const {
location: { search },
} = useHistory();
const urlParams = new URLSearchParams(search);
const param = urlParams.get('name') || urlParams.get('q') || contentName;
const repostTo = param && (param[0] === '@' ? param.slice(1) : param.replace(/\s/g, '')); // remove spaces
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]);
return (
<Modal onAborted={closeModal} isOpen type="card">
<RepostCreate
uri={uri}
name={repostTo}
contentUri={contentUri}
repostUri={repostUri}
setContentUri={setContentUri}
setRepostUri={setRepostUri}
/>
</Modal>
);
}
export default ModalRepost;