[native] Move render function in MultimediaMessageMultimedia to funct…

…ional component

Summary:
Move render() function  to functional component as a part of MultimediaMessageMultimedia migration to a functional component. This finishes the migration of the MultimediaMessageMultimedia  component to a functional component.

Depends on D14134

Test Plan: Open up a multimedia message and see if it behaves correctly.

Reviewers: ashoat, tomek

Reviewed By: ashoat

Differential Revision: https://phab.comm.dev/D14135

native/chat/multimedia-message-multimedia.react.js

@@ -1,6 +1,5 @@
 // @flow
 
-import type { LeafRoute } from '@react-navigation/core';
 import { useRoute } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
@@ -16,28 +15,17 @@ import { type MediaInfo } from 'lib/types/media-types.js';
 import InlineMultimedia from './inline-multimedia.react.js';
 import { getMediaKey } from './multimedia-message-utils.js';
 import { type PendingMultimediaUpload } from '../input/input-state.js';
-import {
-  type KeyboardState,
-  KeyboardContext,
-} from '../keyboard/keyboard-state.js';
-import {
-  OverlayContext,
-  type OverlayContextType,
-} from '../navigation/overlay-context.js';
+import { KeyboardContext } from '../keyboard/keyboard-state.js';
+import { OverlayContext } from '../navigation/overlay-context.js';
 import { ImageModalRouteName } from '../navigation/route-names.js';
-import { type Colors, useColors } from '../themes/colors.js';
 import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
 import type {
   VerticalBounds,
   LayoutCoordinates,
 } from '../types/layout-types.js';
-import {
-  type ViewStyle,
-  type AnimatedStyleObj,
-  AnimatedView,
-} from '../types/styles.js';
+import { type ViewStyle, AnimatedView } from '../types/styles.js';
 
-type BaseProps = {
+type Props = {
   +mediaInfo: MediaInfo,
   +item: ChatMultimediaMessageInfoItem,
   +verticalBounds: ?VerticalBounds,
@@ -51,53 +39,6 @@ type BaseProps = {
   +clickable: boolean,
   +setClickable: boolean => void,
 };
-type Props = {
-  ...BaseProps,
-  +route: LeafRoute<>,
-  // Redux state
-  +colors: Colors,
-  // withKeyboardState
-  +keyboardState: ?KeyboardState,
-  // withOverlayContext
-  +overlayContext: ?OverlayContextType,
-  +viewRef: { current: ?React.ElementRef<typeof View> },
-  +onPress: () => void,
-  +onLayout: () => void,
-  +animatedWrapperStyle: AnimatedStyleObj,
-};
-
-class MultimediaMessageMultimedia extends React.PureComponent<Props> {
-  render(): React.Node {
-    const {
-      mediaInfo,
-      pendingUpload,
-      postInProgress,
-      viewRef,
-      onPress,
-      onLayout,
-      animatedWrapperStyle,
-    } = this.props;
-
-    const wrapperStyles = [
-      styles.container,
-      animatedWrapperStyle,
-      this.props.style,
-    ];
-    return (
-      <AnimatedView style={wrapperStyles}>
-        <View style={styles.expand} onLayout={onLayout} ref={viewRef}>
-          <InlineMultimedia
-            mediaInfo={mediaInfo}
-            onPress={onPress}
-            postInProgress={postInProgress}
-            pendingUpload={pendingUpload}
-            spinnerColor={this.props.item.threadInfo.color}
-          />
-        </View>
-      </AnimatedView>
-    );
-  }
-}
 
 const styles = StyleSheet.create({
   container: {
@@ -109,11 +50,8 @@ const styles = StyleSheet.create({
   },
 });
 
-const ConnectedMultimediaMessageMultimedia: React.ComponentType<BaseProps> =
-  React.memo<BaseProps>(function ConnectedMultimediaMessageMultimedia(
-    props: BaseProps,
-  ) {
-    const colors = useColors();
+const MultimediaMessageMultimedia: React.ComponentType<Props> =
+  React.memo<Props>(function MultimediaMessageMultimedia(props: Props) {
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
     invariant(
@@ -209,19 +147,26 @@ const ConnectedMultimediaMessageMultimedia: React.ComponentType<BaseProps> =
       scrollWasDisabled.current = scrollIsDisabled;
     }, [overlayContext.scrollBlockingModalStatus, props]);
 
+    const { mediaInfo, postInProgress, pendingUpload, item, style } = props;
+
+    const wrapperStyles = React.useMemo(
+      () => [styles.container, animatedWrapperStyle, style],
+      [animatedWrapperStyle, style],
+    );
+
     return (
-      <MultimediaMessageMultimedia
-        {...props}
-        colors={colors}
-        route={route}
-        keyboardState={keyboardState}
-        overlayContext={overlayContext}
-        viewRef={viewRef}
-        onPress={onPress}
-        onLayout={onLayout}
-        animatedWrapperStyle={animatedWrapperStyle}
-      />
+      <AnimatedView style={wrapperStyles}>
+        <View style={styles.expand} onLayout={onLayout} ref={viewRef}>
+          <InlineMultimedia
+            mediaInfo={mediaInfo}
+            onPress={onPress}
+            postInProgress={postInProgress}
+            pendingUpload={pendingUpload}
+            spinnerColor={item.threadInfo.color}
+          />
+        </View>
+      </AnimatedView>
     );
   });
 
-export default ConnectedMultimediaMessageMultimedia;
+export default MultimediaMessageMultimedia;