Fakultas Ilmu Komputer UI

Commit ddd767d0 authored by Kefas Satrio Bangkit Solidedantyo's avatar Kefas Satrio Bangkit Solidedantyo
Browse files

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

extract duplicate client list code

See merge request !60
parents ebb65e14 3c0d4ade
Pipeline #79514 failed with stages
in 41 minutes and 39 seconds
module.exports = { module.exports = {
preset: 'react-native', preset: 'react-native',
testTimeout: 60000, testTimeout: 200000,
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
setupFiles: [ setupFiles: [
'./jestSetup.js', './jestSetup.js',
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"android": "react-native run-android", "android": "react-native run-android",
"ios": "react-native run-ios", "ios": "react-native run-ios",
"start": "react-native start", "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", "test-only": "jest --verbose -t",
"lint": "eslint . --ext .ts,.tsx --fix", "lint": "eslint . --ext .ts,.tsx --fix",
"prettify": "prettier --write src", "prettify": "prettier --write src",
......
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;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment