[REFACTOR] Add utils and change routes for weekly report

src/constants/routes.ts

@@ -24,9 +24,9 @@ export const paymentResult = `${payment}/result`;
 
 const client = 'client';
 export const clientTabNavigation = `${client}/tab-navigation`;
-export const clientProfile = `${client}/profile`;
+export const clientTabProfile = `${client}/profile`;
 export const clientRecommendation = `${client}/recommendation`;
-export const clientWeeklyReport = `${client}/report`;
+export const clientTabWeeklyReport = `${client}/tab-report`;
 export const clientChat = `${client}/chat`;
 
 const nutritionist = 'nutritionist';

src/scenes/index.ts

@@ -28,6 +28,8 @@ export { default as ClientListAdmin } from './admin/ClientListAdmin';
 export { default as ClientRecommendation } from './recommendation/ClientRecommendation';
 export { default as ClientDietRecommendationForAdmin } from './recommendation/ClientDietRecommendationForAdmin';
 
+export { default as ChooseWeekForClient } from './report/ChooseWeekForClient';
+export { default as ChooseWeekForNutritionist } from './report/ChooseWeekForNutritionist';
 export { default as WeeklyReport } from './report/WeeklyReport';
 export { default as ReadOnlyWeeklyReport } from './report/ReadOnlyWeeklyReport';
 

src/scenes/navigation/ClientNavigation/index.tsx

@@ -2,9 +2,11 @@ import React, { FC } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Icon } from 'react-native-elements';
-import { colors, typography } from 'styles';
 
 import * as ROUTES from 'constants/routes';
+import { screenOptions } from 'app/styles';
+import { styles, tabBarOptions } from './styles';
+
 import ClientRecommendation from 'scenes/recommendation/ClientRecommendation';
 import WeeklyReport from 'scenes/report/WeeklyReport';
 import ComingSoonPage from 'scenes/common/ComingSoonPage';
@@ -18,9 +20,7 @@ import {
   Questionnaire5,
 } from 'scenes/questionnaire/ExtendedQuestionnaire/components';
 import ReadOnlyWeeklyReport from 'scenes/report/ReadOnlyWeeklyReport';
-import { screenOptions } from 'app/styles';
-
-import { styles } from './styles';
+import ChooseWeekForClient from 'scenes/report/ChooseWeekForClient';
 
 interface NavRoute<T = any> {
   name: string;
@@ -75,6 +75,10 @@ export const ExtQuestionnaireStackScreen: FC = () => (
 );
 
 const reportClientNavigation: NavRoute[] = [
+  {
+    name: ROUTES.weeklyReportChooseWeek,
+    component: ChooseWeekForClient,
+  },
   {
     name: ROUTES.weeklyReportForm,
     component: WeeklyReport,
@@ -83,10 +87,6 @@ const reportClientNavigation: NavRoute[] = [
     name: ROUTES.weeklyReportReadOnly,
     component: ReadOnlyWeeklyReport,
   },
-  {
-    name: ROUTES.weeklyReportChooseWeek,
-    component: ComingSoonPage,
-  },
 ];
 
 const WeeklyReportStack = createStackNavigator();
@@ -109,24 +109,11 @@ const ClientTab = createBottomTabNavigator();
 const ClientNavigation: FC = () => {
   return (
     <ClientTab.Navigator
-      initialRouteName={ROUTES.clientProfile}
+      initialRouteName={ROUTES.clientTabProfile}
       sceneContainerStyle={styles.sceneStyle}
-      tabBarOptions={{
-        activeTintColor: colors.primaryVariant,
-        labelStyle: {
-          paddingVertical: 0,
-          marginVertical: 0,
-          ...typography.headingMedium,
-          fontSize: 14,
-        },
-        style: {
-          height: 66,
-          paddingTop: 8,
-          paddingBottom: 8,
-        },
-      }}>
+      tabBarOptions={tabBarOptions}>
       <ClientTab.Screen
-        name={ROUTES.clientProfile}
+        name={ROUTES.clientTabProfile}
         component={ExtQuestionnaireStackScreen}
         options={{
           tabBarLabel: 'Profil',
@@ -151,7 +138,7 @@ const ClientNavigation: FC = () => {
         }}
       />
       <ClientTab.Screen
-        name={ROUTES.clientWeeklyReport}
+        name={ROUTES.clientTabWeeklyReport}
         component={WeeklyReportStackScreen}
         options={{
           tabBarLabel: 'Laporan Diet',

src/scenes/navigation/ClientNavigation/styles.ts

 import { StyleSheet } from 'react-native';
+import { colors, typography } from 'styles';
 
 export const styles = StyleSheet.create({
   sceneStyle: {
     backgroundColor: 'transparent',
   },
 });
+
+export const tabBarOptions = {
+  activeTintColor: colors.primaryVariant,
+  labelStyle: {
+    paddingVertical: 0,
+    marginVertical: 0,
+    ...typography.headingMedium,
+    fontSize: 14,
+  },
+  style: {
+    height: 66,
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+};

src/utils/format.ts

-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { API_BASE_URL } from 'env';
 
 export const convertDate = (dateString?: string): string => {
@@ -10,3 +10,15 @@ export const dateToString = (date: Date): string =>
 
 export const getAbsoluteUrl = (path?: string | null) =>
   path ? API_BASE_URL + path : '';
+
+export const getDateRange = (
+  weekDiff: number,
+): {
+  mon: Dayjs;
+  sun: Dayjs;
+} => {
+  return {
+    mon: dayjs().day(1).subtract(weekDiff, 'week'),
+    sun: dayjs().day(7).subtract(weekDiff, 'week'),
+  };
+};