PinnedStatuses: TS, FC

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/status_list.tsx

@@ -36,7 +36,7 @@ interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
   /** ID of the timeline in Redux. */
   timelineId?: string,
   /** Whether to display a gap or border between statuses in the list. */
-  divideType: 'space' | 'border',
+  divideType?: 'space' | 'border',
 }
 
 /** Feed of statuses, built atop ScrollableList. */

app/soapbox/features/pinned_statuses/index.js

@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchPinnedStatuses } from 'soapbox/actions/pin_statuses';
-import MissingIndicator from 'soapbox/components/missing_indicator';
-import StatusList from 'soapbox/components/status_list';
-
-import Column from '../ui/components/column';
-
-const messages = defineMessages({
-  heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
-});
-
-const mapStateToProps = (state, { params }) => {
-  const username = params.username || '';
-  const me = state.get('me');
-  const meUsername = state.getIn(['accounts', me, 'username'], '');
-  return {
-    isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
-    statusIds: state.status_lists.get('pins').items,
-    hasMore: !!state.status_lists.get('pins').next,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class PinnedStatuses extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    statusIds: ImmutablePropTypes.orderedSet.isRequired,
-    intl: PropTypes.object.isRequired,
-    hasMore: PropTypes.bool.isRequired,
-    isMyAccount: PropTypes.bool.isRequired,
-  };
-
-  componentDidMount() {
-    this.props.dispatch(fetchPinnedStatuses());
-  }
-
-  render() {
-    const { intl, statusIds, hasMore, isMyAccount } = this.props;
-
-    if (!isMyAccount) {
-      return (
-        <MissingIndicator />
-      );
-    }
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)}>
-        <StatusList
-          statusIds={statusIds}
-          scrollKey='pinned_statuses'
-          hasMore={hasMore}
-          emptyMessage={<FormattedMessage id='pinned_statuses.none' defaultMessage='No pins to show.' />}
-        />
-      </Column>
-    );
-  }
-
-}

app/soapbox/features/pinned_statuses/index.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useParams } from 'react-router-dom';
+
+import { fetchPinnedStatuses } from 'soapbox/actions/pin_statuses';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import StatusList from 'soapbox/components/status_list';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import Column from '../ui/components/column';
+
+const messages = defineMessages({
+  heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
+});
+
+const PinnedStatuses = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const { username } = useParams<{ username: string }>();
+
+  const meUsername = useAppSelector((state) => state.accounts.get(state.me)?.username || '');
+  const statusIds = useAppSelector((state) => state.status_lists.get('pins')!.items);
+  const isLoading = useAppSelector((state) => !!state.status_lists.get('pins')!.isLoading);
+  const hasMore = useAppSelector((state) => !!state.status_lists.get('pins')!.next);
+
+  const isMyAccount = username.toLowerCase() === meUsername.toLowerCase();
+
+  useEffect(() => {
+    dispatch(fetchPinnedStatuses());
+  }, []);
+
+  if (!isMyAccount) {
+    return (
+      <MissingIndicator />
+    );
+  }
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <StatusList
+        statusIds={statusIds}
+        scrollKey='pinned_statuses'
+        hasMore={hasMore}
+        isLoading={isLoading}
+        emptyMessage={<FormattedMessage id='pinned_statuses.none' defaultMessage='No pins to show.' />}
+      />
+    </Column>
+  );
+};
+
+export default PinnedStatuses;