StreamList [nfc]: Convert to function component.

chrisbobbe · Jul 28, 2021 · 6650e6e · 6650e6e
1 parent 2a55fba
commit 6650e6e
Showing 1 changed file with 55 additions and 57 deletions.
diff --git a/src/streams/StreamList.js b/src/streams/StreamList.js
@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { SectionList } from 'react-native';
 
 import type { Stream, Subscription } from '../types';
@@ -38,67 +38,65 @@ type PseudoSubscription =
     |}>;
 
 type Props = $ReadOnly<{|
-  showDescriptions: boolean,
-  showSwitch: boolean,
-  streams: $ReadOnlyArray<PseudoSubscription>,
-  unreadByStream: $ReadOnly<{| [number]: number |}>,
+  showDescriptions?: boolean,
+  showSwitch?: boolean,
+  streams?: $ReadOnlyArray<PseudoSubscription>,
+  unreadByStream?: $ReadOnly<{| [number]: number |}>,
   onPress: (streamName: string) => void,
   onSwitch?: (streamName: string, newValue: boolean) => void,
 |}>;
 
-export default class StreamList extends PureComponent<Props> {
-  static defaultProps = {
-    showDescriptions: false,
-    showSwitch: false,
-    streams: [],
-    unreadByStream: {},
-  };
+export default function StreamList(props: Props) {
+  const {
+    streams = [],
+    showDescriptions = false,
+    showSwitch = false,
+    unreadByStream = {},
+    onPress,
+    onSwitch,
+  } = props;
 
-  render() {
-    const { streams, showDescriptions, showSwitch, unreadByStream, onPress, onSwitch } = this.props;
-
-    if (streams.length === 0) {
-      return <SearchEmptyState text="No streams found" />;
-    }
+  if (streams.length === 0) {
+    return <SearchEmptyState text="No streams found" />;
+  }
 
-    const sortedStreams: PseudoSubscription[] = streams
-      .slice()
-      .sort((a, b) => caseInsensitiveCompareFunc(a.name, b.name));
-    const sections = [
-      {
-        key: 'Pinned',
-        data: sortedStreams.filter(x => x.pin_to_top),
-      },
-      {
-        key: 'Unpinned',
-        data: sortedStreams.filter(x => !x.pin_to_top),
-      },
-    ];
+  const sortedStreams: PseudoSubscription[] = streams
+    .slice()
+    .sort((a, b) => caseInsensitiveCompareFunc(a.name, b.name));
+  const sections = [
+    {
+      key: 'Pinned',
+      data: sortedStreams.filter(x => x.pin_to_top),
+    },
+    {
+      key: 'Unpinned',
+      data: sortedStreams.filter(x => !x.pin_to_top),
+    },
+  ];
 
-    return (
-      <SectionList
-        style={styles.list}
-        sections={sections}
-        extraData={unreadByStream}
-        initialNumToRender={20}
-        keyExtractor={item => item.stream_id}
-        renderItem={({ item }: { item: PseudoSubscription, ... }) => (
-          <StreamItem
-            name={item.name}
-            iconSize={16}
-            isPrivate={item.invite_only}
-            description={showDescriptions ? item.description : ''}
-            color={item.color}
-            unreadCount={unreadByStream[item.stream_id]}
-            isMuted={item.in_home_view === false} // if 'undefined' is not muted
-            showSwitch={showSwitch}
-            isSubscribed={item.subscribed}
-            onPress={onPress}
-            onSwitch={onSwitch}
-          />
-        )}
-        SectionSeparatorComponent={SectionSeparatorBetween}
-      />
-    );
-  }
+  return (
+    <SectionList
+      style={styles.list}
+      sections={sections}
+      extraData={unreadByStream}
+      initialNumToRender={20}
+      keyExtractor={item => item.stream_id}
+      renderItem={({ item }: { item: PseudoSubscription, ... }) => (
+        <StreamItem
+          name={item.name}
+          iconSize={16}
+          isPrivate={item.invite_only}
+          description={showDescriptions ? item.description : ''}
+          color={item.color}
+          unreadCount={unreadByStream[item.stream_id]}
+          isMuted={item.in_home_view === false} // if 'undefined' is not muted
+          showSwitch={showSwitch}
+          isSubscribed={item.subscribed}
+          onPress={onPress}
+          onSwitch={onSwitch}
+        />
+      )}
+      SectionSeparatorComponent={SectionSeparatorBetween}
+    />
+  );
 }