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 {
-  Map as ImmutableMap,
-  OrderedSet as ImmutableOrderedSet,
-} from 'immutable';
+import type { 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,33 +183,25 @@ 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'
-        isLoading={isLoading}
-        showLoading={isLoading && statusIds.size === 0}
-        onLoadMore={handleLoadOlder}
-        placeholderComponent={PlaceholderStatus}
-        placeholderCount={20}
-        ref={node}
-        className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
-          'divide-none': divideType !== 'border',
-        })}
-        itemClassName={classNames({
-          'pb-3': divideType !== 'border',
-        })}
-        {...other}
-      >
-        {renderScrollableContent()}
-      </ScrollableList>,
-    </>
+    <ScrollableList
+      id='status-list'
+      key='scrollable-list'
+      isLoading={isLoading}
+      showLoading={isLoading && statusIds.size === 0}
+      onLoadMore={handleLoadOlder}
+      placeholderComponent={PlaceholderStatus}
+      placeholderCount={20}
+      ref={node}
+      className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
+        'divide-none': divideType !== 'border',
+      })}
+      itemClassName={classNames({
+        'pb-3': divideType !== 'border',
+      })}
+      {...other}
+    >
+      {renderScrollableContent()}
+    </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,19 +45,26 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
   }, 100), []);
 
   return (
-    <StatusList
-      onDequeueTimeline={handleDequeueTimeline}
-      onScrollToTop={handleScrollToTop}
-      onScroll={handleScroll}
-      lastStatusId={lastStatusId}
-      statusIds={statusIds}
-      isLoading={isLoading}
-      isPartial={isPartial}
-      hasMore={hasMore}
-      totalQueuedItemsCount={totalQueuedItemsCount}
-      onLoadMore={onLoadMore}
-      {...rest}
-    />
+    <>
+      <TimelineQueueButtonHeader
+        key='timeline-queue-button-header'
+        onClick={handleDequeueTimeline}
+        timelineId={timelineId}
+        message={messages.queue}
+      />
+
+      <StatusList
+        onScrollToTop={handleScrollToTop}
+        onScroll={handleScroll}
+        lastStatusId={lastStatusId}
+        statusIds={statusIds}
+        isLoading={isLoading}
+        isPartial={isPartial}
+        hasMore={hasMore}
+        onLoadMore={onLoadMore}
+        {...rest}
+      />
+    </>
   );
 };