From 95a5ca2115f47b99a219e266e7b0c2f636d9e4d1 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 23 Mar 2022 13:50:12 -0400
Subject: [PATCH] Convert Permalink to TSX

---
 app/soapbox/components/permalink.js  | 41 ----------------------------
 app/soapbox/components/permalink.tsx | 37 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 41 deletions(-)
 delete mode 100644 app/soapbox/components/permalink.js
 create mode 100644 app/soapbox/components/permalink.tsx

diff --git a/app/soapbox/components/permalink.js b/app/soapbox/components/permalink.js
deleted file mode 100644
index b94ef1648..000000000
--- a/app/soapbox/components/permalink.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-
-export default @withRouter
-class Permalink extends React.PureComponent {
-
-  static propTypes = {
-    className: PropTypes.string,
-    href: PropTypes.string.isRequired,
-    to: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    onInterceptClick: PropTypes.func,
-    history: PropTypes.object,
-    title: PropTypes.string,
-    dangerouslySetInnerHTML: PropTypes.object,
-  };
-
-  handleClick = e => {
-    if (this.props.onInterceptClick && this.props.onInterceptClick()) {
-      e.preventDefault();
-      return;
-    }
-
-    if (this.props.history && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.props.history.push(this.props.to);
-    }
-  }
-
-  render() {
-    const { href, children, className, title, dangerouslySetInnerHTML } = this.props;
-
-    return (
-      <a target='_blank' href={href} onClick={this.handleClick} dangerouslySetInnerHTML={dangerouslySetInnerHTML} title={title} className={`permalink${className ? ' ' + className : ''}`}>
-        {children}
-      </a>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/permalink.tsx b/app/soapbox/components/permalink.tsx
new file mode 100644
index 000000000..db68811e5
--- /dev/null
+++ b/app/soapbox/components/permalink.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+interface IPermaLink extends Pick<React.HTMLAttributes<HTMLAnchorElement>, 'dangerouslySetInnerHTML'> {
+  className?: string,
+  href: string,
+  title?: string,
+  to: string,
+}
+
+const Permalink: React.FC<IPermaLink> = (props) => {
+  const history = useHistory();
+
+  const { className, href, title, to, children, ...filteredProps } = props;
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      history.push(to);
+    }
+  };
+
+  return (
+    <a
+      target='_blank'
+      href={href}
+      onClick={handleClick}
+      title={title}
+      className={`permalink${className ? ' ' + className : ''}`}
+      {...filteredProps}
+    >
+      {children}
+    </a>
+  );
+};
+
+export default Permalink;