Merge branch 'client-list-search' into 'staging'

client list search

See merge request !59

src/scenes/admin/ClientListAdmin/index.tsx

-import React, { FC } from 'react';
+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';
@@ -18,15 +19,34 @@ 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}>
+    <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.map((client, idx) => (
+        {clients
+          .filter((c) =>
+            c.user.name.toLowerCase().includes(searchedText.toLowerCase()),
+          )
+          .map((client, idx) => (
             <ClientCardNutritionist
               key={idx}
               clientName={client.user.name}
@@ -45,7 +65,6 @@ const ClientListAdmin: FC = () => {
             />
           ))}
       </ScrollView>
-
       <Section>
         <BigButton title="Download CSV" onPress={download} />
       </Section>
@@ -55,6 +74,19 @@ const ClientListAdmin: FC = () => {
 
 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 } from 'react';
-import { ScrollView } from 'react-native';
+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';
@@ -12,6 +13,11 @@ import { UserRole } from 'services/auth/models';
 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 />;
@@ -20,8 +26,23 @@ const ClientListNutritionist: FC = () => {
     return <EmptyDataPage text="Belum ada klien" />;
   }
   return (
-    <ScrollView contentContainerStyle={layoutStyles}>
-      {clients.map((client, idx) => (
+    <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}
@@ -40,7 +61,25 @@ const ClientListNutritionist: FC = () => {
             />
           ))}
       </ScrollView>
+    </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 ClientListNutritionist;