extract duplicate client list code

jest.config.js

 module.exports = {
   preset: 'react-native',
-  testTimeout: 60000,
+  testTimeout: 200000,
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   setupFiles: [
     './jestSetup.js',

package.json

@@ -6,7 +6,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
-    "test": "jest --coverage --watchAll=false --verbose --collectCoverageFrom=\"src/**/*.tsx\"",
+    "test": "jest --maxWorkers=7 --coverage --watchAll=false --verbose --collectCoverageFrom=\"src/**/*.tsx\"",
     "test-only": "jest --verbose -t",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "prettify": "prettier --write src",

src/components/core/ClientList/index.tsx

+import React, { FC, useState } from 'react';
+import { SearchBar } from 'react-native-elements';
+import { ScrollView, View, StyleSheet, Dimensions } from 'react-native';
+import { layoutStyles } from 'styles';
+import { ClientCardNutritionist } from './components';
+import { useNavigation } from '@react-navigation/native';
+import { retrieveClientListApi } from 'services/profiles';
+import { useApi, useDownloadFiles } from 'hooks';
+import { getAbsoluteUrl } from 'utils/format';
+import { BigButton, Loader, EmptyDataPage } from 'components/core';
+import { Section } from 'components/layout';
+import { UserRole } from 'services/auth/models';
+
+interface Props {
+  role: string;
+  clientProfileRoute: string;
+  clientDietReportRoute: string;
+  clientChatRoute: string;
+}
+
+const ClientList: FC<Props> = ({
+  role,
+  clientProfileRoute,
+  clientDietReportRoute,
+  clientChatRoute,
+}) => {
+  const navigation = useNavigation();
+  const { isLoading, data: clients = [] } = useApi(retrieveClientListApi);
+  const { download } = useDownloadFiles(getAbsoluteUrl('exportcsv'));
+  const [searchedText, setSearchedText] = useState('');
+
+  const updateSearch = (search: string) => {
+    setSearchedText(search);
+  };
+
+  if (isLoading) {
+    return <Loader />;
+  }
+  if (!clients.length) {
+    return <EmptyDataPage text="Belum ada klien" />;
+  }
+
+  return (
+    <View style={[layoutStyles, styles.listContainer]}>
+      <SearchBar
+        inputStyle={styles.backgroundWhite}
+        inputContainerStyle={styles.backgroundWhite}
+        rightIconContainerStyle={styles.backgroundWhite}
+        leftIconContainerStyle={styles.backgroundWhite}
+        containerStyle={styles.searchContainer}
+        onChangeText={updateSearch}
+        placeholder="Cari nama klien..."
+        value={searchedText}
+      />
+      <ScrollView style={styles.container}>
+        {clients
+          .filter((c) =>
+            c.user.name.toLowerCase().includes(searchedText.toLowerCase()),
+          )
+          .map((client, idx) => (
+            <ClientCardNutritionist
+              key={idx}
+              clientName={client.user.name}
+              onPressClientProfile={() => {
+                navigation.navigate(clientProfileRoute, {
+                  id: client.diet_questionnaire_id,
+                  role: role,
+                });
+              }}
+              onPressClientDietReport={() => {
+                navigation.navigate(clientDietReportRoute, {});
+              }}
+              onPressClientChat={() => {
+                navigation.navigate(clientChatRoute, {});
+              }}
+            />
+          ))}
+      </ScrollView>
+      {role === UserRole.ADMIN ? (
+        <Section>
+          <BigButton title="Download CSV" onPress={download} />
+        </Section>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { height: Dimensions.get('window').height * 0.83 },
+  listContainer: {
+    position: 'relative',
+    flex: 1,
+  },
+  searchContainer: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderRadius: 5,
+    marginBottom: 20,
+    justifyContent: 'center',
+    height: 58,
+  },
+  backgroundWhite: { backgroundColor: 'white' },
+});
+
+export default ClientList;