Fakultas Ilmu Komputer UI

index.tsx 2.18 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { FC } from 'react';
import { useNavigation } from '@react-navigation/native';
import { View, ScrollView } from 'react-native';
import { Button, Text } from 'react-native-elements';
import * as ROUTES from 'constants/routes';

import { styles } from './styles';
import { Props } from './types';
import { getDateRange } from 'utils/format';

const ChooseWeek: FC<Props> = ({ data, isNutritionist }) => {
  const redirectViewRoute = isNutritionist ? '' : ROUTES.weeklyReportReadOnly; // TODO
  const navigation = useNavigation();

  const getDateRangeForWeek = (weekNum: number) => {
    const { mon, sun } = getDateRange(data.current_week_num - weekNum);
    return `${mon.format('DD MMM YYYY')} - ${sun.format('DD MMM YYYY')}`;
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.pageContainer}>
        {!isNutritionist && data.has_not_filled_form ? (
          <View style={styles.page}>
            <View style={styles.text}>
              <Text style={styles.bold}>Minggu {data.current_week_num}</Text>
              <Text>{getDateRangeForWeek(data.current_week_num)}</Text>
            </View>
            <View style={styles.buttonContainer}>
              <Button
                title="Isi"
                onPress={() => navigation.navigate(ROUTES.weeklyReportForm)}
                buttonStyle={styles.button}
                titleStyle={styles.buttonTitle}
              />
            </View>
          </View>
        ) : null}
        {data.reports.map((report, i) => (
          <View style={styles.page} key={i}>
            <View style={styles.text}>
              <Text style={styles.bold}>Minggu {report.week_num}</Text>
              <Text>{getDateRangeForWeek(report.week_num)}</Text>
            </View>
            <View style={styles.buttonContainer}>
              <Button
                title="Lihat"
                type="outline"
                onPress={() => navigation.navigate(redirectViewRoute)}
                buttonStyle={styles.outlineButtonStyle}
                titleStyle={styles.buttonTitle}
              />
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

export default ChooseWeek;