Fakultas Ilmu Komputer UI

index.tsx 2.12 KB
Newer Older
1
2
3
import { useRoute } from '@react-navigation/core';
import { CarouselPagination, EmptyDataPage, Loader } from 'components/core';
import { useApi } from 'hooks';
4
5
6
import React, { FC, useState } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import Carousel from 'react-native-snap-carousel';
7
8
import { retrieveUserReportCommentByReportId } from 'services/progress';
import { UserReportResponse } from 'services/progress/models';
9
10
11
12
13
14
15
16
import WeeklyReportPage from './components/WeeklyReportPage';
import { page1 } from './pages/Page1';
import { page2 } from './pages/Page2';
import { page3 } from './pages/Page3';
import { page4 } from './pages/Page4';

const ReadOnlyWeeklyReport: FC = () => {
  const [activeSlide, setActiveSlide] = useState(0);
17
  const route = useRoute();
18
  const data = route.params as UserReportResponse;
19
  const { isLoading, data: commentData } = useApi(() =>
20
    retrieveUserReportCommentByReportId(data.id),
21
22
23
24
25
26
  );

  if (isLoading) {
    return <Loader />;
  }

27
  if (!commentData || commentData.length === 0) {
28
29
    return <EmptyDataPage text="Belum ada komentar dari nutrisionis" />;
  }
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  const firstCommentData = commentData[0];

  const pageComponents = [
    <WeeklyReportPage
      questions={page1(data, firstCommentData)}
      title="Laporan Diet Anda"
    />,
    <WeeklyReportPage questions={page2(data, firstCommentData)} />,
    <WeeklyReportPage
      questions={page3(data, firstCommentData)}
      title="Selama 1 minggu terakhir, berapa rata-rata Anda mengonsumsi jenis makanan dibawah ini selama seharian?"
    />,
    <WeeklyReportPage questions={page4(data, firstCommentData)} />,
  ];
44

45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
  return (
    <>
      <View style={[styles.flexContainer]}>
        <Carousel
          data={pageComponents}
          renderItem={({ item }: any) => item}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={Dimensions.get('window').width}
          onSnapToItem={setActiveSlide}
        />
      </View>
      <CarouselPagination index={activeSlide} length={4} />
    </>
  );
};

const styles = StyleSheet.create({
  flexContainer: {
    flex: 1,
  },
});

export default ReadOnlyWeeklyReport;