From 0a34bcfcba395a41c500543e19a8843fdb49a7a7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Jun 2022 12:24:55 -0500
Subject: [PATCH 1/7] StatusList: fix infinite scrolling (apparently I don't
 understand how useCallback works)

---
 app/soapbox/components/status_list.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx
index a421f62a3..edfcd505a 100644
--- a/app/soapbox/components/status_list.tsx
+++ b/app/soapbox/components/status_list.tsx
@@ -68,11 +68,11 @@ const StatusList: React.FC<IStatusList> = ({
   };
 
   const handleLoadOlder = useCallback(debounce(() => {
-    const loadMoreID = lastStatusId || statusIds.last();
-    if (onLoadMore && loadMoreID) {
-      onLoadMore(loadMoreID);
+    const maxId = lastStatusId || statusIds.last();
+    if (onLoadMore && maxId) {
+      onLoadMore(maxId);
     }
-  }, 300, { leading: true }), []);
+  }, 300, { leading: true }), [onLoadMore, lastStatusId, statusIds.last()]);
 
   const selectChild = (index: number) => {
     node.current?.scrollIntoView({

From edf366858a55165411ebe50e50b37cea9afcc297 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Jun 2022 12:25:59 -0500
Subject: [PATCH 2/7] StatusListContainer: bust useCallback if timelineId
 changes

---
 app/soapbox/features/ui/containers/status_list_container.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/containers/status_list_container.tsx b/app/soapbox/features/ui/containers/status_list_container.tsx
index 4dafbbf6d..196d58fc8 100644
--- a/app/soapbox/features/ui/containers/status_list_container.tsx
+++ b/app/soapbox/features/ui/containers/status_list_container.tsx
@@ -38,11 +38,11 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
 
   const handleScrollToTop = useCallback(debounce(() => {
     dispatch(scrollTopTimeline(timelineId, true));
-  }, 100), []);
+  }, 100), [timelineId]);
 
   const handleScroll = useCallback(debounce(() => {
     dispatch(scrollTopTimeline(timelineId, false));
-  }, 100), []);
+  }, 100), [timelineId]);
 
   return (
     <>

From 2aa4b41528e0b3fda3382876dc838efb94f3fdae Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Jun 2022 12:31:23 -0500
Subject: [PATCH 3/7] StatusListContainer --> Timeline

---
 app/soapbox/features/community_timeline/index.js            | 4 ++--
 app/soapbox/features/direct_timeline/index.tsx              | 4 ++--
 app/soapbox/features/groups/timeline/index.js               | 4 ++--
 app/soapbox/features/hashtag_timeline/index.js              | 4 ++--
 app/soapbox/features/home_timeline/index.js                 | 4 ++--
 app/soapbox/features/list_timeline/index.tsx                | 4 ++--
 app/soapbox/features/public_timeline/index.js               | 4 ++--
 app/soapbox/features/remote_timeline/index.tsx              | 4 ++--
 app/soapbox/features/test_timeline/index.tsx                | 4 ++--
 .../status_list_container.tsx => components/timeline.tsx}   | 6 +++---
 10 files changed, 21 insertions(+), 21 deletions(-)
 rename app/soapbox/features/ui/{containers/status_list_container.tsx => components/timeline.tsx} (92%)

diff --git a/app/soapbox/features/community_timeline/index.js b/app/soapbox/features/community_timeline/index.js
index 1ccc6076f..cb64b49b3 100644
--- a/app/soapbox/features/community_timeline/index.js
+++ b/app/soapbox/features/community_timeline/index.js
@@ -9,7 +9,7 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import { Column } from 'soapbox/components/ui';
 
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 import ColumnSettings from './containers/column_settings_container';
 
@@ -81,7 +81,7 @@ class CommunityTimeline extends React.PureComponent {
     return (
       <Column label={intl.formatMessage(messages.title)} transparent>
         <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
-        <StatusListContainer
+        <Timeline
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           onLoadMore={this.handleLoadMore}
diff --git a/app/soapbox/features/direct_timeline/index.tsx b/app/soapbox/features/direct_timeline/index.tsx
index 5244533a8..49d275c68 100644
--- a/app/soapbox/features/direct_timeline/index.tsx
+++ b/app/soapbox/features/direct_timeline/index.tsx
@@ -9,7 +9,7 @@ import ColumnHeader from 'soapbox/components/column_header';
 import { Column } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Direct messages' },
@@ -52,7 +52,7 @@ const DirectTimeline = () => {
         onSelected={handleSuggestion}
       />
 
-      <StatusListContainer
+      <Timeline
         scrollKey='direct_timeline'
         timelineId='direct'
         onLoadMore={handleLoadMore}
diff --git a/app/soapbox/features/groups/timeline/index.js b/app/soapbox/features/groups/timeline/index.js
index 0e60bd886..fc8972c4a 100644
--- a/app/soapbox/features/groups/timeline/index.js
+++ b/app/soapbox/features/groups/timeline/index.js
@@ -12,7 +12,7 @@ import { connectGroupStream } from '../../../actions/streaming';
 import { expandGroupTimeline } from '../../../actions/timelines';
 import Avatar from '../../../components/avatar';
 import MissingIndicator from '../../../components/missing_indicator';
-import StatusListContainer from '../../ui/containers/status_list_container';
+import Timeline from '../../ui/components/timeline';
 
 const mapStateToProps = (state, props) => {
   const me = state.get('me');
@@ -90,7 +90,7 @@ class GroupTimeline extends React.PureComponent {
         )}
 
         <div className='group__feed'>
-          <StatusListContainer
+          <Timeline
             alwaysPrepend
             scrollKey={`group_timeline-${columnId}`}
             timelineId={`group:${id}`}
diff --git a/app/soapbox/features/hashtag_timeline/index.js b/app/soapbox/features/hashtag_timeline/index.js
index bdc302f96..bf050766c 100644
--- a/app/soapbox/features/hashtag_timeline/index.js
+++ b/app/soapbox/features/hashtag_timeline/index.js
@@ -8,7 +8,7 @@ import { connectHashtagStream } from '../../actions/streaming';
 import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines';
 import ColumnHeader from '../../components/column_header';
 import { Column } from '../../components/ui';
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 const mapStateToProps = (state, props) => ({
   hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}`, 'unread']) > 0,
@@ -114,7 +114,7 @@ class HashtagTimeline extends React.PureComponent {
     return (
       <Column label={`#${id}`} transparent>
         <ColumnHeader active={hasUnread} title={this.title()} />
-        <StatusListContainer
+        <Timeline
           scrollKey='hashtag_timeline'
           timelineId={`hashtag:${id}`}
           onLoadMore={this.handleLoadMore}
diff --git a/app/soapbox/features/home_timeline/index.js b/app/soapbox/features/home_timeline/index.js
index c408bc2af..01276be6d 100644
--- a/app/soapbox/features/home_timeline/index.js
+++ b/app/soapbox/features/home_timeline/index.js
@@ -10,7 +10,7 @@ import { getFeatures } from 'soapbox/utils/features';
 
 import { expandHomeTimeline } from '../../actions/timelines';
 import { Column } from '../../components/ui';
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 function FollowRecommendationsContainer() {
   return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container');
@@ -114,7 +114,7 @@ class HomeTimeline extends React.PureComponent {
             {Component => <Component onDone={this.handleDone} />}
           </BundleContainer>
         ) : (
-          <StatusListContainer
+          <Timeline
             scrollKey='home_timeline'
             onLoadMore={this.handleLoadMore}
             onRefresh={this.handleRefresh}
diff --git a/app/soapbox/features/list_timeline/index.tsx b/app/soapbox/features/list_timeline/index.tsx
index 9402de86a..af8a2f8a3 100644
--- a/app/soapbox/features/list_timeline/index.tsx
+++ b/app/soapbox/features/list_timeline/index.tsx
@@ -12,7 +12,7 @@ import { Button, Spinner } from 'soapbox/components/ui';
 import Column from 'soapbox/features/ui/components/column';
 import { useAppSelector } from 'soapbox/hooks';
 
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 // const messages = defineMessages({
 //   deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
@@ -110,7 +110,7 @@ const ListTimeline: React.FC = () => {
         </div>
       </HomeColumnHeader> */}
 
-      <StatusListContainer
+      <Timeline
         scrollKey='list_timeline'
         timelineId={`list:${id}`}
         onLoadMore={handleLoadMore}
diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js
index 7404c6106..0473352fa 100644
--- a/app/soapbox/features/public_timeline/index.js
+++ b/app/soapbox/features/public_timeline/index.js
@@ -12,7 +12,7 @@ import { Column } from 'soapbox/components/ui';
 import Accordion from 'soapbox/features/ui/components/accordion';
 
 import PinnedHostsPicker from '../remote_timeline/components/pinned_hosts_picker';
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 import ColumnSettings from './containers/column_settings_container';
 
@@ -130,7 +130,7 @@ class CommunityTimeline extends React.PureComponent {
             />
           </Accordion>
         </div>}
-        <StatusListContainer
+        <Timeline
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           onLoadMore={this.handleLoadMore}
diff --git a/app/soapbox/features/remote_timeline/index.tsx b/app/soapbox/features/remote_timeline/index.tsx
index 0942a23b5..2f2869d26 100644
--- a/app/soapbox/features/remote_timeline/index.tsx
+++ b/app/soapbox/features/remote_timeline/index.tsx
@@ -9,7 +9,7 @@ import { HStack, Text } from 'soapbox/components/ui';
 import Column from 'soapbox/features/ui/components/column';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 import PinnedHostsPicker from './components/pinned_hosts_picker';
 
@@ -77,7 +77,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
           />
         </Text>
       </HStack>}
-      <StatusListContainer
+      <Timeline
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
         onLoadMore={handleLoadMore}
diff --git a/app/soapbox/features/test_timeline/index.tsx b/app/soapbox/features/test_timeline/index.tsx
index ace235b8f..024f38204 100644
--- a/app/soapbox/features/test_timeline/index.tsx
+++ b/app/soapbox/features/test_timeline/index.tsx
@@ -7,7 +7,7 @@ import { expandTimelineSuccess } from 'soapbox/actions/timelines';
 import SubNavigation from 'soapbox/components/sub_navigation';
 
 import { Column } from '../../components/ui';
-import StatusListContainer from '../ui/containers/status_list_container';
+import Timeline from '../ui/components/timeline';
 
 const messages = defineMessages({
   title: { id: 'column.test', defaultMessage: 'Test timeline' },
@@ -40,7 +40,7 @@ const TestTimeline: React.FC = () => {
   return (
     <Column label={intl.formatMessage(messages.title)} transparent>
       <SubNavigation message={intl.formatMessage(messages.title)} />
-      <StatusListContainer
+      <Timeline
         scrollKey={`${timelineId}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
         emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
diff --git a/app/soapbox/features/ui/containers/status_list_container.tsx b/app/soapbox/features/ui/components/timeline.tsx
similarity index 92%
rename from app/soapbox/features/ui/containers/status_list_container.tsx
rename to app/soapbox/features/ui/components/timeline.tsx
index 196d58fc8..3265509f5 100644
--- a/app/soapbox/features/ui/containers/status_list_container.tsx
+++ b/app/soapbox/features/ui/components/timeline.tsx
@@ -14,11 +14,11 @@ 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'> {
+interface ITimeline extends Omit<IStatusList, 'statusIds' | 'isLoading' | 'hasMore'> {
   timelineId: string,
 }
 
-const StatusListContainer: React.FC<IStatusListContainer> = ({
+const Timeline: React.FC<ITimeline> = ({
   timelineId,
   onLoadMore,
   ...rest
@@ -68,4 +68,4 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
   );
 };
 
-export default StatusListContainer;
+export default Timeline;

From 6da72d874e5267ae532ef75f2d7060b94adda1cd Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Jun 2022 12:34:30 -0500
Subject: [PATCH 4/7] TimelineQueueButtonHeader --> ScrollTopButton

---
 ..._header.test.js => scroll-top-button.test.js} | 16 ++++++++--------
 ...e_button_header.tsx => scroll-top-button.tsx} |  6 +++---
 app/soapbox/features/notifications/index.js      |  4 ++--
 app/soapbox/features/ui/components/timeline.tsx  |  4 ++--
 4 files changed, 15 insertions(+), 15 deletions(-)
 rename app/soapbox/components/__tests__/{timeline_queue_button_header.test.js => scroll-top-button.test.js} (79%)
 rename app/soapbox/components/{timeline_queue_button_header.tsx => scroll-top-button.tsx} (93%)

diff --git a/app/soapbox/components/__tests__/timeline_queue_button_header.test.js b/app/soapbox/components/__tests__/scroll-top-button.test.js
similarity index 79%
rename from app/soapbox/components/__tests__/timeline_queue_button_header.test.js
rename to app/soapbox/components/__tests__/scroll-top-button.test.js
index bc011d309..c23a733ef 100644
--- a/app/soapbox/components/__tests__/timeline_queue_button_header.test.js
+++ b/app/soapbox/components/__tests__/scroll-top-button.test.js
@@ -3,17 +3,17 @@ import React from 'react';
 import { defineMessages } from 'react-intl';
 
 import { render, screen } from '../../jest/test-helpers';
-import TimelineQueueButtonHeader from '../timeline_queue_button_header';
+import ScrollTopButton from '../scroll-top-button';
 
 const messages = defineMessages({
   queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
 });
 
-describe('<TimelineQueueButtonHeader />', () => {
+describe('<ScrollTopButton />', () => {
   it('renders correctly', async() => {
     render(
-      <TimelineQueueButtonHeader
-        key='timeline-queue-button-header'
+      <ScrollTopButton
+        key='scroll-top-button'
         onClick={() => {}} // eslint-disable-line react/jsx-no-bind
         timelineId='home'
         message={messages.queue}
@@ -24,8 +24,8 @@ describe('<TimelineQueueButtonHeader />', () => {
     expect(screen.queryAllByRole('link')).toHaveLength(0);
 
     render(
-      <TimelineQueueButtonHeader
-        key='timeline-queue-button-header'
+      <ScrollTopButton
+        key='scroll-top-button'
         onClick={() => {}} // eslint-disable-line react/jsx-no-bind
         timelineId='home'
         message={messages.queue}
@@ -36,8 +36,8 @@ describe('<TimelineQueueButtonHeader />', () => {
     expect(screen.getByText(/Click to see\s+1\s+new post/, { hidden: true })).toBeInTheDocument();
 
     render(
-      <TimelineQueueButtonHeader
-        key='timeline-queue-button-header'
+      <ScrollTopButton
+        key='scroll-top-button'
         onClick={() => {}} // eslint-disable-line react/jsx-no-bind
         timelineId='home'
         message={messages.queue}
diff --git a/app/soapbox/components/timeline_queue_button_header.tsx b/app/soapbox/components/scroll-top-button.tsx
similarity index 93%
rename from app/soapbox/components/timeline_queue_button_header.tsx
rename to app/soapbox/components/scroll-top-button.tsx
index 292368571..11ceb9e40 100644
--- a/app/soapbox/components/timeline_queue_button_header.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -8,7 +8,7 @@ import { Text } from 'soapbox/components/ui';
 import { useAppSelector, useSettings } from 'soapbox/hooks';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
-interface ITimelineQueueButtonHeader {
+interface IScrollTopButton {
   onClick: () => void,
   timelineId: string,
   message: MessageDescriptor,
@@ -16,7 +16,7 @@ interface ITimelineQueueButtonHeader {
   autoloadThreshold?: number,
 }
 
-const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
+const ScrollTopButton: React.FC<IScrollTopButton> = ({
   onClick,
   timelineId,
   message,
@@ -82,4 +82,4 @@ const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
   );
 };
 
-export default TimelineQueueButtonHeader;
+export default ScrollTopButton;
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index 8ef05fb73..d3b5cb318 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -14,8 +14,8 @@ import {
   dequeueNotifications,
 } from 'soapbox/actions/notifications';
 import { getSettings } from 'soapbox/actions/settings';
+import ScrollTopButton from 'soapbox/components/scroll-top-button';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import TimelineQueueButtonHeader from  'soapbox/components/timeline_queue_button_header';
 import { Column } from 'soapbox/components/ui';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
 
@@ -195,7 +195,7 @@ class Notifications extends React.PureComponent {
     return (
       <Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)} withHeader={false}>
         {filterBarContainer}
-        <TimelineQueueButtonHeader
+        <ScrollTopButton
           onClick={this.handleDequeueNotifications}
           count={totalQueuedNotificationsCount}
           message={messages.queue}
diff --git a/app/soapbox/features/ui/components/timeline.tsx b/app/soapbox/features/ui/components/timeline.tsx
index 3265509f5..2c143d8fd 100644
--- a/app/soapbox/features/ui/components/timeline.tsx
+++ b/app/soapbox/features/ui/components/timeline.tsx
@@ -5,8 +5,8 @@ import { defineMessages } from 'react-intl';
 
 import { dequeueTimeline } from 'soapbox/actions/timelines';
 import { scrollTopTimeline } from 'soapbox/actions/timelines';
+import ScrollTopButton from 'soapbox/components/scroll-top-button';
 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';
 
@@ -46,7 +46,7 @@ const Timeline: React.FC<ITimeline> = ({
 
   return (
     <>
-      <TimelineQueueButtonHeader
+      <ScrollTopButton
         key='timeline-queue-button-header'
         onClick={handleDequeueTimeline}
         timelineId={timelineId}

From aad192d150238a39850b415470aeebf03696c9aa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Jun 2022 12:38:54 -0500
Subject: [PATCH 5/7] ScrollTopButton: restore `count` prop so it works in
 Notifications again

---
 app/soapbox/components/scroll-top-button.tsx    | 7 +++----
 app/soapbox/features/ui/components/timeline.tsx | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 11ceb9e40..8fed6cc78 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -5,12 +5,12 @@ import { useIntl, MessageDescriptor } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
 import { Text } from 'soapbox/components/ui';
-import { useAppSelector, useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IScrollTopButton {
   onClick: () => void,
-  timelineId: string,
+  count: number,
   message: MessageDescriptor,
   threshold?: number,
   autoloadThreshold?: number,
@@ -18,14 +18,13 @@ interface IScrollTopButton {
 
 const ScrollTopButton: React.FC<IScrollTopButton> = ({
   onClick,
-  timelineId,
+  count,
   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;
diff --git a/app/soapbox/features/ui/components/timeline.tsx b/app/soapbox/features/ui/components/timeline.tsx
index 2c143d8fd..74efaac2e 100644
--- a/app/soapbox/features/ui/components/timeline.tsx
+++ b/app/soapbox/features/ui/components/timeline.tsx
@@ -31,6 +31,7 @@ const Timeline: React.FC<ITimeline> = ({
   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 = () => {
     dispatch(dequeueTimeline(timelineId, onLoadMore));
@@ -49,7 +50,7 @@ const Timeline: React.FC<ITimeline> = ({
       <ScrollTopButton
         key='timeline-queue-button-header'
         onClick={handleDequeueTimeline}
-        timelineId={timelineId}
+        count={totalQueuedItemsCount}
         message={messages.queue}
       />
 

From fbb460817f97e7fbf073598236eb5f1ae83d82db Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Jun 2022 13:09:46 -0500
Subject: [PATCH 6/7] Add JSDoc comments to timeline components

---
 app/soapbox/components/scroll-top-button.tsx  |  8 ++++-
 app/soapbox/components/scrollable_list.tsx    | 34 +++++++++++++++----
 app/soapbox/components/status_list.tsx        | 17 +++++++---
 .../features/ui/components/timeline.tsx       |  3 ++
 4 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 8fed6cc78..698c92779 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -9,13 +9,19 @@ import { useSettings } from 'soapbox/hooks';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IScrollTopButton {
+  /** Callback when clicked, and also when scrolled to the top. */
   onClick: () => void,
+  /** Number of unread items. */
   count: number,
+  /** Message to display in the button (should contain a `{count}` value). */
   message: MessageDescriptor,
+  /** Distance from the top of the screen (scrolling down) before the button appears. */
   threshold?: number,
+  /** Distance from the top of the screen (scrolling up) before the action is triggered. */
   autoloadThreshold?: number,
 }
 
+/** Floating new post counter above timelines, clicked to scroll to top. */
 const ScrollTopButton: React.FC<IScrollTopButton> = ({
   onClick,
   count,
@@ -41,7 +47,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
     } else {
       setScrolled(false);
     }
-  }, 150, { trailing: true }), []);
+  }, 150, { trailing: true }), [autoload, threshold, autoloadThreshold]);
 
   const scrollUp = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx
index e546f2a45..8b803be66 100644
--- a/app/soapbox/components/scrollable_list.tsx
+++ b/app/soapbox/components/scrollable_list.tsx
@@ -9,6 +9,7 @@ import { useSettings } from 'soapbox/hooks';
 import LoadMore from './load_more';
 import { Spinner, Text } from './ui';
 
+/** Custom Viruoso component context. */
 type Context = {
   itemClassName?: string,
   listClassName?: string,
@@ -20,6 +21,7 @@ type SavedScrollPosition = {
   offset: number,
 }
 
+/** Custom Virtuoso Item component representing a single scrollable item. */
 // NOTE: It's crucial to space lists with **padding** instead of margin!
 // Pass an `itemClassName` like `pb-3`, NOT a `space-y-3` className
 // https://virtuoso.dev/troubleshooting#list-does-not-scroll-to-the-bottom--items-jump-around
@@ -27,6 +29,7 @@ const Item: Components<Context>['Item'] = ({ context, ...rest }) => (
   <div className={context?.itemClassName} {...rest} />
 );
 
+/** Custom Virtuoso List component for the outer container. */
 // Ensure the className winds up here
 const List: Components<Context>['List'] = React.forwardRef((props, ref) => {
   const { context, ...rest } = props;
@@ -34,28 +37,47 @@ const List: Components<Context>['List'] = React.forwardRef((props, ref) => {
 });
 
 interface IScrollableList extends VirtuosoProps<any, any> {
+  /** Unique key to preserve the scroll position when navigating back. */
   scrollKey?: string,
+  /** Pagination callback when the end of the list is reached. */
   onLoadMore?: () => void,
+  /** Whether the data is currently being fetched. */
   isLoading?: boolean,
+  /** Whether to actually display the loading state. */
   showLoading?: boolean,
+  /** Whether we expect an additional page of data. */
   hasMore?: boolean,
+  /** Additional element to display at the top of the list. */
   prepend?: React.ReactNode,
+  /** Whether to display the prepended element. */
   alwaysPrepend?: boolean,
+  /** Message to display when the list is loaded but empty. */
   emptyMessage?: React.ReactNode,
+  /** Scrollable content. */
   children: Iterable<React.ReactNode>,
+  /** Callback when the list is scrolled to the top. */
   onScrollToTop?: () => void,
+  /** Callback when the list is scrolled. */
   onScroll?: () => void,
+  /** Placeholder component to render while loading. */
   placeholderComponent?: React.ComponentType | React.NamedExoticComponent,
+  /** Number of placeholders to render while loading. */
   placeholderCount?: number,
+  /** Pull to refresh callback. */
   onRefresh?: () => Promise<any>,
+  /** Extra class names on the Virtuoso element. */
   className?: string,
+  /** Class names on each item container. */
   itemClassName?: string,
+  /** `id` attribute on the Virtuoso element. */
   id?: string,
+  /** CSS styles on the Virtuoso element. */
   style?: React.CSSProperties,
+  /** Whether to use the window to scroll the content instead of Virtuoso's container. */
   useWindowScroll?: boolean
 }
 
-/** Legacy ScrollableList with Virtuoso for backwards-compatibility */
+/** Legacy ScrollableList with Virtuoso for backwards-compatibility. */
 const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   scrollKey,
   prepend = null,
@@ -88,7 +110,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   const topIndex = useRef<number>(scrollData ? scrollData.index : 0);
   const topOffset = useRef<number>(scrollData ? scrollData.offset : 0);
 
-  /** Normalized children */
+  /** Normalized children. */
   const elements = Array.from(children || []);
 
   const showPlaceholder = showLoading && Placeholder && placeholderCount > 0;
@@ -129,7 +151,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
     };
   }, []);
 
-  /* Render an empty state instead of the scrollable list */
+  /* Render an empty state instead of the scrollable list. */
   const renderEmpty = (): JSX.Element => {
     return (
       <div className='mt-2'>
@@ -146,7 +168,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
     );
   };
 
-  /** Render a single item */
+  /** Render a single item. */
   const renderItem = (_i: number, element: JSX.Element): JSX.Element => {
     if (showPlaceholder) {
       return <Placeholder />;
@@ -192,7 +214,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
     return 0;
   }, [showLoading, initialTopMostItemIndex]);
 
-  /** Render the actual Virtuoso list */
+  /** Render the actual Virtuoso list. */
   const renderFeed = (): JSX.Element => (
     <Virtuoso
       ref={ref}
@@ -222,7 +244,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
     />
   );
 
-  /** Conditionally render inner elements */
+  /** Conditionally render inner elements. */
   const renderBody = (): JSX.Element => {
     if (isEmpty) {
       return renderEmpty();
diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx
index edfcd505a..37e37f59d 100644
--- a/app/soapbox/components/status_list.tsx
+++ b/app/soapbox/components/status_list.tsx
@@ -14,24 +14,31 @@ import type { VirtuosoHandle } from 'react-virtuoso';
 import type { IScrollableList } from 'soapbox/components/scrollable_list';
 
 interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
+  /** Unique key to preserve the scroll position when navigating back. */
   scrollKey: string,
+  /** List of status IDs to display. */
   statusIds: ImmutableOrderedSet<string>,
+  /** Last _unfiltered_ status ID (maxId) for pagination.  */
   lastStatusId?: string,
+  /** Pinned statuses to show at the top of the feed. */
   featuredStatusIds?: ImmutableOrderedSet<string>,
+  /** Pagination callback when the end of the list is reached. */
   onLoadMore?: (lastStatusId: string) => void,
+  /** Whether the data is currently being fetched. */
   isLoading: boolean,
+  /** Whether the server did not return a complete page. */
   isPartial?: boolean,
+  /** Whether we expect an additional page of data. */
   hasMore: boolean,
-  prepend?: React.ReactNode,
+  /** Message to display when the list is loaded but empty. */
   emptyMessage: React.ReactNode,
-  alwaysPrepend?: boolean,
+  /** ID of the timeline in Redux. */
   timelineId?: string,
-  queuedItemSize?: number,
-  onScrollToTop?: () => void,
-  onScroll?: () => void,
+  /** Whether to display a gap or border between statuses in the list. */
   divideType: 'space' | 'border',
 }
 
+/** Feed of statuses, built atop ScrollableList. */
 const StatusList: React.FC<IStatusList> = ({
   statusIds,
   lastStatusId,
diff --git a/app/soapbox/features/ui/components/timeline.tsx b/app/soapbox/features/ui/components/timeline.tsx
index 74efaac2e..af3ff8e8c 100644
--- a/app/soapbox/features/ui/components/timeline.tsx
+++ b/app/soapbox/features/ui/components/timeline.tsx
@@ -15,9 +15,11 @@ const messages = defineMessages({
 });
 
 interface ITimeline extends Omit<IStatusList, 'statusIds' | 'isLoading' | 'hasMore'> {
+  /** ID of the timeline in Redux. */
   timelineId: string,
 }
 
+/** Scrollable list of statuses from a timeline in the Redux store. */
 const Timeline: React.FC<ITimeline> = ({
   timelineId,
   onLoadMore,
@@ -55,6 +57,7 @@ const Timeline: React.FC<ITimeline> = ({
       />
 
       <StatusList
+        timelineId={timelineId}
         onScrollToTop={handleScrollToTop}
         onScroll={handleScroll}
         lastStatusId={lastStatusId}

From d0130fb2962fc4279a6768d82d3efd7f7badfe8d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Jun 2022 13:16:22 -0500
Subject: [PATCH 7/7] ScrollTopButton: fix tests, actually don't use
 shortNumberFormat for now (it messes up pluralization)

---
 .../__tests__/scroll-top-button.test.js       | 23 +++++++------------
 app/soapbox/components/scroll-top-button.tsx  |  3 +--
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/app/soapbox/components/__tests__/scroll-top-button.test.js b/app/soapbox/components/__tests__/scroll-top-button.test.js
index c23a733ef..89518b977 100644
--- a/app/soapbox/components/__tests__/scroll-top-button.test.js
+++ b/app/soapbox/components/__tests__/scroll-top-button.test.js
@@ -1,4 +1,3 @@
-import { fromJS } from 'immutable';
 import React from 'react';
 import { defineMessages } from 'react-intl';
 
@@ -14,37 +13,31 @@ describe('<ScrollTopButton />', () => {
     render(
       <ScrollTopButton
         key='scroll-top-button'
-        onClick={() => {}} // eslint-disable-line react/jsx-no-bind
-        timelineId='home'
+        onClick={() => {}}
+        count={0}
         message={messages.queue}
       />,
-      undefined,
-      { timelines: fromJS({ home: { totalQueuedItemsCount: 0 } }) },
     );
     expect(screen.queryAllByRole('link')).toHaveLength(0);
 
     render(
       <ScrollTopButton
         key='scroll-top-button'
-        onClick={() => {}} // eslint-disable-line react/jsx-no-bind
-        timelineId='home'
+        onClick={() => {}}
+        count={1}
         message={messages.queue}
       />,
-      undefined,
-      { timelines: fromJS({ home: { totalQueuedItemsCount: 1 } }) },
     );
-    expect(screen.getByText(/Click to see\s+1\s+new post/, { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument();
 
     render(
       <ScrollTopButton
         key='scroll-top-button'
-        onClick={() => {}} // eslint-disable-line react/jsx-no-bind
-        timelineId='home'
+        onClick={() => {}}
+        count={9999999}
         message={messages.queue}
       />,
-      undefined,
-      { timelines: fromJS({ home: { totalQueuedItemsCount: 9999999 } }) },
     );
-    expect(screen.getByText(/10.*M/, { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument();
   });
 });
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 698c92779..eb5d00593 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -6,7 +6,6 @@ import { useIntl, MessageDescriptor } from 'react-intl';
 import Icon from 'soapbox/components/icon';
 import { Text } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IScrollTopButton {
   /** Callback when clicked, and also when scrolled to the top. */
@@ -79,7 +78,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
         {(count > 0) && (
           <Text theme='inherit' size='sm'>
-            {intl.formatMessage(message, { count: shortNumberFormat(count) })}
+            {intl.formatMessage(message, { count })}
           </Text>
         )}
       </a>