[Glitch] [Proposal] Make able to write React in Typescript (#2190)

Port 4520e6473a to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

app/javascript/flavours/glitch/components/avatar.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from 'flavours/glitch/initial_state';
-import classNames from 'classnames';
-
-export default class Avatar extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map,
-    className: PropTypes.string,
-    size: PropTypes.number.isRequired,
-    style: PropTypes.object,
-    inline: PropTypes.bool,
-    animate: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    animate: autoPlayGif,
-    size: 20,
-    inline: false,
-  };
-
-  state = {
-    hovering: false,
-  };
-
-  handleMouseEnter = () => {
-    if (this.props.animate) return;
-    this.setState({ hovering: true });
-  };
-
-  handleMouseLeave = () => {
-    if (this.props.animate) return;
-    this.setState({ hovering: false });
-  };
-
-  render () {
-    const {
-      account,
-      animate,
-      className,
-      inline,
-      size,
-    } = this.props;
-    const { hovering } = this.state;
-
-    const style = {
-      ...this.props.style,
-      width: `${size}px`,
-      height: `${size}px`,
-      backgroundSize: `${size}px ${size}px`,
-    };
-
-    if (account) {
-      const src = account.get('avatar');
-      const staticSrc = account.get('avatar_static');
-
-      if (hovering || animate) {
-        style.backgroundImage = `url(${src})`;
-      } else {
-        style.backgroundImage = `url(${staticSrc})`;
-      }
-    }
-
-    return (
-      <div
-        className={classNames('account__avatar', { 'account__avatar-inline': inline }, className)}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        style={style}
-        data-avatar-of={account && `@${account.get('acct')}`}
-        role='img'
-        aria-label={account?.get('acct')}
-      />
-    );
-  }
-
-}

app/javascript/flavours/glitch/components/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
+import { useHovering } from 'hooks/useHovering';
+import type { Account } from 'types/resources';
+
+type Props = {
+  account: Account | undefined;
+  className?: string;
+  size: number;
+  style?: React.CSSProperties;
+  inline?: boolean;
+}
+
+export const Avatar: React.FC<Props> = ({
+  account,
+  className,
+  size = 20,
+  inline = false,
+  style: styleFromParent,
+}) => {
+  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif);
+
+  const style = {
+    ...styleFromParent,
+    width: `${size}px`,
+    height: `${size}px`,
+    backgroundSize: `${size}px ${size}px`,
+  };
+
+  if (account) {
+    style.backgroundImage = `url(${account.get(hovering ? 'avatar' : 'avatar_static')})`;
+  }
+
+  return (
+    <div
+      className={classNames('account__avatar', { 'account__avatar-inline': inline }, className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={style}
+      data-avatar-of={account && `@${account.get('acct')}`}
+      role='img'
+      aria-label={account?.get('acct')}
+    />
+  );
+};
+
+export default Avatar;

app/javascript/flavours/glitch/components/blurhash.jsx

@@ -44,6 +44,7 @@ function Blurhash({
       const ctx = canvas.getContext('2d');
       const imageData = new ImageData(pixels, width, height);
 
+      // @ts-expect-error
       ctx.putImageData(imageData, 0, 0);
     } catch (err) {
       console.error('Blurhash decoding failure', { err, hash });

app/javascript/flavours/glitch/components/hashtag.jsx

@@ -50,12 +50,14 @@ export const accountsCountRenderer = (displayNumber, pluralReady) => (
   />
 );
 
+// @ts-expect-error
 export const ImmutableHashtag = ({ hashtag }) => (
   <Hashtag
     name={hashtag.get('name')}
     href={hashtag.get('url')}
     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()}
   />
 );
@@ -64,6 +66,7 @@ ImmutableHashtag.propTypes = {
   hashtag: ImmutablePropTypes.map.isRequired,
 };
 
+// @ts-expect-error
 const Hashtag = ({ name, href, to, people, uses, history, className, description, withGraph }) => (
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>