[native] factor keyserver list item into its own component

Summary:
Simple refactor diff. I want to separate this out into its own component since eventually we are going to add more logic like to open the bottomsheet on press and figured it would be better to have all that dedicated code in its own file rather than oversaturate the keyserver list component

Depends on D9724

Test Plan: `flow` and confirmed that everything still looks and behaves the same

Reviewers: inka, rohan, michal

Reviewed By: inka

Subscribers: ashoat, tomek, wyilio

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

native/profile/keyserver-selection-list-item.react.js

@@ -0,0 +1,122 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
+
+import CommIcon from '../components/comm-icon.react.js';
+import Pill from '../components/pill.react.js';
+import { useStyles, useColors } from '../themes/colors.js';
+
+type Props = {
+  +keyserverAdminUsername: string,
+  +keyserverInfo: KeyserverInfo,
+};
+
+function KeyserverSelectionListItem(props: Props): React.Node {
+  const { keyserverAdminUsername, keyserverInfo } = props;
+
+  const styles = useStyles(unboundStyles);
+  const colors = useColors();
+
+  const cloudIcon = React.useMemo(
+    () => (
+      <CommIcon
+        name="cloud-filled"
+        size={12}
+        color={colors.panelForegroundLabel}
+      />
+    ),
+    [colors.panelForegroundLabel],
+  );
+
+  const isConnected = keyserverInfo.connection.status === 'connected';
+
+  const { connectionIndicatorOuterStyle, connectionIndicatorInnerStyle } =
+    React.useMemo(() => {
+      const outerStyle = isConnected
+        ? styles.onlineIndicatorOuter
+        : styles.offlineIndicatorOuter;
+
+      const innerStyle = isConnected
+        ? styles.onlineIndicatorInner
+        : styles.offlineIndicatorInner;
+
+      return {
+        connectionIndicatorOuterStyle: outerStyle,
+        connectionIndicatorInnerStyle: innerStyle,
+      };
+    }, [
+      isConnected,
+      styles.offlineIndicatorInner,
+      styles.offlineIndicatorOuter,
+      styles.onlineIndicatorInner,
+      styles.onlineIndicatorOuter,
+    ]);
+
+  const keyserverListItem = React.useMemo(
+    () => (
+      <View style={styles.keyserverListItemContainer}>
+        <Pill
+          label={keyserverAdminUsername}
+          backgroundColor={colors.codeBackground}
+          icon={cloudIcon}
+        />
+        <View style={connectionIndicatorOuterStyle}>
+          <View style={connectionIndicatorInnerStyle} />
+        </View>
+      </View>
+    ),
+    [
+      cloudIcon,
+      colors.codeBackground,
+      connectionIndicatorInnerStyle,
+      connectionIndicatorOuterStyle,
+      keyserverAdminUsername,
+      styles.keyserverListItemContainer,
+    ],
+  );
+
+  return keyserverListItem;
+}
+
+const unboundStyles = {
+  keyserverListItemContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+  },
+  onlineIndicatorOuter: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'greenIndicatorOuter',
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+  },
+  onlineIndicatorInner: {
+    backgroundColor: 'greenIndicatorInner',
+    width: 9,
+    height: 9,
+    borderRadius: 4.5,
+  },
+  offlineIndicatorOuter: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'redIndicatorOuter',
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+  },
+  offlineIndicatorInner: {
+    backgroundColor: 'redIndicatorInner',
+    width: 9,
+    height: 9,
+    borderRadius: 4.5,
+  },
+};
+
+export default KeyserverSelectionListItem;

native/profile/keyserver-selection-list.react.js

@@ -6,72 +6,25 @@ import { Text, View, FlatList } from 'react-native';
 import { selectedKeyserversSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { SelectedKeyserverInfo } from 'lib/types/keyserver-types.js';
 
-import CommIcon from '../components/comm-icon.react.js';
-import Pill from '../components/pill.react.js';
+import KeyserverSelectionListItem from './keyserver-selection-list-item.react.js';
 import { useSelector } from '../redux/redux-utils.js';
-import { useStyles, useColors } from '../themes/colors.js';
+import { useStyles } from '../themes/colors.js';
 
 function keyExtractor(item: SelectedKeyserverInfo) {
   return `${item.keyserverAdminUsername}${item.keyserverInfo.urlPrefix}`;
 }
 
+function renderKeyserverListItem({ item }) {
+  return <KeyserverSelectionListItem {...item} />;
+}
+
 // eslint-disable-next-line no-unused-vars
 function KeyserverSelectionList(props: { ... }): React.Node {
   const styles = useStyles(unboundStyles);
-  const colors = useColors();
 
   const selectedKeyserverInfos: $ReadOnlyArray<SelectedKeyserverInfo> =
     useSelector(selectedKeyserversSelector);
 
-  const cloudIcon = React.useMemo(
-    () => (
-      <CommIcon
-        name="cloud-filled"
-        size={12}
-        color={colors.panelForegroundLabel}
-      />
-    ),
-    [colors.panelForegroundLabel],
-  );
-
-  const renderKeyserverListItem = React.useCallback(
-    ({ item }) => {
-      const { keyserverAdminUsername, keyserverInfo } = item;
-
-      const isConnected = keyserverInfo.connection.status === 'connected';
-
-      const connectionIndicatorOuterStyle = isConnected
-        ? styles.onlineIndicatorOuter
-        : styles.offlineIndicatorOuter;
-
-      const connectionIndicatorInnerStyle = isConnected
-        ? styles.onlineIndicatorInner
-        : styles.offlineIndicatorInner;
-
-      return (
-        <View style={styles.keyserverListItemContainer}>
-          <Pill
-            label={keyserverAdminUsername}
-            backgroundColor={colors.codeBackground}
-            icon={cloudIcon}
-          />
-          <View style={connectionIndicatorOuterStyle}>
-            <View style={connectionIndicatorInnerStyle} />
-          </View>
-        </View>
-      );
-    },
-    [
-      cloudIcon,
-      colors.codeBackground,
-      styles.keyserverListItemContainer,
-      styles.offlineIndicatorInner,
-      styles.offlineIndicatorOuter,
-      styles.onlineIndicatorInner,
-      styles.onlineIndicatorOuter,
-    ],
-  );
-
   const keyserverListSeparatorComponent = React.useCallback(
     () => <View style={styles.separator} />,
     [styles.separator],
@@ -92,7 +45,6 @@ function KeyserverSelectionList(props: { ... }): React.Node {
     ),
     [
       keyserverListSeparatorComponent,
-      renderKeyserverListItem,
       selectedKeyserverInfos,
       styles.container,
       styles.header,