StatusList: break out TimelineQueueButtonHeader into StatusListContainer

app/soapbox/components/status_list.tsx

@@ -1,26 +1,18 @@
 import classNames from 'classnames';
 import { debounce } from 'lodash';
 import React, { useRef, useCallback } from 'react';
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import LoadGap from 'soapbox/components/load_gap';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import TimelineQueueButtonHeader from 'soapbox/components/timeline_queue_button_header';
 import StatusContainer from 'soapbox/containers/status_container';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 
-import type {
+import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
-  Map as ImmutableMap,
-  OrderedSet as ImmutableOrderedSet,
-} from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
 import type { IScrollableList } from 'soapbox/components/scrollable_list';
 
-const messages = defineMessages({
-  queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
-});
-
 interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
   scrollKey: string,
   statusIds: ImmutableOrderedSet<string>,
@@ -35,10 +27,6 @@ interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
   alwaysPrepend?: boolean,
   timelineId?: string,
   queuedItemSize?: number,
-  onDequeueTimeline?: (timelineId: string) => void,
-  totalQueuedItemsCount?: number,
-  group?: ImmutableMap<string, any>,
-  withGroupAdmin?: boolean,
   onScrollToTop?: () => void,
   onScroll?: () => void,
   divideType: 'space' | 'border',
@@ -51,12 +39,8 @@ const StatusList: React.FC<IStatusList> = ({
   divideType = 'border',
   onLoadMore,
   timelineId,
-  totalQueuedItemsCount,
-  onDequeueTimeline,
   isLoading,
   isPartial,
-  withGroupAdmin,
-  group,
   ...other
 }) => {
   const node = useRef<VirtuosoHandle>(null);
@@ -101,11 +85,6 @@ const StatusList: React.FC<IStatusList> = ({
     });
   };
 
-  const handleDequeueTimeline = () => {
-    if (!onDequeueTimeline || !timelineId) return;
-    onDequeueTimeline(timelineId);
-  };
-
   const renderLoadGap = (index: number) => {
     const ids = statusIds.toList();
     const nextId = ids.get(index + 1);
@@ -204,13 +183,6 @@ const StatusList: React.FC<IStatusList> = ({
   }
 
   return (
-    <>
-      <TimelineQueueButtonHeader
-        key='timeline-queue-button-header'
-        onClick={handleDequeueTimeline}
-        count={totalQueuedItemsCount}
-        message={messages.queue}
-      />
     <ScrollableList
       id='status-list'
       key='scrollable-list'
@@ -229,8 +201,7 @@ const StatusList: React.FC<IStatusList> = ({
       {...other}
     >
       {renderScrollableContent()}
-      </ScrollableList>,
+    </ScrollableList>
-    </>
   );
 };
 

app/soapbox/components/timeline_queue_button_header.tsx

@@ -5,11 +5,11 @@ import { useIntl, MessageDescriptor } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
 import { Text } from 'soapbox/components/ui';
-import { useSettings } from 'soapbox/hooks';
+import { useAppSelector, useSettings } from 'soapbox/hooks';
 
 interface ITimelineQueueButtonHeader {
   onClick: () => void,
-  count?: number,
+  timelineId: string,
   message: MessageDescriptor,
   threshold?: number,
   autoloadThreshold?: number,
@@ -17,13 +17,14 @@ interface ITimelineQueueButtonHeader {
 
 const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
   onClick,
-  count = 0,
+  timelineId,
   message,
   threshold = 400,
   autoloadThreshold = 50,
 }) => {
   const intl = useIntl();
   const settings = useSettings();
+  const count = useAppSelector(state => state.timelines.getIn([timelineId, 'totalQueuedItemsCount']));
 
   const [scrolled, setScrolled] = useState<boolean>(false);
   const autoload = settings.get('autoloadTimelines') === true;

app/soapbox/features/ui/containers/status_list_container.tsx

@@ -1,13 +1,19 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { debounce } from 'lodash';
 import React, { useCallback } from 'react';
+import { defineMessages } from 'react-intl';
 
 import { dequeueTimeline } from 'soapbox/actions/timelines';
 import { scrollTopTimeline } from 'soapbox/actions/timelines';
 import StatusList, { IStatusList } from 'soapbox/components/status_list';
+import TimelineQueueButtonHeader from 'soapbox/components/timeline_queue_button_header';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetStatusIds } from 'soapbox/selectors';
 
+const messages = defineMessages({
+  queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
+});
+
 interface IStatusListContainer extends Omit<IStatusList, 'statusIds' | 'isLoading' | 'hasMore'> {
   timelineId: string,
 }
@@ -25,9 +31,8 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
   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) => {
+  const handleDequeueTimeline = () => {
     dispatch(dequeueTimeline(timelineId, onLoadMore));
   };
 
@@ -40,8 +45,15 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
   }, 100), []);
 
   return (
+    <>
+      <TimelineQueueButtonHeader
+        key='timeline-queue-button-header'
+        onClick={handleDequeueTimeline}
+        timelineId={timelineId}
+        message={messages.queue}
+      />
+
       <StatusList
-      onDequeueTimeline={handleDequeueTimeline}
         onScrollToTop={handleScrollToTop}
         onScroll={handleScroll}
         lastStatusId={lastStatusId}
@@ -49,10 +61,10 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
         isLoading={isLoading}
         isPartial={isPartial}
         hasMore={hasMore}
-      totalQueuedItemsCount={totalQueuedItemsCount}
         onLoadMore={onLoadMore}
         {...rest}
       />
+    </>
   );
 };