Rewrite AvatarOverlay component with React hooks (#24543)

app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap

@@ -3,6 +3,8 @@
 exports[`<AvatarOverlay renders a overlay avatar 1`] = `
 <div
   className="account__avatar-overlay"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   style={
     {
       "height": 46,
@@ -15,8 +17,6 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
   >
     <div
       className="account__avatar"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
       style={
         {
           "height": "36px",
@@ -35,8 +35,6 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
   >
     <div
       className="account__avatar"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
       style={
         {
           "height": "24px",

app/javascript/mastodon/components/avatar_overlay.jsx

-import React from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from '../initial_state';
-import Avatar from './avatar';
-
-export default class AvatarOverlay extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    friend: ImmutablePropTypes.map.isRequired,
-    animate: PropTypes.bool,
-    size: PropTypes.number,
-    baseSize: PropTypes.number,
-    overlaySize: PropTypes.number,
-  };
-
-  static defaultProps = {
-    animate: autoPlayGif,
-    size: 46,
-    baseSize: 36,
-    overlaySize: 24,
-  };
-
-  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, friend, animate, size, baseSize, overlaySize } = this.props;
-    const { hovering } = this.state;
-
-    return (
-      <div className='account__avatar-overlay' style={{ width: size, height: size }}>
-        <div className='account__avatar-overlay-base'><Avatar animate={hovering || animate} account={account} size={baseSize} /></div>
-        <div className='account__avatar-overlay-overlay'><Avatar animate={hovering || animate} account={friend} size={overlaySize} /></div>
-      </div>
-    );
-  }
-
-}

app/javascript/mastodon/components/avatar_overlay.tsx

+import React from 'react';
+import type { Account } from '../../types/resources';
+import { useHovering } from '../../hooks/useHovering';
+import { autoPlayGif } from '../initial_state';
+
+type Props = {
+  account: Account;
+  friend: Account;
+  size?: number;
+  baseSize?: number;
+  overlaySize?: number;
+};
+
+export const AvatarOverlay: React.FC<Props> = ({
+  account,
+  friend,
+  size = 46,
+  baseSize = 36,
+  overlaySize = 24,
+}) => {
+  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif);
+  const accountSrc = hovering ? account?.get('avatar') : account?.get('avatar_static');
+  const friendSrc = hovering ? friend?.get('avatar') : friend?.get('avatar_static');
+
+  return (
+    <div
+      className='account__avatar-overlay' style={{ width: size, height: size }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className='account__avatar-overlay-base'>
+        <div
+          className='account__avatar'
+          style={{ width: `${baseSize}px`, height: `${baseSize}px` }}
+        >
+          {accountSrc && <img src={accountSrc} alt={account?.get('acct')} />}
+        </div>
+      </div>
+      <div className='account__avatar-overlay-overlay'>
+        <div
+          className='account__avatar'
+          style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }}
+        >
+          {friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AvatarOverlay;