Fakultas Ilmu Komputer UI

index.tsx 3.38 KB
Newer Older
1
2
3
4
5
6
7
8
9
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';
10
11
12
import BigButton from '../../core/BigButton';
import Loader from '../../core/Loader';
import EmptyDataPage from '../../core/EmptyDataPage';
13
14
import { Section } from 'components/layout';
import { UserRole } from 'services/auth/models';
15
import { FileType } from 'hooks/useDownloadFiles/schema';
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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);
32
33
34
35
36
37
  const { download } = useDownloadFiles(
    getAbsoluteUrl('/exportcsv'),
    'client list CSV',
    FileType.CSV,
    'export.csv',
  );
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
  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,
75
                  id_recommendation: client.diet_recommendation_id,
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
                  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;