ConversationView in React

ts/components/conversation/ConversationView.tsx

@@ -0,0 +1,34 @@
+// Copyright 2020-2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+export type PropsType = {
+  renderCompositionArea: () => JSX.Element;
+  renderConversationHeader: () => JSX.Element;
+  renderTimeline: () => JSX.Element;
+};
+
+export const ConversationView = ({
+  renderCompositionArea,
+  renderConversationHeader,
+  renderTimeline,
+}: PropsType): JSX.Element => {
+  return (
+    <div className="ConversationView">
+      <div className="ConversationView__header">
+        {renderConversationHeader()}
+      </div>
+      <div className="ConversationView__pane main panel">
+        <div className="ConversationView__timeline--container">
+          <div aria-live="polite" className="ConversationView__timeline">
+            {renderTimeline()}
+          </div>
+        </div>
+        <div className="ConversationView__composition-area">
+          {renderCompositionArea()}
+        </div>
+      </div>
+    </div>
+  );
+};

ts/components/conversation/Timeline.tsx

@@ -157,7 +157,7 @@ export type PropsActionsType = {
   clearSelectedMessage: () => unknown;
   unblurAvatar: () => void;
   updateSharedGroups: () => unknown;
-} & MessageActionsType &
+} & Omit<MessageActionsType, 'onHeightChange'> &
   SafetyNumberActionsType &
   UnsupportedMessageActionsType &
   ChatSessionRefreshedNotificationActionsType;
@@ -251,7 +251,6 @@ const getActions = createSelector(
       'updateSharedGroups',
 
       'doubleCheckMissingQuoteReference',
-      'onHeightChange',
       'checkForAccount',
       'reactToMessage',
       'replyToMessage',