Fakultas Ilmu Komputer UI

index.tsx 4.58 KB
Newer Older
1
import React, { FC, useContext } from 'react';
2
3
4
5
6
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Icon } from 'react-native-elements';

import * as ROUTES from 'constants/routes';
7
8
9
import { screenOptions } from 'app/styles';
import { styles, tabBarOptions } from './styles';

10
11
12
13
14
15
16
17
18
19
20
import ClientRecommendation from 'scenes/recommendation/ClientRecommendation';
import WeeklyReport from 'scenes/report/WeeklyReport';
import ExtendedQuestionnaire from 'scenes/questionnaire/ExtendedQuestionnaire';
import {
  ConsentForm,
  Questionnaire1,
  Questionnaire2,
  Questionnaire3,
  Questionnaire4,
  Questionnaire5,
} from 'scenes/questionnaire/ExtendedQuestionnaire/components';
21
import ReadOnlyWeeklyReport from 'scenes/report/ReadOnlyWeeklyReport';
22
import ChooseWeekForClient from 'scenes/report/ChooseWeekForClient';
Wulan Mantiri's avatar
Wulan Mantiri committed
23
import ChatForClient from 'scenes/chat/ChatForClient';
24
import { UserContext } from 'provider';
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

interface NavRoute<T = any> {
  name: string;
  component: FC<T>;
  header?: string;
}

const profileClientNavigation: NavRoute[] = [
  {
    name: ROUTES.extendedQuestionnaire,
    component: ExtendedQuestionnaire,
  },
  ...[
    {
      component: ConsentForm,
    },
    {
      component: Questionnaire1,
    },
    {
      component: Questionnaire2,
    },
    {
      component: Questionnaire3,
    },
    {
      component: Questionnaire4,
    },
    {
      component: Questionnaire5,
    },
  ].map((nav, id) => ({
    ...nav,
    name: ROUTES.extendedQuestionnaireById(id),
  })),
];

const ExtQuestionnaireStack = createStackNavigator();
export const ExtQuestionnaireStackScreen: FC = () => (
  <ExtQuestionnaireStack.Navigator screenOptions={screenOptions}>
    {profileClientNavigation.map((nav, i) => (
      <ExtQuestionnaireStack.Screen
        key={`ext-questionnaire-nav-${i}`}
        name={nav.name}
        component={nav.component}
        options={{
          headerShown: false,
        }}
      />
    ))}
  </ExtQuestionnaireStack.Navigator>
);

const reportClientNavigation: NavRoute[] = [
79
80
81
82
  {
    name: ROUTES.weeklyReportChooseWeek,
    component: ChooseWeekForClient,
  },
83
84
85
86
  {
    name: ROUTES.weeklyReportForm,
    component: WeeklyReport,
  },
87
88
89
90
  {
    name: ROUTES.weeklyReportReadOnly,
    component: ReadOnlyWeeklyReport,
  },
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
];

const WeeklyReportStack = createStackNavigator();
export const WeeklyReportStackScreen: FC = () => (
  <WeeklyReportStack.Navigator screenOptions={screenOptions}>
    {reportClientNavigation.map((nav, i) => (
      <WeeklyReportStack.Screen
        key={`report-client-nav-${i}`}
        name={nav.name}
        component={nav.component}
        options={{
          headerShown: false,
        }}
      />
    ))}
  </WeeklyReportStack.Navigator>
);

const ClientTab = createBottomTabNavigator();
const ClientNavigation: FC = () => {
111
112
113
114
115
  const { user } = useContext(UserContext);

  if (!user.is_finished_onboarding) {
    return <ExtQuestionnaireStackScreen />;
  }
116
117
  return (
    <ClientTab.Navigator
118
      initialRouteName={ROUTES.clientTabProfile}
119
      sceneContainerStyle={styles.sceneStyle}
120
      tabBarOptions={tabBarOptions}>
121
      <ClientTab.Screen
122
        name={ROUTES.clientTabProfile}
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
        component={ExtQuestionnaireStackScreen}
        options={{
          tabBarLabel: 'Profil',
          tabBarIcon: ({ color, size }) => (
            <Icon name="home" color={color} size={size} />
          ),
        }}
      />
      <ClientTab.Screen
        name={ROUTES.clientRecommendation}
        component={ClientRecommendation}
        options={{
          tabBarLabel: 'Rekomendasi',
          tabBarIcon: ({ color, size }) => (
            <Icon
              name="nutrition"
              type="material-community"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <ClientTab.Screen
147
        name={ROUTES.clientTabWeeklyReport}
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
        component={WeeklyReportStackScreen}
        options={{
          tabBarLabel: 'Laporan Diet',
          tabBarIcon: ({ color, size }) => (
            <Icon
              name="file-document-edit-outline"
              type="material-community"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <ClientTab.Screen
        name={ROUTES.clientChat}
Wulan Mantiri's avatar
Wulan Mantiri committed
163
        component={ChatForClient}
164
165
166
167
168
169
170
171
172
173
174
175
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: ({ color, size }) => (
            <Icon name="chatbox" type="ionicon" color={color} size={size} />
          ),
        }}
      />
    </ClientTab.Navigator>
  );
};

export default ClientNavigation;