diff --git a/app/soapbox/components/load_gap.tsx b/app/soapbox/components/load_gap.tsx index a21e64749..b784c871d 100644 --- a/app/soapbox/components/load_gap.tsx +++ b/app/soapbox/components/load_gap.tsx @@ -9,8 +9,8 @@ const messages = defineMessages({ interface ILoadGap { disabled?: boolean, - maxId: string | null, - onClick: (id: string | null) => void, + maxId: string, + onClick: (id: string) => void, } const LoadGap: React.FC = ({ disabled, maxId, onClick }) => { diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx index a2df04005..559b67b62 100644 --- a/app/soapbox/components/scrollable_list.tsx +++ b/app/soapbox/components/scrollable_list.tsx @@ -212,3 +212,4 @@ const ScrollableList = React.forwardRef(({ }); export default ScrollableList; +export type { IScrollableList }; diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index a8e684a3a..2b1325a60 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -101,6 +101,7 @@ interface IStatus extends RouteComponentProps { focusable: boolean, history: History, featured?: boolean, + withDismiss?: boolean, } interface IStatusState { diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx index 7500f6a79..79d6b7a44 100644 --- a/app/soapbox/components/status_list.tsx +++ b/app/soapbox/components/status_list.tsx @@ -16,31 +16,32 @@ 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 { +interface IStatusList extends Omit { scrollKey: string, statusIds: ImmutableOrderedSet, - lastStatusId: string, + lastStatusId?: string, featuredStatusIds?: ImmutableOrderedSet, - onLoadMore: (lastStatusId: string | null) => void, + onLoadMore?: (lastStatusId: string) => void, isLoading: boolean, - isPartial: boolean, + isPartial?: boolean, hasMore: boolean, - prepend: React.ReactNode, + prepend?: React.ReactNode, emptyMessage: React.ReactNode, - alwaysPrepend: boolean, - timelineId: string, - queuedItemSize: number, - onDequeueTimeline: (timelineId: string) => void, - totalQueuedItemsCount: number, + alwaysPrepend?: boolean, + timelineId?: string, + queuedItemSize?: number, + onDequeueTimeline?: (timelineId: string) => void, + totalQueuedItemsCount?: number, group?: ImmutableMap, - withGroupAdmin: boolean, - onScrollToTop: () => void, - onScroll: () => void, + withGroupAdmin?: boolean, + onScrollToTop?: () => void, + onScroll?: () => void, divideType: 'space' | 'border', } @@ -85,7 +86,7 @@ const StatusList: React.FC = ({ const handleLoadOlder = useCallback(debounce(() => { const loadMoreID = lastStatusId || statusIds.last(); - if (loadMoreID) { + if (onLoadMore && loadMoreID) { onLoadMore(loadMoreID); } }, 300, { leading: true }), []); @@ -108,12 +109,16 @@ const StatusList: React.FC = ({ const renderLoadGap = (index: number) => { const ids = statusIds.toList(); + const nextId = ids.get(index + 1); + const prevId = ids.get(index - 1); + + if (index < 1 || !nextId || !prevId || !onLoadMore) return null; return ( 0 ? ids.get(index - 1) || null : null} + maxId={prevId!} onClick={onLoadMore} /> ); @@ -143,7 +148,7 @@ const StatusList: React.FC = ({ ); }; - const renderFeaturedStatuses = (): JSX.Element[] => { + const renderFeaturedStatuses = (): React.ReactNode[] => { if (!featuredStatusIds) return []; return featuredStatusIds.toArray().map(statusId => ( @@ -159,7 +164,7 @@ const StatusList: React.FC = ({ )); }; - const renderStatuses = (): JSX.Element[] => { + const renderStatuses = (): React.ReactNode[] => { if (isLoading || statusIds.size > 0) { return statusIds.toArray().map((statusId, index) => { if (statusId === null) { diff --git a/app/soapbox/features/bookmarks/index.tsx b/app/soapbox/features/bookmarks/index.tsx index ebd4eb1cd..0b1255f32 100644 --- a/app/soapbox/features/bookmarks/index.tsx +++ b/app/soapbox/features/bookmarks/index.tsx @@ -1,13 +1,12 @@ import { debounce } from 'lodash'; import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import { useDispatch } from 'react-redux'; import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks'; import StatusList from 'soapbox/components/status_list'; import SubNavigation from 'soapbox/components/sub_navigation'; import { Column } from 'soapbox/components/ui'; -import { useAppSelector } from 'soapbox/hooks'; +import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; const messages = defineMessages({ heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, @@ -18,7 +17,7 @@ const handleLoadMore = debounce((dispatch) => { }, 300, { leading: true }); const Bookmarks: React.FC = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const intl = useIntl(); const statusIds = useAppSelector((state) => state.status_lists.getIn(['bookmarks', 'items'])); @@ -42,7 +41,7 @@ const Bookmarks: React.FC = () => { handleLoadMore(dispatch)} diff --git a/app/soapbox/features/conversations/components/conversation.tsx b/app/soapbox/features/conversations/components/conversation.tsx index 995af88b3..6f638f2d6 100644 --- a/app/soapbox/features/conversations/components/conversation.tsx +++ b/app/soapbox/features/conversations/components/conversation.tsx @@ -48,8 +48,8 @@ const Conversation: React.FC = ({ conversationId, onMoveUp, onMov } return ( - = (props) => { case 'poll': case 'pleroma:emoji_reaction': return status && typeof status === 'object' ? ( + // @ts-ignore