From cdec45eca9ab9008f36f6efc88707aebca4235f5 Mon Sep 17 00:00:00 2001
From: alfe <alfe10251@gmail.com>
Date: Sun, 11 Jun 2023 11:47:18 +0900
Subject: [PATCH] [Glitch] Rewrite <LoadPending /> as FC and TS

Port dfaf59d99a2aa1f913608faee978bc3e1586a3ce to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/load_pending.jsx        | 23 -------------------
 .../glitch/components/load_pending.tsx        | 18 +++++++++++++++
 .../glitch/components/scrollable_list.jsx     |  2 +-
 3 files changed, 19 insertions(+), 24 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/components/load_pending.jsx
 create mode 100644 app/javascript/flavours/glitch/components/load_pending.tsx

diff --git a/app/javascript/flavours/glitch/components/load_pending.jsx b/app/javascript/flavours/glitch/components/load_pending.jsx
deleted file mode 100644
index e9c1a9783..000000000
--- a/app/javascript/flavours/glitch/components/load_pending.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-export default class LoadPending extends PureComponent {
-
-  static propTypes = {
-    onClick: PropTypes.func,
-    count: PropTypes.number,
-  };
-
-  render() {
-    const { count } = this.props;
-
-    return (
-      <button className='load-more load-gap' onClick={this.props.onClick}>
-        <FormattedMessage id='load_pending' defaultMessage='{count, plural, one {# new item} other {# new items}}' values={{ count }} />
-      </button>
-    );
-  }
-
-}
diff --git a/app/javascript/flavours/glitch/components/load_pending.tsx b/app/javascript/flavours/glitch/components/load_pending.tsx
new file mode 100644
index 000000000..f7589622e
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/load_pending.tsx
@@ -0,0 +1,18 @@
+import { FormattedMessage } from 'react-intl';
+
+interface Props {
+  onClick: (event: React.MouseEvent) => void;
+  count: number;
+}
+
+export const LoadPending: React.FC<Props> = ({ onClick, count }) => {
+  return (
+    <button className='load-more load-gap' onClick={onClick}>
+      <FormattedMessage
+        id='load_pending'
+        defaultMessage='{count, plural, one {# new item} other {# new items}}'
+        values={{ count }}
+      />
+    </button>
+  );
+};
diff --git a/app/javascript/flavours/glitch/components/scrollable_list.jsx b/app/javascript/flavours/glitch/components/scrollable_list.jsx
index f8a12c60c..d6ca7ab25 100644
--- a/app/javascript/flavours/glitch/components/scrollable_list.jsx
+++ b/app/javascript/flavours/glitch/components/scrollable_list.jsx
@@ -16,7 +16,7 @@ import IntersectionObserverWrapper from 'flavours/glitch/features/ui/util/inters
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
 
 import { LoadMore } from './load_more';
-import LoadPending from './load_pending';
+import { LoadPending } from './load_pending';
 import LoadingIndicator from './loading_indicator';
 
 const MOUSE_IDLE_DELAY = 300;