Static Read Only Weekly Report

src/constants/routes.ts

@@ -47,3 +47,4 @@ export const clientDietRecommendation = `${admin}/client-diet-recommendation`;
 const weeklyReport = 'weekly-report';
 export const weeklyReportForm = `${weeklyReport}/form`;
 export const weeklyReportChooseWeek = `${weeklyReport}/choose-week`;
+export const weeklyReportReadOnly = `${weeklyReport}/read-only`;

src/scenes/index.ts

@@ -9,8 +9,8 @@ export { default as ComingSoonPage } from './common/ComingSoonPage';
 export { default as AllAccessQuestionnaire } from './questionnaire/AllAccessQuestionnaire';
 export { default as DietelaQuizResult } from './questionnaire/DietelaQuizResult';
 export { default as ExtendedQuestionnaire } from './questionnaire/ExtendedQuestionnaire';
-export { default as ProfileDietRecommendation } from './questionnaire/ProfileDietRecommendation';
 export { default as ReadOnlyDietProfile } from './questionnaire/ReadOnlyDietProfile';
+export { default as ProfileDietRecommendation } from './questionnaire/ProfileDietRecommendation';
 export * from './questionnaire/ExtendedQuestionnaire/components';
 
 export { default as Checkout } from './cart/Checkout';
@@ -29,5 +29,6 @@ export { default as ClientRecommendation } from './recommendation/ClientRecommen
 export { default as ClientDietRecommendationForAdmin } from './recommendation/ClientDietRecommendationForAdmin';
 
 export { default as WeeklyReport } from './report/WeeklyReport';
+export { default as ReadOnlyWeeklyReport } from './report/ReadOnlyWeeklyReport';
 
 export { default as ClientNavigation } from './navigation/ClientNavigation';

src/scenes/navigation/ClientNavigation/index.tsx

@@ -20,6 +20,7 @@ import {
 import { screenOptions } from 'app/styles';
 
 import { styles } from './styles';
+import { ReadOnlyWeeklyReport } from 'scenes';
 
 interface NavRoute<T = any> {
   name: string;
@@ -74,6 +75,10 @@ export const ExtQuestionnaireStackScreen: FC = () => (
 );
 
 const reportClientNavigation: NavRoute[] = [
+  {
+    name: ROUTES.weeklyReportReadOnly,
+    component: ReadOnlyWeeklyReport,
+  },
   {
     name: ROUTES.weeklyReportForm,
     component: WeeklyReport,

src/scenes/report/ReadOnlyWeeklyReport/components/WeeklyReportPage/index.tsx

+import { InfoCard } from 'components/core';
+import { Section } from 'components/layout';
+import React, { FC } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { layoutStyles, typographyStyles } from 'styles';
+import { QuestionComment } from '../../pages/types';
+
+interface Props {
+  questions: QuestionComment[];
+  title?: string;
+}
+
+const WeeklyReportPage: FC<Props> = ({ questions, title }) => {
+  return (
+    <View style={layoutStyles}>
+      <ScrollView>
+        {title && <Text style={typographyStyles.headingMedium}>{title}</Text>}
+        {questions.map((qs, ii) => (
+          <Section key={`s${ii}`}>
+            {qs.questions.map((q, jj) => (
+              <View key={`q${jj}`} style={styles.text}>
+                <View style={styles.text}>
+                  <Text style={typographyStyles.bodyLarge}>{q.question}</Text>
+
+                  {q.desc && (
+                    <>
+                      <Text style={typographyStyles.bodySmall}>
+                        {q.desc?.one}
+                      </Text>
+                      <Text style={typographyStyles.bodySmall}>
+                        {q.desc?.two}
+                      </Text>
+                    </>
+                  )}
+                </View>
+                <InfoCard content={q.answer} />
+              </View>
+            ))}
+
+            <Section>
+              <Text style={typographyStyles.bodySmall}>Komentar:</Text>
+              <InfoCard content={qs.comment} />
+            </Section>
+
+            <Section />
+          </Section>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    marginBottom: 5,
+  },
+});
+
+export default WeeklyReportPage;

src/scenes/report/ReadOnlyWeeklyReport/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import ReadOnlyWeeklyReport from '.';
+
+describe('ReadOnlyWeeklyReport', () => {
+  it('renders correctly', () => {
+    render(<ReadOnlyWeeklyReport />);
+  });
+});

src/scenes/report/ReadOnlyWeeklyReport/index.tsx

+import { CarouselPagination } from 'components/core';
+import React, { FC, useState } from 'react';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import Carousel from 'react-native-snap-carousel';
+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);
+  const pageComponents = [
+    <WeeklyReportPage questions={page1} title="Laporan Diet Anda" />,
+    <WeeklyReportPage questions={page2} />,
+    <WeeklyReportPage
+      questions={page3}
+      title="Selama 1 minggu terakhir, berapa rata-rata Anda mengonsumsi jenis makanan dibawah ini selama seharian?"
+    />,
+    <WeeklyReportPage questions={page4} />,
+  ];
+
+  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;

src/scenes/report/ReadOnlyWeeklyReport/pages/Page1/index.ts

+import { QuestionComment } from '../types';
+
+export const page1: QuestionComment[] = [
+  {
+    questions: [
+      {
+        question: 'Berat badan (kg)',
+        answer: '155',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question: 'Tinggi badan (cm)',
+        answer: '188',
+      },
+    ],
+    comment: 'pertahankan\nnak',
+  },
+  {
+    questions: [
+      {
+        question: 'Lingkar pinggang (cm)',
+        answer: '100',
+      },
+    ],
+    comment: 'gils',
+  },
+];

src/scenes/report/ReadOnlyWeeklyReport/pages/Page2/index.ts

+import { QuestionComment } from '../types';
+
+export const page2: QuestionComment[] = [
+  {
+    questions: [
+      {
+        question:
+          'Apakah sudah mulai terasa ada perubahan ukuran baju atau celana?',
+        desc: {
+          one: '1. Belum terasa sama sekali',
+          two: '5. Sudah sangat berubah',
+        },
+        answer: '1',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Secara rata-rata, sebelum waktu makan selama 1 minggu terakhir ini, dimana level rasa lapar yang Anda rasakan?',
+        desc: {
+          one: '1. Sangat kelaparan',
+          two: '10. Sangat begah (kenyang berlebihan)',
+        },
+        answer: '1',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Secara rata-rata, saat berhenti makan selama 1 minggu terakhir ini, dimana level rasa kenyang yang Anda rasakan?',
+        desc: {
+          one: '1. Sangat kelaparan',
+          two: '10. Sangat begah (kenyang berlebihan)',
+        },
+        answer: '1',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Selama 1 minggu terakhir, secara rata-rata, berapa kali Anda makan berat atau makan utama dalam 1 hari?',
+        answer: '1x/hari',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Selama 1 minggu terakhir, secara rata-rata, berapa kali Anda makan cemilan dalam 1 hari?',
+        answer: '1x/hari',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Selama 1 minggu terakhir, berapa rata-rata total gelas air putih yang Anda minum?',
+        answer: '1',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+];

src/scenes/report/ReadOnlyWeeklyReport/pages/Page3/index.ts

+import { QuestionComment } from '../types';
+
+export const page3: QuestionComment[] = [
+  {
+    questions: [
+      {
+        question: 'Minuman manis (satuan: gelas)',
+        answer: '0',
+      },
+      {
+        question:
+          'Gula pasir, gula aren, sirup, selai, atau madu (satuan: sendok makan)',
+        answer: '0',
+      },
+      {
+        question: 'Cemilan digoreng (satuan: potong)',
+        answer: '0',
+      },
+      {
+        question:
+          'Makanan ringan asin atau gurih (seperti makanan ringan kemasan, ciki-cikian, keripik) (satuan: bungkus)',
+        answer: '0',
+      },
+      {
+        question:
+          'Cemilan manis (seperti kue-kue manis, brownis, cake, biskuit, cokelat, wafer) (satuan: potong)',
+        answer: '0',
+      },
+      {
+        question: 'Porsi buah',
+        answer: '0',
+      },
+      {
+        question: 'Porsi sayur',
+        answer: '0',
+      },
+    ],
+    comment: 'hey b0ss',
+  },
+];

src/scenes/report/ReadOnlyWeeklyReport/pages/Page4/index.ts

+import { QuestionComment } from '../types';
+
+export const page4: QuestionComment[] = [
+  {
+    questions: [
+      {
+        question:
+          'Selama 1 minggu terakhir, pilih semua jenis aktivitas atau olahraga yang sudah Anda lakukan',
+        answer: '- Hampir tidak pernah olahraga\n- Jogging',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Selama 1 minggu (7 hari) terakhir, berapa total menit yang Anda habiskan untuk melakukan bergerak aktif dan olahraga di atas dalam seminggu?',
+        answer: '0 - 60 menit',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Sejauh ini, bagaimana perasaan Anda dalam mengikuti program?',
+        answer: 'Bintang 2: Capek, susah, bosen, males, repot, sibuk',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Dalam 1 minggu terakhir, Apa saja yang sudah bisa Anda pelajari dari program ini?',
+        answer:
+          'Tidur cukup, pola makan seimbang, olahraga rutin 30 menit per hari',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+  {
+    questions: [
+      {
+        question:
+          'Silahkan sampaikan disini, jika Anda mempunyai kendala atau keluhan atau kesulitan dalam mengikuti program.',
+        answer: 'Tidak ada',
+      },
+    ],
+    comment: 'keren bingits',
+  },
+];

src/scenes/report/ReadOnlyWeeklyReport/pages/types.ts

+export interface QuestionItem {
+  question: string;
+  desc?: {
+    one: string;
+    two: string;
+  };
+  answer: string;
+}
+
+export interface QuestionComment {
+  questions: QuestionItem[];
+  comment: string;
+}