bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'soapbox/develop' into ts

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-06-05 15:07:19 +02:00
commit 5bb26c9b47
19 changed files with 115 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/components/__tests__/scroll-top-button.test.js Normal file
View file

Binary file not shown.

BIN
app/soapbox/components/__tests__/timeline_queue_button_header.test.js
View file

Binary file not shown.

26
app/soapbox/components/timeline_queue_button_header.tsx → app/soapbox/components/scroll-top-button.tsx
View file

@ -5,27 +5,31 @@ 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 { shortNumberFormat } from 'soapbox/utils/numbers';
import { useSettings } from 'soapbox/hooks';
interface ITimelineQueueButtonHeader {
interface IScrollTopButton {
/** Callback when clicked, and also when scrolled to the top. */
onClick: () => void,
timelineId: string,
/** 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,
}
const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
/** Floating new post counter above timelines, clicked to scroll to top. */
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;
@ -42,10 +46,10 @@ const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
} else {
setScrolled(false);
}
}, 150, { trailing: true }), []);
}, 150, { trailing: true }), [autoload, threshold, autoloadThreshold]);
const scrollUp = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
window.scrollTo({ top: 0 });
};
const handleClick: React.MouseEventHandler = () => {
@ -74,7 +78,7 @@ const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
{(count > 0) && (
<Text theme='inherit' size='sm'>
{intl.formatMessage(message, { count: shortNumberFormat(count) })}
{intl.formatMessage(message, { count })}
</Text>
)}
</a>
@ -82,4 +86,4 @@ const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
);
};
export default TimelineQueueButtonHeader;
export default ScrollTopButton;

34
app/soapbox/components/scrollable_list.tsx
View file

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

15
app/soapbox/components/status-reply-mentions.tsx
View file

@ -1,4 +1,3 @@
import { List as ImmutableList } from 'immutable';
import React from 'react';
import { FormattedList, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
@ -7,7 +6,7 @@ import { openModal } from 'soapbox/actions/modals';
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
import { useAppDispatch } from 'soapbox/hooks';
import type { Status } from 'soapbox/types/entities';
import type { Account, Status } from 'soapbox/types/entities';
interface IStatusReplyMentions {
status: Status,
@ -19,8 +18,10 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status }) => {
const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => {
e.stopPropagation();
const account = status.account as Account;
dispatch(openModal('MENTIONS', {
username: status.getIn(['account', 'acct']),
username: account.acct,
statusId: status.id,
}));
};
@ -29,7 +30,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status }) => {
return null;
}
const to = status.mentions || ImmutableList();
const to = status.mentions;
// The post is a reply, but it has no mentions.
// Rare, but it can happen.
@ -46,14 +47,14 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status }) => {
// The typical case with a reply-to and a list of mentions.
const accounts = to.slice(0, 2).map(account => (
<HoverRefWrapper accountId={account.get('id')} inline>
<Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('username')}</Link>
<HoverRefWrapper key={account.id} accountId={account.id} inline>
<Link to={`/@${account.acct}`} className='reply-mentions__account'>@{account.username}</Link>
</HoverRefWrapper>
)).toArray();
if (to.size > 2) {
accounts.push(
<span className='hover:underline cursor-pointer' role='presentation' onClick={handleOpenMentionsModal}>
<span key='more' className='hover:underline cursor-pointer' role='presentation' onClick={handleOpenMentionsModal}>
<FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
</span>,
);

25
app/soapbox/components/status_list.tsx
View file

@ -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,
@ -68,11 +75,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({

26
app/soapbox/components/tombstone.tsx
View file

@ -1,16 +1,30 @@
import React from 'react';
import { HotKeys } from 'react-hotkeys';
import { FormattedMessage } from 'react-intl';
import { Text } from 'soapbox/components/ui';
interface ITombstone {
id: string,
onMoveUp: (statusId: string) => void,
onMoveDown: (statusId: string) => void,
}
/** Represents a deleted item. */
const Tombstone: React.FC = () => {
const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown }) => {
const handlers = {
moveUp: () => onMoveUp(id),
moveDown: () => onMoveDown(id),
};
return (
<div className='p-9 flex items-center justify-center sm:rounded-xl bg-gray-100 border border-solid border-gray-200 dark:bg-slate-900 dark:border-slate-700'>
<Text>
<FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts is unavailable.' />
</Text>
</div>
<HotKeys handlers={handlers}>
<div className='p-9 flex items-center justify-center sm:rounded-xl bg-gray-100 border border-solid border-gray-200 dark:bg-slate-900 dark:border-slate-700 focusable' tabIndex={0}>
<Text>
<FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts is unavailable.' />
</Text>
</div>
</HotKeys>
);
};

BIN
app/soapbox/features/community_timeline/index.js
View file

Binary file not shown.

4
app/soapbox/features/direct_timeline/index.tsx
View file

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

BIN
app/soapbox/features/groups/timeline/index.js
View file

Binary file not shown.

BIN
app/soapbox/features/hashtag_timeline/index.js
View file

Binary file not shown.

BIN
app/soapbox/features/home_timeline/index.js
View file

Binary file not shown.

4
app/soapbox/features/list_timeline/index.tsx
View file

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

BIN
app/soapbox/features/notifications/index.js
View file

Binary file not shown.

BIN
app/soapbox/features/public_timeline/index.js
View file

Binary file not shown.

4
app/soapbox/features/remote_timeline/index.tsx
View file

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

9
app/soapbox/features/status/index.tsx
View file

@ -561,7 +561,12 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
renderTombstone(id: string) {
return (
<div className='py-4 pb-8'>
<Tombstone key={id} />
<Tombstone
key={id}
id={id}
onMoveUp={this.handleMoveUp}
onMoveDown={this.handleMoveDown}
/>
</div>
);
}
@ -635,6 +640,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
index: this.props.ancestorsIds.size,
offset: -80,
});
setImmediate(() => this.status?.querySelector('a')?.focus());
}
}

4
app/soapbox/features/test_timeline/index.tsx
View file

@ -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.' />}

20
app/soapbox/features/ui/containers/status_list_container.tsx → app/soapbox/features/ui/components/timeline.tsx
View file

@ -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';
@ -14,11 +14,13 @@ 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'> {
/** ID of the timeline in Redux. */
timelineId: string,
}
const StatusListContainer: React.FC<IStatusListContainer> = ({
/** Scrollable list of statuses from a timeline in the Redux store. */
const Timeline: React.FC<ITimeline> = ({
timelineId,
onLoadMore,
...rest
@ -31,6 +33,7 @@ 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 = () => {
dispatch(dequeueTimeline(timelineId, onLoadMore));
@ -38,22 +41,23 @@ 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 (
<>
<TimelineQueueButtonHeader
<ScrollTopButton
key='timeline-queue-button-header'
onClick={handleDequeueTimeline}
timelineId={timelineId}
count={totalQueuedItemsCount}
message={messages.queue}
/>
<StatusList
timelineId={timelineId}
onScrollToTop={handleScrollToTop}
onScroll={handleScroll}
lastStatusId={lastStatusId}
@ -68,4 +72,4 @@ const StatusListContainer: React.FC<IStatusListContainer> = ({
);
};
export default StatusListContainer;
export default Timeline;