Optimize rendering

ts/state/smart/LeftPane.tsx

@@ -1,7 +1,7 @@
 // Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { get } from 'lodash';
 import { mapDispatchToProps } from '../actions';
@@ -59,11 +59,8 @@ function renderExpiredBuildDialog(): JSX.Element {
 function renderMainHeader(): JSX.Element {
   return <SmartMainHeader />;
 }
-function renderMessageSearchResult(
-  id: string,
-  style: CSSProperties
-): JSX.Element {
-  return <FilteredSmartMessageSearchResult id={id} style={style} />;
+function renderMessageSearchResult(id: string): JSX.Element {
+  return <FilteredSmartMessageSearchResult id={id} />;
 }
 function renderNetworkStatus(): JSX.Element {
   return <SmartNetworkStatus />;

ts/state/smart/Timeline.tsx

@@ -8,6 +8,7 @@ import memoizee from 'memoizee';
 
 import { mapDispatchToProps } from '../actions';
 import {
+  PropsActionsType as TimelineActionsType,
   ContactSpoofingReviewPropType,
   Timeline,
   WarningType as TimelineWarningType,
@@ -44,13 +45,6 @@ import {
 } from '../../util/groupMemberNameCollisions';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
 
-// Workaround: A react component's required properties are filtering up through connect()
-//   https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const FilteredSmartTimelineItem = SmartTimelineItem as any;
-const FilteredSmartTypingBubble = SmartTypingBubble as any;
-/* eslint-enable @typescript-eslint/no-explicit-any */
-
 type ExternalProps = {
   id: string;
 
@@ -72,10 +66,10 @@ function renderItem(
   messageId: string,
   conversationId: string,
   onHeightChange: (messageId: string) => unknown,
-  actionProps: Record<string, unknown>
+  actionProps: TimelineActionsType
 ): JSX.Element {
   return (
-    <FilteredSmartTimelineItem
+    <SmartTimelineItem
       {...actionProps}
       conversationId={conversationId}
       id={messageId}
@@ -109,7 +103,7 @@ function renderLoadingRow(id: string): JSX.Element {
   return <SmartTimelineLoadingRow id={id} />;
 }
 function renderTypingBubble(id: string): JSX.Element {
-  return <FilteredSmartTypingBubble id={id} />;
+  return <SmartTypingBubble id={id} />;
 }
 
 const getWarning = (

ts/state/smart/TypingBubble.tsx

@@ -4,6 +4,7 @@
 import { connect } from 'react-redux';
 import { mapDispatchToProps } from '../actions';
 import { TypingBubble } from '../../components/conversation/TypingBubble';
+import { strictAssert } from '../../util/assert';
 import { StateType } from '../reducer';
 
 import { getIntl } from '../selectors/user';
@@ -21,6 +22,8 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     throw new Error(`Did not find conversation ${id} in state!`);
   }
 
+  strictAssert(conversation.typingContact, 'Missing typingContact');
+
   return {
     ...conversation.typingContact,
     conversationType: conversation.type,