From 84839a51044660fe2dd05a2d9fda481ac0d51dc1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 12:56:52 -0500
Subject: [PATCH] Convert legacy Avatar component to TSX

---
 app/soapbox/components/avatar.js  | 39 -------------------------------
 app/soapbox/components/avatar.tsx | 38 ++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 39 deletions(-)
 delete mode 100644 app/soapbox/components/avatar.js
 create mode 100644 app/soapbox/components/avatar.tsx

diff --git a/app/soapbox/components/avatar.js b/app/soapbox/components/avatar.js
deleted file mode 100644
index d5000264d..000000000
--- a/app/soapbox/components/avatar.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import StillImage from 'soapbox/components/still_image';
-
-export default class Avatar extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record,
-    size: PropTypes.number,
-    style: PropTypes.object,
-    className: PropTypes.string,
-  };
-
-  render() {
-    const { account, size, className } = this.props;
-    if (!account) return null;
-
-    // : TODO : remove inline and change all avatars to be sized using css
-    const style = !size ? {} : {
-      width: `${size}px`,
-      height: `${size}px`,
-    };
-
-    return (
-      <StillImage
-        className={classNames('rounded-full', {
-          [className]: typeof className !== 'undefined',
-        })}
-        style={style}
-        src={account.get('avatar')}
-        alt=''
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/components/avatar.tsx b/app/soapbox/components/avatar.tsx
new file mode 100644
index 000000000..9d4fbaa7c
--- /dev/null
+++ b/app/soapbox/components/avatar.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import StillImage from 'soapbox/components/still_image';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IAvatar {
+  account?: Account | null,
+  size?: number,
+  className?: string,
+}
+
+/**
+ * Legacy avatar component.
+ * @see soapbox/components/ui/avatar/avatar.tsx
+ * @deprecated
+ */
+const Avatar: React.FC<IAvatar> = ({ account, size, className }) => {
+  if (!account) return null;
+
+  // : TODO : remove inline and change all avatars to be sized using css
+  const style: React.CSSProperties = !size ? {} : {
+    width: `${size}px`,
+    height: `${size}px`,
+  };
+
+  return (
+    <StillImage
+      className={classNames('rounded-full overflow-hidden', className)}
+      style={style}
+      src={account.avatar}
+      alt=''
+    />
+  );
+};
+
+export default Avatar;