From 16499bc097a0d5625ae2f67b3f7c4c3157bfa50c Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sun, 14 Jan 2024 13:23:13 +0100
Subject: [PATCH] Rewrite `Permalink` as functional component

---
 .../flavours/glitch/components/permalink.jsx  | 58 ++++++++-----------
 1 file changed, 23 insertions(+), 35 deletions(-)

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 (
+    <a target='_blank' href={href} onClick={handleClick} className={`permalink${className ? ' ' + className : ''}`} {...props}>
+      {children}
+    </a>
+  );
+};
 
-    return (
-      <a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>
-        {children}
-      </a>
-    );
-  }
+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;