From 672216d4de7477ffc7a4e03c9be90e098efd260d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 25 Apr 2022 17:54:17 -0500
Subject: [PATCH] BundleColumnError: convert to TSX

---
 .../ui/components/bundle_column_error.js      | 43 -------------------
 .../ui/components/bundle_column_error.tsx     | 37 ++++++++++++++++
 2 files changed, 37 insertions(+), 43 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/bundle_column_error.js
 create mode 100644 app/soapbox/features/ui/components/bundle_column_error.tsx

diff --git a/app/soapbox/features/ui/components/bundle_column_error.js b/app/soapbox/features/ui/components/bundle_column_error.js
deleted file mode 100644
index 26186d26f..000000000
--- a/app/soapbox/features/ui/components/bundle_column_error.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import IconButton from '../../../components/icon_button';
-
-import Column from './column';
-import ColumnHeader from './column_header';
-
-const messages = defineMessages({
-  title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
-  body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this component.' },
-  retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
-});
-
-class BundleColumnError extends React.PureComponent {
-
-  static propTypes = {
-    onRetry: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  handleRetry = () => {
-    this.props.onRetry();
-  }
-
-  render() {
-    const { intl: { formatMessage } } = this.props;
-
-    return (
-      <Column>
-        <ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
-        <div className='error-column'>
-          <IconButton title={formatMessage(messages.retry)} src={require('@tabler/icons/icons/refresh.svg')} onClick={this.handleRetry} />
-          {formatMessage(messages.body)}
-        </div>
-      </Column>
-    );
-  }
-
-}
-
-export default injectIntl(BundleColumnError);
diff --git a/app/soapbox/features/ui/components/bundle_column_error.tsx b/app/soapbox/features/ui/components/bundle_column_error.tsx
new file mode 100644
index 000000000..d7f458410
--- /dev/null
+++ b/app/soapbox/features/ui/components/bundle_column_error.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import IconButton from '../../../components/icon_button';
+
+import Column from './column';
+import ColumnHeader from './column_header';
+
+const messages = defineMessages({
+  title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
+  body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this component.' },
+  retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
+});
+
+interface IBundleColumnError {
+  onRetry: () => void,
+}
+
+const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
+  const intl = useIntl();
+
+  const handleRetry = () => {
+    onRetry();
+  };
+
+  return (
+    <Column>
+      <ColumnHeader icon='exclamation-circle' type={intl.formatMessage(messages.title)} />
+      <div className='error-column'>
+        <IconButton title={intl.formatMessage(messages.retry)} src={require('@tabler/icons/icons/refresh.svg')} onClick={handleRetry} />
+        {intl.formatMessage(messages.body)}
+      </div>
+    </Column>
+  );
+};
+
+export default BundleColumnError;