From e2ca5850c0b294d54f94fd3c6f2a5c406e1868ea Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 6 Mar 2025 21:01:11 +0100
Subject: [PATCH] Convert account ActionBar to TypeScript

---
 .../account/components/action_bar.jsx         |  91 ---------------
 .../account/components/action_bar.tsx         | 106 ++++++++++++++++++
 .../account_timeline/components/header.jsx    |   2 +-
 3 files changed, 107 insertions(+), 92 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/features/account/components/action_bar.jsx
 create mode 100644 app/javascript/flavours/glitch/features/account/components/action_bar.tsx

diff --git a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
deleted file mode 100644
index 3fcf0440c0..0000000000
--- a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { PureComponent } from 'react';
-
-import { FormattedMessage, FormattedNumber } from 'react-intl';
-
-import { NavLink } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import InfoIcon from '@/material-icons/400-24px/info.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-
-
-class ActionBar extends PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-  };
-
-  isStatusesPageActive = (match, location) => {
-    if (!match) {
-      return false;
-    }
-    return !location.pathname.match(/\/(followers|following)\/?$/);
-  };
-
-  render () {
-    const { account } = this.props;
-
-    if (account.get('suspended')) {
-      return (
-        <div>
-          <div className='account__disclaimer'>
-            <Icon id='info-circle' icon={InfoIcon} />
-            <FormattedMessage
-              id='account.suspended_disclaimer_full'
-              defaultMessage='This user has been suspended by a moderator.'
-            />
-          </div>
-        </div>
-      );
-    }
-
-    let extraInfo = '';
-
-    if (account.get('acct') !== account.get('username')) {
-      extraInfo = (
-        <div className='account__disclaimer'>
-          <Icon id='info-circle' icon={InfoIcon} />
-          <div>
-            <FormattedMessage
-              id='account.disclaimer_full'
-              defaultMessage="Information below may reflect the user's profile incompletely."
-            />
-            {' '}
-            <a target='_blank' rel='noopener' href={account.get('url')}>
-              <FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
-            </a>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        {extraInfo}
-
-        <div className='account__action-bar'>
-          <div className='account__action-bar-links'>
-            <NavLink isActive={this.isStatusesPageActive} activeClassName='active' className='account__action-bar__tab' to={`/@${account.get('acct')}`}>
-              <FormattedMessage id='account.posts' defaultMessage='Posts' />
-              <strong><FormattedNumber value={account.get('statuses_count')} /></strong>
-            </NavLink>
-
-            <NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/@${account.get('acct')}/following`}>
-              <FormattedMessage id='account.follows' defaultMessage='Follows' />
-              <strong><FormattedNumber value={account.get('following_count')} /></strong>
-            </NavLink>
-
-            <NavLink exact activeClassName='active' className='account__action-bar__tab' to={`/@${account.get('acct')}/followers`}>
-              <FormattedMessage id='account.followers' defaultMessage='Followers' />
-              <strong>{ account.get('followers_count') < 0 ? '-' : <FormattedNumber value={account.get('followers_count')} /> }</strong>
-            </NavLink>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default ActionBar;
diff --git a/app/javascript/flavours/glitch/features/account/components/action_bar.tsx b/app/javascript/flavours/glitch/features/account/components/action_bar.tsx
new file mode 100644
index 0000000000..3f47da1339
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/account/components/action_bar.tsx
@@ -0,0 +1,106 @@
+import { FormattedMessage, FormattedNumber } from 'react-intl';
+
+import { NavLink } from 'react-router-dom';
+import type { NavLinkProps } from 'react-router-dom';
+
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+import { Icon } from 'flavours/glitch/components/icon';
+import type { Account } from 'flavours/glitch/models/account';
+
+const isStatusesPageActive: NavLinkProps['isActive'] = (match, location) => {
+  if (!match) {
+    return false;
+  }
+  return !/\/(followers|following)\/?$/.exec(location.pathname);
+};
+
+export const ActionBar: React.FC<{ account: Account }> = ({ account }) => {
+  if (account.suspended) {
+    return (
+      <div>
+        <div className='account__disclaimer'>
+          <Icon id='info-circle' icon={InfoIcon} />
+          <FormattedMessage
+            id='account.suspended_disclaimer_full'
+            defaultMessage='This user has been suspended by a moderator.'
+          />
+        </div>
+      </div>
+    );
+  }
+
+  let extraInfo = null;
+
+  if (account.get('acct') !== account.get('username')) {
+    extraInfo = (
+      <div className='account__disclaimer'>
+        <Icon id='info-circle' icon={InfoIcon} />
+        <div>
+          <FormattedMessage
+            id='account.disclaimer_full'
+            defaultMessage="Information below may reflect the user's profile incompletely."
+          />{' '}
+          <a target='_blank' rel='noopener' href={account.get('url')}>
+            <FormattedMessage
+              id='account.view_full_profile'
+              defaultMessage='View full profile'
+            />
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {extraInfo}
+
+      <div className='account__action-bar'>
+        <div className='account__action-bar-links'>
+          <NavLink
+            isActive={isStatusesPageActive}
+            activeClassName='active'
+            className='account__action-bar__tab'
+            to={`/@${account.get('acct')}`}
+          >
+            <FormattedMessage id='account.posts' defaultMessage='Posts' />
+            <strong>
+              <FormattedNumber value={account.get('statuses_count')} />
+            </strong>
+          </NavLink>
+
+          <NavLink
+            exact
+            activeClassName='active'
+            className='account__action-bar__tab'
+            to={`/@${account.get('acct')}/following`}
+          >
+            <FormattedMessage id='account.follows' defaultMessage='Follows' />
+            <strong>
+              <FormattedNumber value={account.get('following_count')} />
+            </strong>
+          </NavLink>
+
+          <NavLink
+            exact
+            activeClassName='active'
+            className='account__action-bar__tab'
+            to={`/@${account.get('acct')}/followers`}
+          >
+            <FormattedMessage
+              id='account.followers'
+              defaultMessage='Followers'
+            />
+            <strong>
+              {account.get('followers_count') < 0 ? (
+                '-'
+              ) : (
+                <FormattedNumber value={account.get('followers_count')} />
+              )}
+            </strong>
+          </NavLink>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
index 10a035a0fc..df6252b8fa 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
@@ -7,7 +7,7 @@ import { NavLink } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import ActionBar from '../../account/components/action_bar';
+import { ActionBar } from '../../account/components/action_bar';
 import InnerHeader from '../../account/components/header';
 
 import MemorialNote from './memorial_note';