From 878d26cb4b52f452afef536b5c34a16264404025 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Jun 2022 15:15:30 -0500
Subject: [PATCH] StatusListContainer: convert to TSX

---
 app/soapbox/components/status_list.tsx        |  1 +
 .../ui/containers/status_list_container.js    | 41 -------------
 .../ui/containers/status_list_container.tsx   | 59 +++++++++++++++++++
 app/soapbox/selectors/index.ts                |  2 +-
 4 files changed, 61 insertions(+), 42 deletions(-)
 delete mode 100644 app/soapbox/features/ui/containers/status_list_container.js
 create mode 100644 app/soapbox/features/ui/containers/status_list_container.tsx

diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx
index f3c2add18..42c30b1b5 100644
--- a/app/soapbox/components/status_list.tsx
+++ b/app/soapbox/components/status_list.tsx
@@ -235,3 +235,4 @@ const StatusList: React.FC<IStatusList> = ({
 };
 
 export default StatusList;
+export type { IStatusList };
diff --git a/app/soapbox/features/ui/containers/status_list_container.js b/app/soapbox/features/ui/containers/status_list_container.js
deleted file mode 100644
index c5d180c7e..000000000
--- a/app/soapbox/features/ui/containers/status_list_container.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import { debounce } from 'lodash';
-import { connect } from 'react-redux';
-
-import { dequeueTimeline } from 'soapbox/actions/timelines';
-import { scrollTopTimeline } from 'soapbox/actions/timelines';
-import StatusList from 'soapbox/components/status_list';
-import { makeGetStatusIds } from 'soapbox/selectors';
-
-const makeMapStateToProps = () => {
-  const getStatusIds = makeGetStatusIds();
-
-  const mapStateToProps = (state, { timelineId }) => {
-    const lastStatusId = state.getIn(['timelines', timelineId, 'items'], ImmutableOrderedSet()).last();
-
-    return {
-      statusIds: getStatusIds(state, { type: timelineId }),
-      lastStatusId: lastStatusId,
-      isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
-      isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
-      hasMore:   state.getIn(['timelines', timelineId, 'hasMore']),
-      totalQueuedItemsCount: state.getIn(['timelines', timelineId, 'totalQueuedItemsCount']),
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  onDequeueTimeline(timelineId) {
-    dispatch(dequeueTimeline(timelineId, ownProps.onLoadMore));
-  },
-  onScrollToTop: debounce(() => {
-    dispatch(scrollTopTimeline(ownProps.timelineId, true));
-  }, 100),
-  onScroll: debounce(() => {
-    dispatch(scrollTopTimeline(ownProps.timelineId, false));
-  }, 100),
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);
diff --git a/app/soapbox/features/ui/containers/status_list_container.tsx b/app/soapbox/features/ui/containers/status_list_container.tsx
new file mode 100644
index 000000000..dcb034c3a
--- /dev/null
+++ b/app/soapbox/features/ui/containers/status_list_container.tsx
@@ -0,0 +1,59 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { debounce } from 'lodash';
+import React, { useCallback } from 'react';
+
+import { dequeueTimeline } from 'soapbox/actions/timelines';
+import { scrollTopTimeline } from 'soapbox/actions/timelines';
+import StatusList, { IStatusList } from 'soapbox/components/status_list';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { makeGetStatusIds } from 'soapbox/selectors';
+
+interface IStatusListContainer extends Omit<IStatusList, 'statusIds' | 'isLoading' | 'hasMore'> {
+  timelineId: string,
+}
+
+const StatusListContainer: React.FC<IStatusListContainer> = ({
+  timelineId,
+  onLoadMore,
+  ...rest
+}) => {
+  const dispatch = useAppDispatch();
+  const getStatusIds = useCallback(makeGetStatusIds, [])();
+
+  const lastStatusId = useAppSelector(state => state.timelines.getIn([timelineId, 'items'], ImmutableOrderedSet()).last() as string | undefined);
+  const statusIds = useAppSelector(state => getStatusIds(state, { type: timelineId }));
+  const isLoading = useAppSelector(state => state.timelines.getIn([timelineId, 'isLoading'], true) === true);
+  const isPartial = useAppSelector(state => state.timelines.getIn([timelineId, 'isPartial'], false) === true);
+  const hasMore = useAppSelector(state => state.timelines.getIn([timelineId, 'hasMore']) === true);
+  const totalQueuedItemsCount = useAppSelector(state => state.timelines.getIn([timelineId, 'totalQueuedItemsCount']));
+
+  const handleDequeueTimeline = (timelineId: string) => {
+    dispatch(dequeueTimeline(timelineId, onLoadMore));
+  };
+
+  const handleScrollToTop = useCallback(debounce(() => {
+    dispatch(scrollTopTimeline(timelineId, true));
+  }, 100), []);
+
+  const handleScroll = useCallback(debounce(() => {
+    dispatch(scrollTopTimeline(timelineId, false));
+  }, 100), []);
+
+  return (
+    <StatusList
+      onDequeueTimeline={handleDequeueTimeline}
+      onScrollToTop={handleScrollToTop}
+      onScroll={handleScroll}
+      lastStatusId={lastStatusId}
+      statusIds={statusIds}
+      isLoading={isLoading}
+      isPartial={isPartial}
+      hasMore={hasMore}
+      totalQueuedItemsCount={totalQueuedItemsCount}
+      onLoadMore={onLoadMore}
+      {...rest}
+    />
+  );
+};
+
+export default StatusListContainer;
diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts
index 7d77b4891..fbdadbe37 100644
--- a/app/soapbox/selectors/index.ts
+++ b/app/soapbox/selectors/index.ts
@@ -365,7 +365,7 @@ export const makeGetStatusIds = () => createSelector([
   (state: RootState, { type, prefix }: ColumnQuery) => getSettings(state).get(prefix || type, ImmutableMap()),
   (state: RootState, { type }: ColumnQuery) => state.timelines.getIn([type, 'items'], ImmutableOrderedSet()),
   (state: RootState)           => state.statuses,
-], (columnSettings, statusIds: string[], statuses) => {
+], (columnSettings, statusIds: ImmutableOrderedSet<string>, statuses) => {
   return statusIds.filter((id: string) => {
     const status = statuses.get(id);
     if (!status) return true;