Fakultas Ilmu Komputer UI

index.tsx 2.51 KB
Newer Older
1
2
3
4
import { FC, useState } from 'react';
import { Dimensions, ScrollView } from 'react-native';
import { styles } from './styles';
import { layoutStyles } from 'styles';
5
import { useNavigation, useRoute } from '@react-navigation/native';
6
7
import React from 'react';
import { DietProfilePage } from './components';
8
9
10
11
12
13
import {
  CarouselPagination,
  BigButton,
  Loader,
  EmptyDataPage,
} from 'components/core';
14
15
16
17
18
import Carousel from 'react-native-snap-carousel';
import { pages } from './pages';
import { useApi } from 'hooks';
import { retrieveDietQuestionnaireByIdApi } from 'services/dietQuestionnaire';
import { DietQuestionnaireResponse } from 'services/dietQuestionnaire/models';
19
import * as ROUTES from 'constants/routes';
20
import { UserRole } from 'services/auth/models';
21

22
interface ParamsDietProfile {
23
  id: number;
24
  id_recommendation: number;
25
  role: string;
26
27
28
}

const ReadOnlyDietProfile: FC = () => {
29
  const navigation = useNavigation();
30
31
  const [activeSlide, setActiveSlide] = useState(0);
  const route = useRoute();
32
  const { id, id_recommendation, role } = route.params as ParamsDietProfile;
33
34
35
36
  const { isLoading, data } = useApi(() =>
    retrieveDietQuestionnaireByIdApi(id),
  );

37
38
  const dataDQR = data as DietQuestionnaireResponse;

39
40
41
42
  if (!id) {
    return <EmptyDataPage text="Klien belum mengisi diet questionnaire" />;
  }

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
  if (isLoading) {
    return <Loader />;
  }

  return (
    <ScrollView contentContainerStyle={[layoutStyles, styles.container]}>
      <Carousel
        data={pages.map((page, idx) => (
          <DietProfilePage
            key={idx}
            content={page(data as DietQuestionnaireResponse)}
          />
        ))}
        renderItem={({ item }: any) => item}
        sliderWidth={Dimensions.get('window').width}
        itemWidth={Dimensions.get('window').width}
        onSnapToItem={setActiveSlide}
      />
      <CarouselPagination index={activeSlide} length={5} />
62
63
64
65
66
67
      {role === UserRole.NUTRITIONIST ? (
        <BigButton
          title="Berikan Rekomendasi"
          onPress={() =>
            navigation.navigate(ROUTES.profileDietRecommendation, {
              name: dataDQR.user.name,
68
              id: id_recommendation,
69
70
71
72
73
74
75
76
77
            })
          }
        />
      ) : (
        <BigButton
          title="Lihat Rekomendasi"
          onPress={() =>
            navigation.navigate(ROUTES.clientDietRecommendation, {
              name: dataDQR.user.name,
78
              id: id_recommendation,
79
80
81
82
            })
          }
        />
      )}
83
84
85
86
87
    </ScrollView>
  );
};

export default ReadOnlyDietProfile;