react: Convert class components to function components, where trivial

src/boot/TranslationProvider.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent, type Context } from 'react';
+import React, { type Context, useContext } from 'react';
 import type { ComponentType, ElementConfig, Node } from 'react';
 import { Text } from 'react-native';
 import { IntlProvider, IntlContext } from 'react-intl';
@@ -23,14 +23,13 @@ export const TranslationContext: Context<GetText> = React.createContext(undefine
 export function withGetText<P: { +_: GetText, ... }, C: ComponentType<P>>(
   WrappedComponent: C,
 ): ComponentType<$ReadOnly<$Exact<$Diff<ElementConfig<C>, {| _: GetText |}>>>> {
-  return class extends React.Component<$Exact<$Diff<ElementConfig<C>, {| _: GetText |}>>> {
-    render() {
-      return (
-        <TranslationContext.Consumer>
-          {_ => <WrappedComponent _={_} {...this.props} />}
-        </TranslationContext.Consumer>
-      );
-    }
+  // eslint-disable-next-line func-names
+  return function (props: $Exact<$Diff<ElementConfig<C>, {| _: GetText |}>>): Node {
+    return (
+      <TranslationContext.Consumer>
+        {_ => <WrappedComponent _={_} {...props} />}
+      </TranslationContext.Consumer>
+    );
   };
 }
 
@@ -61,19 +60,14 @@ const makeGetText = (intl: IntlShape): GetText => {
  *
  * See the `GetTypes` type for why we like the new shape.
  */
-class TranslationContextTranslator extends PureComponent<{|
-  +children: Node,
-|}> {
-  static contextType = IntlContext;
-  context: IntlShape;
+function TranslationContextTranslator(props: {| +children: Node |}): Node {
+  const intlContextValue = useContext(IntlContext);
 
-  render() {
-    return (
-      <TranslationContext.Provider value={makeGetText(this.context)}>
-        {this.props.children}
-      </TranslationContext.Provider>
-    );
-  }
+  return (
+    <TranslationContext.Provider value={makeGetText(intlContextValue)}>
+      {props.children}
+    </TranslationContext.Provider>
+  );
 }
 
 type Props = $ReadOnly<{|

src/chat/FetchError.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { StyleSheet, View } from 'react-native';
 
@@ -26,18 +26,16 @@ type Props = $ReadOnly<{|
   error: mixed,
 |}>;
 
-export default class FetchError extends PureComponent<Props> {
-  render(): Node {
-    return (
-      <View style={styles.container}>
-        {(() => {
-          if (this.props.error instanceof TimeoutError) {
-            return <ZulipTextIntl style={styles.text} text="Request timed out." />;
-          } else {
-            return <ZulipTextIntl style={styles.text} text="Oops! Something went wrong." />;
-          }
-        })()}
-      </View>
-    );
-  }
+export default function FetchError(props: Props): Node {
+  return (
+    <View style={styles.container}>
+      {(() => {
+        if (props.error instanceof TimeoutError) {
+          return <ZulipTextIntl style={styles.text} text="Request timed out." />;
+        } else {
+          return <ZulipTextIntl style={styles.text} text="Oops! Something went wrong." />;
+        }
+      })()}
+    </View>
+  );
 }

src/chat/InvalidNarrow.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { StyleSheet, View } from 'react-native';
 
@@ -24,12 +24,10 @@ type Props = $ReadOnly<{|
   narrow: Narrow,
 |}>;
 
-export default class InvalidNarrow extends PureComponent<Props> {
-  render(): Node {
-    return (
-      <View style={styles.container}>
-        <ZulipTextIntl style={styles.text} text="That conversation doesn't seem to exist." />
-      </View>
-    );
-  }
+export default function InvalidNarrow(props: Props): Node {
+  return (
+    <View style={styles.container}>
+      <ZulipTextIntl style={styles.text} text="That conversation doesn't seem to exist." />
+    </View>
+  );
 }

src/common/CountOverlay.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
@@ -23,26 +23,24 @@ type Props = $ReadOnly<{|
   unreadCount: number,
 |}>;
 
-export default class CountOverlay extends PureComponent<Props> {
-  render(): Node {
-    const { children, unreadCount } = this.props;
+export default function CountOverlay(props: Props): Node {
+  const { children, unreadCount } = props;
 
-    return (
-      <View>
-        <ComponentWithOverlay
-          style={styles.button}
-          // It looks like what we want to match is 25 * 0.75, which is 18.75,
-          // https://github.com/react-navigation/react-navigation/blob/%40react-navigation/bottom-tabs%405.11.15/packages/bottom-tabs/src/views/TabBarIcon.tsx#L69
-          overlaySize={18.75}
-          overlayColor={BRAND_COLOR}
-          overlayPosition="top-right"
-          showOverlay={unreadCount > 0}
-          customOverlayStyle={styles.overlayStyle}
-          overlay={<UnreadCount count={unreadCount} />}
-        >
-          {children}
-        </ComponentWithOverlay>
-      </View>
-    );
-  }
+  return (
+    <View>
+      <ComponentWithOverlay
+        style={styles.button}
+        // It looks like what we want to match is 25 * 0.75, which is 18.75,
+        // https://github.com/react-navigation/react-navigation/blob/%40react-navigation/bottom-tabs%405.11.15/packages/bottom-tabs/src/views/TabBarIcon.tsx#L69
+        overlaySize={18.75}
+        overlayColor={BRAND_COLOR}
+        overlayPosition="top-right"
+        showOverlay={unreadCount > 0}
+        customOverlayStyle={styles.overlayStyle}
+        overlay={<UnreadCount count={unreadCount} />}
+      >
+        {children}
+      </ComponentWithOverlay>
+    </View>
+  );
 }

src/common/ErrorMsg.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
@@ -29,18 +29,16 @@ type Props = $ReadOnly<{|
  *
  * @prop error - The error message string.
  */
-export default class ErrorMsg extends PureComponent<Props> {
-  render(): Node {
-    const { error } = this.props;
+export default function ErrorMsg(props: Props): Node {
+  const { error } = props;
 
-    if (!error) {
-      return null;
-    }
-
-    return (
-      <View style={styles.field}>
-        <ZulipTextIntl style={styles.error} text={error} />
-      </View>
-    );
+  if (!error) {
+    return null;
   }
+
+  return (
+    <View style={styles.field}>
+      <ZulipTextIntl style={styles.error} text={error} />
+    </View>
+  );
 }

src/common/GroupAvatar.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 // $FlowFixMe[untyped-import]
@@ -34,28 +34,26 @@ type Props = $ReadOnly<{|
  * @prop children - If provided, will render inside the component body.
  * @prop onPress - Event fired on pressing the component.
  */
-export default class GroupAvatar extends PureComponent<Props> {
-  render(): Node {
-    const { children, names, size, onPress } = this.props;
+export default function GroupAvatar(props: Props): Node {
+  const { children, names, size, onPress } = props;
 
-    const frameSize = {
-      height: size,
-      width: size,
-      borderRadius: size / 8,
-      backgroundColor: Color(colorHashFromString(names.join(', ')))
-        .lighten(0.6)
-        .hex(),
-    };
+  const frameSize = {
+    height: size,
+    width: size,
+    borderRadius: size / 8,
+    backgroundColor: Color(colorHashFromString(names.join(', ')))
+      .lighten(0.6)
+      .hex(),
+  };
 
-    const iconColor = Color(colorHashFromString(names.join(', '))).string();
+  const iconColor = Color(colorHashFromString(names.join(', '))).string();
 
-    return (
-      <Touchable onPress={onPress}>
-        <View style={[styles.frame, frameSize]}>
-          <IconGroup size={size * 0.75} color={iconColor} />
-          {children}
-        </View>
-      </Touchable>
-    );
-  }
+  return (
+    <Touchable onPress={onPress}>
+      <View style={[styles.frame, frameSize]}>
+        <IconGroup size={size * 0.75} color={iconColor} />
+        {children}
+      </View>
+    </Touchable>
+  );
 }

src/common/KeyboardAvoider.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { Platform, View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
@@ -39,24 +39,22 @@ type Props = $ReadOnly<{|
  * `KeyboardAvoidingView`'s special props get passed straight through
  * to that component.
  */
-export default class KeyboardAvoider extends PureComponent<Props> {
-  render(): Node {
-    const { behavior, children, style, contentContainerStyle, keyboardVerticalOffset } = this.props;
+export default function KeyboardAvoider(props: Props): Node {
+  const { behavior, children, style, contentContainerStyle, keyboardVerticalOffset } = props;
 
-    if (Platform.OS === 'android') {
-      return <View style={style}>{children}</View>;
-    }
-
-    return (
-      <KeyboardAvoidingView
-        behavior={behavior}
-        contentContainerStyle={contentContainerStyle}
-        // See comment on this prop in the jsdoc.
-        keyboardVerticalOffset={keyboardVerticalOffset}
-        style={style}
-      >
-        {children}
-      </KeyboardAvoidingView>
-    );
+  if (Platform.OS === 'android') {
+    return <View style={style}>{children}</View>;
   }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior}
+      contentContainerStyle={contentContainerStyle}
+      // See comment on this prop in the jsdoc.
+      keyboardVerticalOffset={keyboardVerticalOffset}
+      style={style}
+    >
+      {children}
+    </KeyboardAvoidingView>
+  );
 }

src/common/SearchEmptyState.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
@@ -23,14 +23,12 @@ type Props = $ReadOnly<{|
   text: string,
 |}>;
 
-export default class SearchEmptyState extends PureComponent<Props> {
-  render(): Node {
-    const { text } = this.props;
+export default function SearchEmptyState(props: Props): Node {
+  const { text } = props;
 
-    return (
-      <View style={styles.container}>
-        <ZulipTextIntl style={styles.text} text={text} />
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      <ZulipTextIntl style={styles.text} text={text} />
+    </View>
+  );
 }

src/common/SectionHeader.js

@@ -1,9 +1,8 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
-import type { Node, Context } from 'react';
+import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
-import type { ThemeData } from '../styles';
 import { ThemeContext, createStyleSheet } from '../styles';
 import ZulipTextIntl from './ZulipTextIntl';
 
@@ -18,16 +17,13 @@ type Props = $ReadOnly<{|
   text: string,
 |}>;
 
-export default class SectionHeader extends PureComponent<Props> {
-  static contextType: Context<ThemeData> = ThemeContext;
-  context: ThemeData;
+export default function SectionHeader(props: Props): Node {
+  const { text } = props;
+  const themeData = useContext(ThemeContext);
 
-  render(): Node {
-    const { text } = this.props;
-    return (
-      <View style={[styles.header, { backgroundColor: this.context.backgroundColor }]}>
-        <ZulipTextIntl text={text} />
-      </View>
-    );
-  }
+  return (
+    <View style={[styles.header, { backgroundColor: themeData.backgroundColor }]}>
+      <ZulipTextIntl text={text} />
+    </View>
+  );
 }

src/common/SectionSeparator.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
@@ -13,8 +13,6 @@ const styles = createStyleSheet({
   },
 });
 
-export default class SectionSeparator extends PureComponent<{||}> {
-  render(): Node {
-    return <View style={styles.separator} />;
-  }
+export default function SectionSeparator(props: {||}): Node {
+  return <View style={styles.separator} />;
 }