From f0a9ed8ad427428bf07c886e10187777ede21f3d Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 23 Mar 2022 13:41:30 -0400
Subject: [PATCH 1/2] Fix prop warnings

---
 app/soapbox/components/permalink.js                         | 6 ++++--
 app/soapbox/components/status_list.js                       | 2 +-
 app/soapbox/features/compose/components/privacy_dropdown.js | 2 --
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/permalink.js b/app/soapbox/components/permalink.js
index 5bae087ac..b94ef1648 100644
--- a/app/soapbox/components/permalink.js
+++ b/app/soapbox/components/permalink.js
@@ -12,6 +12,8 @@ class Permalink extends React.PureComponent {
     children: PropTypes.node,
     onInterceptClick: PropTypes.func,
     history: PropTypes.object,
+    title: PropTypes.string,
+    dangerouslySetInnerHTML: PropTypes.object,
   };
 
   handleClick = e => {
@@ -27,10 +29,10 @@ class Permalink extends React.PureComponent {
   }
 
   render() {
-    const { href, children, className, onInterceptClick, ...other } = this.props;
+    const { href, children, className, title, dangerouslySetInnerHTML } = this.props;
 
     return (
-      <a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>
+      <a target='_blank' href={href} onClick={this.handleClick} dangerouslySetInnerHTML={dangerouslySetInnerHTML} title={title} className={`permalink${className ? ' ' + className : ''}`}>
         {children}
       </a>
     );
diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index 65bbdba52..c8bcbb217 100644
--- a/app/soapbox/components/status_list.js
+++ b/app/soapbox/components/status_list.js
@@ -223,7 +223,7 @@ export default class StatusList extends ImmutablePureComponent {
         isLoading={isLoading}
         showLoading={isLoading && statusIds.size === 0}
         onLoadMore={onLoadMore && this.handleLoadOlder}
-        placeholderComponent={() => <PlaceholderStatus />}
+        placeholderComponent={PlaceholderStatus}
         placeholderCount={20}
         ref={this.setRef}
         className={divideType === 'border' ? 'divide-y divide-solid divide-gray-200' : 'sm:space-y-3 divide-y divide-solid divide-gray-200 sm:divide-none'}
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
index 415789ba5..23111ab1b 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.js
+++ b/app/soapbox/features/compose/components/privacy_dropdown.js
@@ -256,8 +256,6 @@ class PrivacyDropdown extends React.PureComponent {
             className='text-gray-400 hover:text-gray-600'
             src={valueOption.icon}
             title={intl.formatMessage(messages.change_privacy)}
-            expanded={open}
-            active={open}
             onClick={this.handleToggle}
             onMouseDown={this.handleMouseDown}
             onKeyDown={this.handleButtonKeyDown}

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 2/2] 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;