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;