Converted hashtag.jsx to TypeScript (#27872)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Co-authored-by: Renaud Chaput <renchap@gmail.com>

.eslintrc.js

@@ -284,7 +284,6 @@ module.exports = defineConfig({
     'formatjs/no-id': 'off', // IDs are used for translation keys
     'formatjs/no-invalid-icu': 'error',
     'formatjs/no-literal-string-in-jsx': 'off', // Should be looked at, but mainly flagging punctuation outside of strings
-    'formatjs/no-multiple-plurals': 'off', // Only used by hashtag.jsx
     'formatjs/no-multiple-whitespaces': 'error',
     'formatjs/no-offset': 'error',
     'formatjs/no-useless-message': 'error',
@@ -354,7 +353,7 @@ module.exports = defineConfig({
         '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
         '@typescript-eslint/consistent-type-exports': 'error',
         '@typescript-eslint/consistent-type-imports': 'error',
-        "@typescript-eslint/prefer-nullish-coalescing": ['error', {ignorePrimitives: {boolean: true}}],
+        "@typescript-eslint/prefer-nullish-coalescing": ['error', { ignorePrimitives: { boolean: true } }],
 
         'jsdoc/require-jsdoc': 'off',
 

app/javascript/mastodon/components/admin/Trends.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 
 import api from 'mastodon/api';
-import Hashtag from 'mastodon/components/hashtag';
+import { Hashtag } from 'mastodon/components/hashtag';
 
 export default class Trends extends PureComponent {
 

app/javascript/mastodon/components/hashtag.jsx → app/javascript/mastodon/components/hashtag.tsx

-// @ts-check
-import PropTypes from 'prop-types';
+import type { JSX } from 'react';
 import { Component } from 'react';
 
 import { FormattedMessage } from 'react-intl';
@@ -7,19 +6,18 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import type Immutable from 'immutable';
 
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
 import { ShortNumber } from 'mastodon/components/short_number';
 import { Skeleton } from 'mastodon/components/skeleton';
 
-class SilentErrorBoundary extends Component {
-
-  static propTypes = {
-    children: PropTypes.node,
-  };
+interface SilentErrorBoundaryProps {
+  children: React.ReactNode;
+}
 
+class SilentErrorBoundary extends Component<SilentErrorBoundaryProps> {
   state = {
     error: false,
   };
@@ -35,14 +33,18 @@ class SilentErrorBoundary extends Component {
 
     return this.props.children;
   }
-
 }
 
 /**
  * Used to render counter of how much people are talking about hashtag
- * @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
+ * @param displayNumber Counter number to display
+ * @param pluralReady Whether the count is plural
+ * @returns Formatted counter of how much people are talking about hashtag
  */
-export const accountsCountRenderer = (displayNumber, pluralReady) => (
+export const accountsCountRenderer = (
+  displayNumber: JSX.Element,
+  pluralReady: number,
+) => (
   <FormattedMessage
     id='trends.counter_by_accounts'
     defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {# days}}'
@@ -54,33 +56,69 @@ export const accountsCountRenderer = (displayNumber, pluralReady) => (
   />
 );
 
-// @ts-expect-error
-export const ImmutableHashtag = ({ hashtag }) => (
+interface ImmutableHashtagProps {
+  hashtag: Immutable.Map<string, unknown>;
+}
+
+export const ImmutableHashtag = ({ hashtag }: ImmutableHashtagProps) => (
   <Hashtag
-    name={hashtag.get('name')}
-    to={`/tags/${hashtag.get('name')}`}
-    people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1}
-    // @ts-expect-error
-    history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()}
+    name={hashtag.get('name') as string}
+    to={`/tags/${hashtag.get('name') as string}`}
+    people={
+      (hashtag.getIn(['history', 0, 'accounts']) as number) * 1 +
+      (hashtag.getIn(['history', 1, 'accounts']) as number) * 1
+    }
+    history={(
+      hashtag.get('history') as Immutable.Collection.Indexed<
+        Immutable.Map<string, number>
+      >
+    )
+      .reverse()
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      .map((day) => day.get('uses')!)
+      .toArray()}
   />
 );
 
-ImmutableHashtag.propTypes = {
-  hashtag: ImmutablePropTypes.map.isRequired,
-};
+export interface HashtagProps {
+  className?: string;
+  description?: React.ReactNode;
+  history?: number[];
+  name: string;
+  people: number;
+  to: string;
+  uses?: number;
+  withGraph?: boolean;
+}
 
-// @ts-expect-error
-const Hashtag = ({ name, to, people, uses, history, className, description, withGraph }) => (
+export const Hashtag: React.FC<HashtagProps> = ({
+  name,
+  to,
+  people,
+  uses,
+  history,
+  className,
+  description,
+  withGraph = true,
+}) => (
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>
       <Link to={to}>
-        {name ? <>#<span>{name}</span></> : <Skeleton width={50} />}
+        {name ? (
+          <>
+            #<span>{name}</span>
+          </>
+        ) : (
+          <Skeleton width={50} />
+        )}
       </Link>
 
       {description ? (
         <span>{description}</span>
+      ) : typeof people !== 'undefined' ? (
+        <ShortNumber value={people} renderer={accountsCountRenderer} />
       ) : (
-        typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />
+        <Skeleton width={100} />
       )}
     </div>
 
@@ -93,7 +131,11 @@ const Hashtag = ({ name, to, people, uses, history, className, description, with
     {withGraph && (
       <div className='trends__item__sparkline'>
         <SilentErrorBoundary>
-          <Sparklines width={50} height={28} data={history ? history : Array.from(Array(7)).map(() => 0)}>
+          <Sparklines
+            width={50}
+            height={28}
+            data={history ? history : Array.from(Array(7)).map(() => 0)}
+          >
             <SparklinesCurve style={{ fill: 'none' }} />
           </Sparklines>
         </SilentErrorBoundary>
@@ -101,20 +143,3 @@ const Hashtag = ({ name, to, people, uses, history, className, description, with
     )}
   </div>
 );
-
-Hashtag.propTypes = {
-  name: PropTypes.string,
-  to: PropTypes.string,
-  people: PropTypes.number,
-  description: PropTypes.node,
-  uses: PropTypes.number,
-  history: PropTypes.arrayOf(PropTypes.number),
-  className: PropTypes.string,
-  withGraph: PropTypes.bool,
-};
-
-Hashtag.defaultProps = {
-  withGraph: true,
-};
-
-export default Hashtag;

app/javascript/mastodon/features/account/components/featured_tags.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import Hashtag from 'mastodon/components/hashtag';
+import { Hashtag } from 'mastodon/components/hashtag';
 
 const messages = defineMessages({
   lastStatusAt: { id: 'account.featured_tags.last_status_at', defaultMessage: 'Last post on {date}' },

app/javascript/mastodon/features/followed_tags/index.jsx

@@ -13,7 +13,7 @@ import { debounce } from 'lodash';
 
 import { expandFollowedHashtags, fetchFollowedHashtags } from 'mastodon/actions/tags';
 import ColumnHeader from 'mastodon/components/column_header';
-import Hashtag from 'mastodon/components/hashtag';
+import { Hashtag } from 'mastodon/components/hashtag';
 import ScrollableList from 'mastodon/components/scrollable_list';
 import Column from 'mastodon/features/ui/components/column';