[Glitch] Rewrite `<LoadGap />` as FC and TS

Port 6077f3e24c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/load_gap.jsx

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, defineMessages } from 'react-intl';
-
-import { Icon } from 'flavours/glitch/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);

app/javascript/flavours/glitch/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 'flavours/glitch/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>
+    );
+  }
+);

app/javascript/flavours/glitch/components/status_list.jsx

@@ -8,7 +8,7 @@ import { debounce } from 'lodash';
 import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator';
 import StatusContainer from 'flavours/glitch/containers/status_container';
 
-import LoadGap from './load_gap';
+import { LoadGap } from './load_gap';
 import ScrollableList from './scrollable_list';
 
 export default class StatusList extends ImmutablePureComponent {

app/javascript/flavours/glitch/features/notifications/index.jsx

@@ -28,7 +28,7 @@ import { compareId } from 'flavours/glitch/compare_id';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import { Icon } from 'flavours/glitch/components/icon';
-import LoadGap from 'flavours/glitch/components/load_gap';
+import { LoadGap } from 'flavours/glitch/components/load_gap';
 import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';