Refactor smart components

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

ts/components/conversation/ConversationView.tsx

@@ -14,10 +14,10 @@ export type PropsType = {
     conversationId: string;
     files: ReadonlyArray<File>;
   }) => void;
-  renderCompositionArea: () => JSX.Element;
-  renderConversationHeader: () => JSX.Element;
-  renderTimeline: () => JSX.Element;
-  renderPanel: () => JSX.Element | undefined;
+  renderCompositionArea: (conversationId: string) => JSX.Element;
+  renderConversationHeader: (conversationId: string) => JSX.Element;
+  renderTimeline: (conversationId: string) => JSX.Element;
+  renderPanel: (conversationId: string) => JSX.Element | undefined;
   shouldHideConversationView?: boolean;
 };
 
@@ -121,20 +121,20 @@ export function ConversationView({
         })}
       >
         <div className="ConversationView__header">
-          {renderConversationHeader()}
+          {renderConversationHeader(conversationId)}
         </div>
         <div className="ConversationView__pane">
           <div className="ConversationView__timeline--container">
             <div aria-live="polite" className="ConversationView__timeline">
-              {renderTimeline()}
+              {renderTimeline(conversationId)}
             </div>
           </div>
           <div className="ConversationView__composition-area">
-            {renderCompositionArea()}
+            {renderCompositionArea(conversationId)}
           </div>
         </div>
       </div>
-      {renderPanel()}
+      {renderPanel(conversationId)}
     </div>
   );
 }

ts/components/conversation/GroupV1Migration.tsx

@@ -31,7 +31,6 @@ export type PropsType = PropsDataType & PropsHousekeepingType;
 export function GroupV1Migration(props: PropsType): React.ReactElement {
   const {
     areWeInvited,
-    conversationId,
     droppedMembers,
     getPreferredBadge,
     i18n,
@@ -80,13 +79,12 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
       {showingDialog ? (
         <GroupV1MigrationDialog
           areWeInvited={areWeInvited}
-          conversationId={conversationId}
           droppedMembers={droppedMembers}
           getPreferredBadge={getPreferredBadge}
           hasMigrated
           i18n={i18n}
           invitedMembers={invitedMembers}
-          migrate={() => log.warn('GroupV1Migration: Modal called migrate()')}
+          onMigrate={() => log.warn('GroupV1Migration: Modal called migrate()')}
           onClose={dismissDialog}
           theme={theme}
         />

ts/components/conversation/Timeline.stories.tsx

@@ -452,7 +452,9 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   isIncomingMessageRequest: overrideProps.isIncomingMessageRequest ?? false,
   items: overrideProps.items ?? Object.keys(items),
   messageChangeCounter: 0,
-  scrollToIndex: overrideProps.scrollToIndex,
+  messageLoadingState: null,
+  isNearBottom: null,
+  scrollToIndex: overrideProps.scrollToIndex ?? null,
   scrollToIndexCounter: 0,
   shouldShowMiniPlayer: Boolean(overrideProps.shouldShowMiniPlayer),
   totalUnseen: overrideProps.totalUnseen ?? 0,

ts/components/conversation/Timeline.tsx

@@ -70,11 +70,11 @@ export type PropsDataType = {
   haveNewest: boolean;
   haveOldest: boolean;
   messageChangeCounter: number;
-  messageLoadingState?: TimelineMessageLoadingState;
-  isNearBottom?: boolean;
+  messageLoadingState: TimelineMessageLoadingState | null;
+  isNearBottom: boolean | null;
   items: ReadonlyArray<string>;
-  oldestUnseenIndex?: number;
-  scrollToIndex?: number;
+  oldestUnseenIndex: number | null;
+  scrollToIndex: number | null;
   scrollToIndexCounter: number;
   totalUnseen: number;
 };
@@ -563,7 +563,7 @@ export class Timeline extends React.Component<
       case ScrollAnchor.ScrollToBottom:
         return { scrollBottom: 0 };
       case ScrollAnchor.ScrollToIndex:
-        if (scrollToIndex === undefined) {
+        if (scrollToIndex == null) {
           assertDev(
             false,
             '<Timeline> got "scroll to index" scroll anchor, but no index'

ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx

@@ -63,7 +63,6 @@ const createProps = (
           selectedConversationIds
         )}
         regionCode="US"
-        getPreferredBadge={() => undefined}
         ourE164={undefined}
         ourUsername={undefined}
         theme={ThemeType.light}

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -21,7 +21,6 @@ import { parseAndFormatPhoneNumber } from '../../../../util/libphonenumberInstan
 import type { ParsedE164Type } from '../../../../util/libphonenumberInstance';
 import { filterAndSortConversationsByRecent } from '../../../../util/filterAndSortConversations';
 import type { ConversationType } from '../../../../state/ducks/conversations';
-import type { PreferredBadgeSelectorType } from '../../../../state/selectors/badges';
 import type {
   UUIDFetchStateKeyType,
   UUIDFetchStateType,
@@ -50,7 +49,6 @@ export type StatePropsType = {
   regionCode: string | undefined;
   candidateContacts: ReadonlyArray<ConversationType>;
   conversationIdsAlreadyInGroup: Set<string>;
-  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   theme: ThemeType;
   maxGroupSize: number;

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -119,7 +119,6 @@ const createProps = (
         candidateContacts={allCandidateContacts}
         selectedContacts={[]}
         regionCode="US"
-        getPreferredBadge={() => undefined}
         theme={ThemeType.light}
         i18n={i18n}
         lookupConversationWithoutServiceId={makeFakeLookupConversationWithoutServiceId()}