StatusList TypeScript fixes

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<ILoadGap> = ({ disabled, maxId, onClick }) => {

app/soapbox/components/scrollable_list.tsx

@@ -212,3 +212,4 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
 });
 
 export default ScrollableList;
+export type { IScrollableList };

app/soapbox/components/status.tsx

@@ -101,6 +101,7 @@ interface IStatus extends RouteComponentProps {
   focusable: boolean,
   history: History,
   featured?: boolean,
+  withDismiss?: boolean,
 }
 
 interface IStatusState {

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<IScrollableList, 'onLoadMore' | 'children'> {
   scrollKey: string,
   statusIds: ImmutableOrderedSet<string>,
-  lastStatusId: string,
+  lastStatusId?: string,
   featuredStatusIds?: ImmutableOrderedSet<string>,
-  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<string, any>,
-  withGroupAdmin: boolean,
-  onScrollToTop: () => void,
-  onScroll: () => void,
+  withGroupAdmin?: boolean,
+  onScrollToTop?: () => void,
+  onScroll?: () => void,
   divideType: 'space' | 'border',
 }
 
@@ -85,7 +86,7 @@ const StatusList: React.FC<IStatusList> = ({
 
   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<IStatusList> = ({
 
   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 (
       <LoadGap
-        key={'gap:' + ids.get(index + 1)}
+        key={'gap:' + nextId}
         disabled={isLoading}
-        maxId={index > 0 ? ids.get(index - 1) || null : null}
+        maxId={prevId!}
         onClick={onLoadMore}
       />
     );
@@ -143,7 +148,7 @@ const StatusList: React.FC<IStatusList> = ({
     );
   };
 
-  const renderFeaturedStatuses = (): JSX.Element[] => {
+  const renderFeaturedStatuses = (): React.ReactNode[] => {
     if (!featuredStatusIds) return [];
 
     return featuredStatusIds.toArray().map(statusId => (
@@ -159,7 +164,7 @@ const StatusList: React.FC<IStatusList> = ({
     ));
   };
 
-  const renderStatuses = (): JSX.Element[] => {
+  const renderStatuses = (): React.ReactNode[] => {
     if (isLoading || statusIds.size > 0) {
       return statusIds.toArray().map((statusId, index) => {
         if (statusId === null) {

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 = () => {
       </div>
       <StatusList
         statusIds={statusIds}
-        scrollKey={'bookmarked_statuses'}
+        scrollKey='bookmarked_statuses'
         hasMore={hasMore}
         isLoading={isLoading}
         onLoadMore={() => handleLoadMore(dispatch)}

app/soapbox/features/conversations/components/conversation.tsx

@@ -48,8 +48,8 @@ const Conversation: React.FC<IConversation> = ({ conversationId, onMoveUp, onMov
   }
 
   return (
-    <StatusContainer
     // @ts-ignore
+    <StatusContainer
       id={lastStatusId}
       unread={unread}
       otherAccounts={accounts}

app/soapbox/features/notifications/components/notification.tsx

@@ -260,8 +260,8 @@ const Notification: React.FC<INotificaton> = (props) => {
       case 'poll':
       case 'pleroma:emoji_reaction':
         return status && typeof status === 'object' ? (
+          // @ts-ignore
           <StatusContainer
-            // @ts-ignore
             id={status.id}
             withDismiss
             hidden={hidden}