StatusList: break out TimelineQueueButtonHeader into StatusListContainer

dnd
Alex Gleason 2022-06-02 15:29:20 -05:00
rodzic 878d26cb4b
commit 47e43b6540
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 52 dodań i 68 usunięć

Wyświetl plik

@ -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>
);
};

Wyświetl plik

@ -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;

Wyświetl plik

@ -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}
/>
</>
);
};