StatusList: convert to TSX

app/soapbox/components/load_gap.tsx

@@ -9,8 +9,8 @@ const messages = defineMessages({
 
 interface ILoadGap {
   disabled?: boolean,
-  maxId: string,
+  maxId: string | null,
-  onClick: (id: string) => void,
+  onClick: (id: string | null) => void,
 }
 
 const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {

app/soapbox/components/scrollable_list.tsx

@@ -36,13 +36,13 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   isLoading?: boolean,
   showLoading?: boolean,
   hasMore?: boolean,
-  prepend?: React.ReactElement,
+  prepend?: React.ReactNode,
   alwaysPrepend?: boolean,
   emptyMessage?: React.ReactNode,
   children: Iterable<React.ReactNode>,
   onScrollToTop?: () => void,
   onScroll?: () => void,
-  placeholderComponent?: React.ComponentType,
+  placeholderComponent?: React.ComponentType | React.NamedExoticComponent,
   placeholderCount?: number,
   onRefresh?: () => Promise<any>,
   className?: string,
@@ -184,7 +184,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
         itemClassName,
       }}
       components={{
-        Header: () => prepend,
+        Header: () => <>{prepend}</>,
         ScrollSeekPlaceholder: Placeholder as any,
         EmptyPlaceholder: () => renderEmpty(),
         List,

app/soapbox/components/status.tsx

@@ -61,6 +61,8 @@ export const defaultMediaVisibility = (status: StatusEntity, displayMedia: strin
 };
 
 interface IStatus extends RouteComponentProps {
+  id?: string,
+  contextType?: string,
   intl: IntlShape,
   status: StatusEntity,
   account: AccountEntity,
@@ -87,8 +89,8 @@ interface IStatus extends RouteComponentProps {
   muted: boolean,
   hidden: boolean,
   unread: boolean,
-  onMoveUp: (statusId: string, featured?: string) => void,
+  onMoveUp: (statusId: string, featured?: boolean) => void,
-  onMoveDown: (statusId: string, featured?: string) => void,
+  onMoveDown: (statusId: string, featured?: boolean) => void,
   getScrollPosition?: () => ScrollPosition | undefined,
   updateScrollBottom?: (bottom: number) => void,
   cacheMediaWidth: () => void,
@@ -98,7 +100,7 @@ interface IStatus extends RouteComponentProps {
   allowedEmoji: ImmutableList<string>,
   focusable: boolean,
   history: History,
-  featured?: string,
+  featured?: boolean,
 }
 
 interface IStatusState {

app/soapbox/components/status_list.js

@@ -1,236 +0,0 @@
-import classNames from 'classnames';
-import { debounce } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, defineMessages } from 'react-intl';
-
-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 LoadGap from './load_gap';
-import ScrollableList from './scrollable_list';
-import TimelineQueueButtonHeader from './timeline_queue_button_header';
-
-const messages = defineMessages({
-  queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
-});
-
-export default class StatusList extends ImmutablePureComponent {
-
-  static propTypes = {
-    scrollKey: PropTypes.string.isRequired,
-    statusIds: ImmutablePropTypes.orderedSet.isRequired,
-    lastStatusId: PropTypes.string,
-    featuredStatusIds: ImmutablePropTypes.orderedSet,
-    onLoadMore: PropTypes.func,
-    isLoading: PropTypes.bool,
-    isPartial: PropTypes.bool,
-    hasMore: PropTypes.bool,
-    prepend: PropTypes.node,
-    emptyMessage: PropTypes.node,
-    alwaysPrepend: PropTypes.bool,
-    timelineId: PropTypes.string,
-    queuedItemSize: PropTypes.number,
-    onDequeueTimeline: PropTypes.func,
-    group: ImmutablePropTypes.map,
-    withGroupAdmin: PropTypes.bool,
-    onScrollToTop: PropTypes.func,
-    onScroll: PropTypes.func,
-    divideType: PropTypes.oneOf(['space', 'border']),
-  };
-
-  static defaultProps = {
-    divideType: 'border',
-  }
-
-  getFeaturedStatusCount = () => {
-    return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0;
-  }
-
-  getCurrentStatusIndex = (id, featured) => {
-    if (featured) {
-      return this.props.featuredStatusIds.keySeq().findIndex(key => key === id);
-    } else {
-      return this.props.statusIds.keySeq().findIndex(key => key === id) + this.getFeaturedStatusCount();
-    }
-  }
-
-  handleMoveUp = (id, featured) => {
-    const elementIndex = this.getCurrentStatusIndex(id, featured) - 1;
-    this._selectChild(elementIndex, true);
-  }
-
-  handleMoveDown = (id, featured) => {
-    const elementIndex = this.getCurrentStatusIndex(id, featured) + 1;
-    this._selectChild(elementIndex, false);
-  }
-
-  handleLoadOlder = debounce(() => {
-    const loadMoreID = this.props.lastStatusId ? this.props.lastStatusId : this.props.statusIds.last();
-    this.props.onLoadMore(loadMoreID);
-  }, 300, { leading: true })
-
-  _selectChild(index) {
-    this.node.scrollIntoView({
-      index,
-      behavior: 'smooth',
-      done: () => {
-        const element = document.querySelector(`#status-list [data-index="${index}"] .focusable`);
-
-        if (element) {
-          element.focus();
-        }
-      },
-    });
-  }
-
-  handleDequeueTimeline = () => {
-    const { onDequeueTimeline, timelineId } = this.props;
-    if (!onDequeueTimeline || !timelineId) return;
-    onDequeueTimeline(timelineId);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  renderLoadGap(index) {
-    const { statusIds, onLoadMore, isLoading } = this.props;
-
-    return (
-      <LoadGap
-        key={'gap:' + statusIds.get(index + 1)}
-        disabled={isLoading}
-        maxId={index > 0 ? statusIds.get(index - 1) : null}
-        onClick={onLoadMore}
-      />
-    );
-  }
-
-  renderStatus(statusId) {
-    const { timelineId, withGroupAdmin, group } = this.props;
-
-    return (
-      <StatusContainer
-        key={statusId}
-        id={statusId}
-        onMoveUp={this.handleMoveUp}
-        onMoveDown={this.handleMoveDown}
-        contextType={timelineId}
-        group={group}
-        withGroupAdmin={withGroupAdmin}
-      />
-    );
-  }
-
-  renderPendingStatus(statusId) {
-    const { timelineId, withGroupAdmin, group } = this.props;
-    const idempotencyKey = statusId.replace(/^末pending-/, '');
-
-    return (
-      <PendingStatus
-        key={statusId}
-        idempotencyKey={idempotencyKey}
-        onMoveUp={this.handleMoveUp}
-        onMoveDown={this.handleMoveDown}
-        contextType={timelineId}
-        group={group}
-        withGroupAdmin={withGroupAdmin}
-      />
-    );
-  }
-
-  renderFeaturedStatuses() {
-    const { featuredStatusIds, timelineId } = this.props;
-    if (!featuredStatusIds) return null;
-
-    return featuredStatusIds.map(statusId => (
-      <StatusContainer
-        key={`f-${statusId}`}
-        id={statusId}
-        featured
-        onMoveUp={this.handleMoveUp}
-        onMoveDown={this.handleMoveDown}
-        contextType={timelineId}
-      />
-    ));
-  }
-
-  renderStatuses() {
-    const { statusIds, isLoading } = this.props;
-
-    if (isLoading || statusIds.size > 0) {
-      return statusIds.map((statusId, index) => {
-        if (statusId === null) {
-          return this.renderLoadGap(index);
-        } else if (statusId.startsWith('末pending-')) {
-          return this.renderPendingStatus(statusId);
-        } else {
-          return this.renderStatus(statusId);
-        }
-      });
-    } else {
-      return null;
-    }
-  }
-
-  renderScrollableContent() {
-    const featuredStatuses = this.renderFeaturedStatuses();
-    const statuses = this.renderStatuses();
-
-    if (featuredStatuses && statuses) {
-      return featuredStatuses.concat(statuses);
-    } else {
-      return statuses;
-    }
-  }
-
-  render() {
-    const { statusIds, divideType, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, ...other } = this.props;
-
-    if (isPartial) {
-      return (
-        <div className='regeneration-indicator'>
-          <div>
-            <div className='regeneration-indicator__label'>
-              <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
-              <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return [
-      <TimelineQueueButtonHeader
-        key='timeline-queue-button-header'
-        onClick={this.handleDequeueTimeline}
-        count={totalQueuedItemsCount}
-        message={messages.queue}
-      />,
-      <ScrollableList
-        id='status-list'
-        key='scrollable-list'
-        isLoading={isLoading}
-        showLoading={isLoading && statusIds.size === 0}
-        onLoadMore={onLoadMore && this.handleLoadOlder}
-        placeholderComponent={PlaceholderStatus}
-        placeholderCount={20}
-        ref={this.setRef}
-        className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
-          'divide-none': divideType !== 'border',
-        })}
-        itemClassName={classNames({
-          'pb-3': divideType !== 'border',
-        })}
-        {...other}
-      >
-        {this.renderScrollableContent()}
-      </ScrollableList>,
-    ];
-  }
-
-}

app/soapbox/components/status_list.tsx

@@ -0,0 +1,233 @@
+import classNames from 'classnames';
+import { debounce } from 'lodash';
+import React, { useRef, useCallback } from 'react';
+import { FormattedMessage, defineMessages } from 'react-intl';
+
+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 LoadGap from './load_gap';
+import ScrollableList from './scrollable_list';
+import TimelineQueueButtonHeader from './timeline_queue_button_header';
+
+import type {
+  Map as ImmutableMap,
+  OrderedSet as ImmutableOrderedSet,
+} from 'immutable';
+import type { VirtuosoHandle } from 'react-virtuoso';
+
+const messages = defineMessages({
+  queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
+});
+
+interface IStatusList {
+  scrollKey: string,
+  statusIds: ImmutableOrderedSet<string>,
+  lastStatusId: string,
+  featuredStatusIds?: ImmutableOrderedSet<string>,
+  onLoadMore: (lastStatusId: string | null) => void,
+  isLoading: boolean,
+  isPartial: boolean,
+  hasMore: boolean,
+  prepend: React.ReactNode,
+  emptyMessage: React.ReactNode,
+  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',
+}
+
+const StatusList: React.FC<IStatusList> = ({
+  statusIds,
+  lastStatusId,
+  featuredStatusIds,
+  divideType = 'border',
+  onLoadMore,
+  timelineId,
+  totalQueuedItemsCount,
+  onDequeueTimeline,
+  isLoading,
+  isPartial,
+  withGroupAdmin,
+  group,
+  ...other
+}) => {
+  const node = useRef<VirtuosoHandle>(null);
+
+  const getFeaturedStatusCount = () => {
+    return featuredStatusIds?.size || 0;
+  };
+
+  const getCurrentStatusIndex = (id: string, featured: boolean): number => {
+    if (featured) {
+      return featuredStatusIds?.keySeq().findIndex(key => key === id) || 0;
+    } else {
+      return statusIds.keySeq().findIndex(key => key === id) + getFeaturedStatusCount();
+    }
+  };
+
+  const handleMoveUp = (id: string, featured: boolean = false) => {
+    const elementIndex = getCurrentStatusIndex(id, featured) - 1;
+    selectChild(elementIndex);
+  };
+
+  const handleMoveDown = (id: string, featured: boolean = false) => {
+    const elementIndex = getCurrentStatusIndex(id, featured) + 1;
+    selectChild(elementIndex);
+  };
+
+  const handleLoadOlder = useCallback(debounce(() => {
+    const loadMoreID = lastStatusId || statusIds.last();
+    if (loadMoreID) {
+      onLoadMore(loadMoreID);
+    }
+  }, 300, { leading: true }), []);
+
+  const selectChild = (index: number) => {
+    node.current?.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const element: HTMLElement | null = document.querySelector(`#status-list [data-index="${index}"] .focusable`);
+        element?.focus();
+      },
+    });
+  };
+
+  const handleDequeueTimeline = () => {
+    if (!onDequeueTimeline || !timelineId) return;
+    onDequeueTimeline(timelineId);
+  };
+
+  const renderLoadGap = (index: number) => {
+    const ids = statusIds.toList();
+
+    return (
+      <LoadGap
+        key={'gap:' + ids.get(index + 1)}
+        disabled={isLoading}
+        maxId={index > 0 ? ids.get(index - 1) || null : null}
+        onClick={onLoadMore}
+      />
+    );
+  };
+
+  const renderStatus = (statusId: string) => {
+    return (
+      // @ts-ignore
+      <StatusContainer
+        key={statusId}
+        id={statusId}
+        onMoveUp={handleMoveUp}
+        onMoveDown={handleMoveDown}
+        contextType={timelineId}
+      />
+    );
+  };
+
+  const renderPendingStatus = (statusId: string) => {
+    const idempotencyKey = statusId.replace(/^末pending-/, '');
+
+    return (
+      <PendingStatus
+        key={statusId}
+        idempotencyKey={idempotencyKey}
+      />
+    );
+  };
+
+  const renderFeaturedStatuses = (): JSX.Element[] => {
+    if (!featuredStatusIds) return [];
+
+    return featuredStatusIds.toArray().map(statusId => (
+      // @ts-ignore
+      <StatusContainer
+        key={`f-${statusId}`}
+        id={statusId}
+        featured
+        onMoveUp={handleMoveUp}
+        onMoveDown={handleMoveDown}
+        contextType={timelineId}
+      />
+    ));
+  };
+
+  const renderStatuses = (): JSX.Element[] => {
+    if (isLoading || statusIds.size > 0) {
+      return statusIds.toArray().map((statusId, index) => {
+        if (statusId === null) {
+          return renderLoadGap(index);
+        } else if (statusId.startsWith('末pending-')) {
+          return renderPendingStatus(statusId);
+        } else {
+          return renderStatus(statusId);
+        }
+      });
+    } else {
+      return [];
+    }
+  };
+
+  const renderScrollableContent = () => {
+    const featuredStatuses = renderFeaturedStatuses();
+    const statuses = renderStatuses();
+
+    if (featuredStatuses && statuses) {
+      return featuredStatuses.concat(statuses);
+    } else {
+      return statuses;
+    }
+  };
+
+  if (isPartial) {
+    return (
+      <div className='regeneration-indicator'>
+        <div>
+          <div className='regeneration-indicator__label'>
+            <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
+            <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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>,
+    </>
+  );
+};
+
+export default StatusList;