extract duplicate client list code

src/components/core/index.ts

@@ -9,3 +9,4 @@ export { default as Statistic } from './Statistic';
 export { default as Toast } from 'react-native-toast-message';
 export { default as WizardContainer } from './WizardContainer';
 export { default as EmptyDataPage } from './EmptyDataPage';
+export { default as ClientList } from './ClientList';

src/scenes/admin/ClientListAdmin/index.tsx

-import React, { FC, useState } from 'react';
-import { SearchBar } from 'react-native-elements';
-import { ScrollView } from 'react-native-gesture-handler';
-import { BigButton, Loader } from 'components/core';
-import { useNavigation } from '@react-navigation/core';
-import { useApi, useDownloadFiles } from 'hooks';
-
-import { ClientCardNutritionist } from 'scenes/nutritionist/ClientListNutritionist/components';
-import { retrieveClientListApi } from 'services/profiles';
+import React, { FC } from 'react';
 import * as ROUTES from 'constants/routes';
-
-import { layoutStyles } from 'styles';
-import { Dimensions, StyleSheet, View } from 'react-native';
-import { Section } from 'components/layout';
-import { getAbsoluteUrl } from 'utils/format';
 import { UserRole } from 'services/auth/models';
+import { ClientList } from 'components/core';
 
 const ClientListAdmin: FC = () => {
-  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 />;
-  }
-
   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(ROUTES.clientProfileAdmin, {
-                  id: client.diet_questionnaire_id,
-                  role: UserRole.ADMIN,
-                });
-              }}
-              onPressClientDietReport={() => {
-                navigation.navigate(ROUTES.clientDietReportAdmin, {});
-              }}
-              onPressClientChat={() => {
-                navigation.navigate(ROUTES.clientChatAdmin, {});
-              }}
-            />
-          ))}
-      </ScrollView>
-      <Section>
-        <BigButton title="Download CSV" onPress={download} />
-      </Section>
-    </View>
+    <ClientList
+      role={UserRole.ADMIN}
+      clientProfileRoute={ROUTES.clientProfileAdmin}
+      clientDietReportRoute={ROUTES.clientDietReportAdmin}
+      clientChatRoute={ROUTES.clientChatAdmin}
+    />
   );
 };
 
-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 ClientListAdmin;

src/scenes/nutritionist/ClientListNutritionist/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 React, { FC } from 'react';
 import * as ROUTES from 'constants/routes';
-import { retrieveClientListApi } from 'services/profiles';
-import { useApi } from 'hooks';
-import { Loader, EmptyDataPage } from 'components/core';
 import { UserRole } from 'services/auth/models';
+import { ClientList } from 'components/core';
 
 const ClientListNutritionist: FC = () => {
-  const navigation = useNavigation();
-  const { isLoading, data: clients = [] } = useApi(retrieveClientListApi);
-  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(ROUTES.clientProfileNutritionist, {
-                  id: client.diet_questionnaire_id,
-                  role: UserRole.NUTRITIONIST,
-                });
-              }}
-              onPressClientDietReport={() => {
-                navigation.navigate(ROUTES.clientDietReportNutritionist, {});
-              }}
-              onPressClientChat={() => {
-                navigation.navigate(ROUTES.clientChatNutritionist, {});
-              }}
-            />
-          ))}
-      </ScrollView>
-    </View>
+    <ClientList
+      role={UserRole.NUTRITIONIST}
+      clientProfileRoute={ROUTES.clientProfileNutritionist}
+      clientDietReportRoute={ROUTES.clientDietReportNutritionist}
+      clientChatRoute={ROUTES.clientChatNutritionist}
+    />
   );
 };
 
-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 ClientListNutritionist;