From 6077f3e24cd3f124d3ec8a4e53215e8d7ce3d564 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=9F=E3=81=84=E3=81=A1=20=E3=81=B2?=
<taichi221228@icloud.com>
Date: Wed, 24 May 2023 16:20:39 +0900
Subject: [PATCH] Rewrite `<LoadGap />` as FC and TS (#25042)
---
.../mastodon/components/load_gap.jsx | 37 -------------------
.../mastodon/components/load_gap.tsx | 36 ++++++++++++++++++
.../mastodon/components/status_list.jsx | 2 +-
.../mastodon/features/notifications/index.jsx | 2 +-
4 files changed, 38 insertions(+), 39 deletions(-)
delete mode 100644 app/javascript/mastodon/components/load_gap.jsx
create mode 100644 app/javascript/mastodon/components/load_gap.tsx
diff --git a/app/javascript/mastodon/components/load_gap.jsx b/app/javascript/mastodon/components/load_gap.jsx
deleted file mode 100644
index c4e5638042..0000000000
--- a/app/javascript/mastodon/components/load_gap.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, defineMessages } from 'react-intl';
-
-import { Icon } from 'mastodon/components/icon';
-
-const messages = defineMessages({
- load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
-});
-
-class LoadGap extends PureComponent {
-
- static propTypes = {
- disabled: PropTypes.bool,
- maxId: PropTypes.string,
- onClick: PropTypes.func.isRequired,
- intl: PropTypes.object.isRequired,
- };
-
- handleClick = () => {
- this.props.onClick(this.props.maxId);
- };
-
- render () {
- const { disabled, intl } = this.props;
-
- return (
- <button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}>
- <Icon id='ellipsis-h' />
- </button>
- );
- }
-
-}
-
-export default injectIntl(LoadGap);
diff --git a/app/javascript/mastodon/components/load_gap.tsx b/app/javascript/mastodon/components/load_gap.tsx
new file mode 100644
index 0000000000..f741f68341
--- /dev/null
+++ b/app/javascript/mastodon/components/load_gap.tsx
@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import type { InjectedIntl } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
+
+import { Icon } from 'mastodon/components/icon';
+
+const messages = defineMessages({
+ load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
+});
+
+interface Props {
+ disabled: boolean;
+ maxId: string;
+ onClick: (maxId: string) => void;
+ intl: InjectedIntl;
+}
+
+export const LoadGap = injectIntl<Props>(
+ ({ disabled, maxId, onClick, intl }) => {
+ const handleClick = useCallback(() => {
+ onClick(maxId);
+ }, [maxId, onClick]);
+
+ return (
+ <button
+ className='load-more load-gap'
+ disabled={disabled}
+ onClick={handleClick}
+ aria-label={intl.formatMessage(messages.load_more)}
+ >
+ <Icon id='ellipsis-h' />
+ </button>
+ );
+ }
+);
diff --git a/app/javascript/mastodon/components/status_list.jsx b/app/javascript/mastodon/components/status_list.jsx
index ff9c98b4ea..e92dd233e1 100644
--- a/app/javascript/mastodon/components/status_list.jsx
+++ b/app/javascript/mastodon/components/status_list.jsx
@@ -9,7 +9,7 @@ import RegenerationIndicator from 'mastodon/components/regeneration_indicator';
import StatusContainer from '../containers/status_container';
-import LoadGap from './load_gap';
+import { LoadGap } from './load_gap';
import ScrollableList from './scrollable_list';
export default class StatusList extends ImmutablePureComponent {
diff --git a/app/javascript/mastodon/features/notifications/index.jsx b/app/javascript/mastodon/features/notifications/index.jsx
index ef889acbc0..9fd2cf4b18 100644
--- a/app/javascript/mastodon/features/notifications/index.jsx
+++ b/app/javascript/mastodon/features/notifications/index.jsx
@@ -28,7 +28,7 @@ import {
} from '../../actions/notifications';
import Column from '../../components/column';
import ColumnHeader from '../../components/column_header';
-import LoadGap from '../../components/load_gap';
+import { LoadGap } from '../../components/load_gap';
import ScrollableList from '../../components/scrollable_list';
import NotificationsPermissionBanner from './components/notifications_permission_banner';