From 47e43b6540038a84ed0bf9feab44db2d0363ec32 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 2 Jun 2022 15:29:20 -0500 Subject: [PATCH] StatusList: break out TimelineQueueButtonHeader into StatusListContainer --- app/soapbox/components/status_list.tsx | 71 ++++++------------- .../timeline_queue_button_header.tsx | 7 +- .../ui/containers/status_list_container.tsx | 42 +++++++---- 3 files changed, 52 insertions(+), 68 deletions(-) diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx index 42c30b1b5..a421f62a3 100644 --- a/app/soapbox/components/status_list.tsx +++ b/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 { scrollKey: string, statusIds: ImmutableOrderedSet, @@ -35,10 +27,6 @@ interface IStatusList extends Omit { alwaysPrepend?: boolean, timelineId?: string, queuedItemSize?: number, - onDequeueTimeline?: (timelineId: string) => void, - totalQueuedItemsCount?: number, - group?: ImmutableMap, - withGroupAdmin?: boolean, onScrollToTop?: () => void, onScroll?: () => void, divideType: 'space' | 'border', @@ -51,12 +39,8 @@ const StatusList: React.FC = ({ divideType = 'border', onLoadMore, timelineId, - totalQueuedItemsCount, - onDequeueTimeline, isLoading, isPartial, - withGroupAdmin, - group, ...other }) => { const node = useRef(null); @@ -101,11 +85,6 @@ const StatusList: React.FC = ({ }); }; - 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 = ({ } return ( - <> - - - {renderScrollableContent()} - , - + + {renderScrollableContent()} + ); }; diff --git a/app/soapbox/components/timeline_queue_button_header.tsx b/app/soapbox/components/timeline_queue_button_header.tsx index e0d65fc67..122841a0c 100644 --- a/app/soapbox/components/timeline_queue_button_header.tsx +++ b/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 = ({ 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(false); const autoload = settings.get('autoloadTimelines') === true; diff --git a/app/soapbox/features/ui/containers/status_list_container.tsx b/app/soapbox/features/ui/containers/status_list_container.tsx index dcb034c3a..4dafbbf6d 100644 --- a/app/soapbox/features/ui/containers/status_list_container.tsx +++ b/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 { timelineId: string, } @@ -25,9 +31,8 @@ const StatusListContainer: React.FC = ({ 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 = ({ }, 100), []); return ( - + <> + + + + ); };