diff --git a/app/javascript/flavours/glitch/components/permalink.jsx b/app/javascript/flavours/glitch/components/permalink.jsx index 5226895415..4a6da125e7 100644 --- a/app/javascript/flavours/glitch/components/permalink.jsx +++ b/app/javascript/flavours/glitch/components/permalink.jsx @@ -1,50 +1,38 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback } from 'react'; -import { withOptionalRouter, WithOptionalRouterPropTypes } from 'flavours/glitch/utils/react_router'; +import { useAppHistory } from './router'; -class Permalink extends PureComponent { +const Permalink = ({ className, href, to, children, onInterceptClick, ...props }) => { + const history = useAppHistory(); - static propTypes = { - className: PropTypes.string, - href: PropTypes.string.isRequired, - to: PropTypes.string.isRequired, - children: PropTypes.node, - onInterceptClick: PropTypes.func, - ...WithOptionalRouterPropTypes, - }; - - handleClick = (e) => { + const handleClick = useCallback((e) => { if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { - if (this.props.onInterceptClick && this.props.onInterceptClick()) { + if (onInterceptClick && onInterceptClick()) { e.preventDefault(); return; } - if (this.props.history) { + if (history) { e.preventDefault(); - this.props.history.push(this.props.to); + history.push(to); } } - }; + }, [onInterceptClick, history, to]); - render () { - const { - children, - className, - href, - to, - onInterceptClick, - ...other - } = this.props; + return ( + + {children} + + ); +}; - return ( - - {children} - - ); - } +Permalink.propTypes = { + className: PropTypes.string, + href: PropTypes.string.isRequired, + to: PropTypes.string.isRequired, + children: PropTypes.node, + onInterceptClick: PropTypes.func, +}; -} - -export default withOptionalRouter(Permalink); +export default Permalink;