[REFACTOR] Investigation case changes on endpoint, positive case filtering,...

[REFACTOR] Investigation case changes on endpoint, positive case filtering, and faskes dropdown behaviour

package-lock.json

@@ -1413,6 +1413,14 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-4.4.0.tgz",
       "integrity": "sha512-H1XsjQ6imMZKK+IsehDnhVhxP0FyUKX6UMWMeUkSk6Ox5M7HZ2q8kvlxVqdgZM9ry8yb6RJtCIjgBT7w8eiSug=="
     },
+    "@react-native-community/datetimepicker": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-2.3.2.tgz",
+      "integrity": "sha512-BbDmWVIaSYoYK2x5tRRuy/UWUVS6WtZ+3D210zYZgyD47yEVcTbaLFL9zFw7VxNMb8c/6BFcEpC6k18WTYplwA==",
+      "requires": {
+        "invariant": "^2.2.4"
+      }
+    },
     "@react-native-community/eslint-config": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-0.0.5.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.9.0",
+    "@react-native-community/datetimepicker": "^2.3.2",
     "@react-native-community/masked-view": "^0.1.7",
     "@react-navigation/native": "^5.0.9",
     "@react-navigation/stack": "^5.1.1",

src/App/index.tsx

@@ -14,7 +14,13 @@ import {
   ContactInvestigationFormStep2,
   ContactInvestigationFormStep3,
   ContactInvestigationFormStep4,
-  Splash
+  MonitoringSelection,
+  MonitoringMedicalReference,
+  MonitoringFormFinishPage,
+  Splash,
+  MonitoringMedicalIntake,
+  MonitoringMedicalCheck,
+  MonitoringMedicalResume
 } from 'scenes';
 import {Dimensions} from 'react-native';
 import initialCacheState, {
@@ -194,6 +200,30 @@ const App = () => {
                 name="officer-signup-finish"
                 component={OfficerSignupFormFinishPage}
               />
+              <Stack.Screen
+                name="monitoring-select"
+                component={MonitoringSelection}
+              />
+              <Stack.Screen
+                name="monitoring-medical-reference"
+                component={MonitoringMedicalReference}
+              />
+               <Stack.Screen
+                name="monitoring-medical-check"
+                component={MonitoringMedicalCheck}
+              />
+              <Stack.Screen
+                name="monitoring-medical-intake"
+                component={MonitoringMedicalIntake}
+              />
+              <Stack.Screen
+                name="monitoring-medical-resume"
+                component={MonitoringMedicalResume}
+              />
+              <Stack.Screen
+                name="monitoring-finish"
+                component={MonitoringFormFinishPage}
+              />
               <Stack.Screen name="log" component={Log} />
             </Stack.Navigator>
           </NavigationContainer>

src/components/BaseMonitoringForm/index.test.tsx

+import 'react-native';
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import BaseMonitoringForm from '.';
+
+import renderer from 'react-test-renderer';
+
+const Stack = createStackNavigator();
+
+it('renders correctly', () => {
+  let defaultPage = renderer
+    .create(
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            header: () => <></>,
+          }}>
+          <Stack.Screen
+            name="baseform"
+            component={() =>
+                <BaseMonitoringForm
+                    header="This is header"
+                    name='Sri Tanjung'
+                    age='19'
+                    is_male={true}
+                    address='Pondok Cina, Beji'
+                    status='Belum Diperiksa'
+                />
+            }
+            />
+        </Stack.Navigator>
+      </NavigationContainer>
+    )
+    .toJSON();
+
+  expect(defaultPage).toMatchSnapshot();
+
+  defaultPage = renderer
+    .create(
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            header: () => <></>,
+          }}>
+          <Stack.Screen
+            name="baseform"
+            component={() =>
+                <BaseMonitoringForm
+                    header="This is header"
+                    name='Sri Tanjung'
+                    age='19'
+                    is_male={false}
+                    address='Pondok Cina, Beji'
+                    status='Belum Diperiksa'
+                />
+            }
+            />
+        </Stack.Navigator>
+      </NavigationContainer>
+    )
+    .toJSON();
+
+  expect(defaultPage).toMatchSnapshot();
+});
\ No newline at end of file

src/components/BaseMonitoringForm/index.tsx

+import React from 'react';
+import styled from 'styled-components/native';
+import Header from 'components/Header';
+import MonitoringStatus from 'components/MonitoringStatus';
+
+interface BaseMonitoringFormProps {
+    header: string,
+    name: string,
+    age: string,
+    is_male: boolean,
+    address: string,
+    status: string,
+    children?: Element
+}
+
+const ScrollView = styled.ScrollView`
+    background: #ffffff;
+`;
+
+const Body = styled.View`
+    background: #ffffff;
+    padding: 12px;
+    padding-top: 0;
+`;
+
+const BaseMonitoringForm = (props: BaseMonitoringFormProps) => {
+    return (
+        <ScrollView>
+            <Header
+                isHome={false}
+                headerText={props.header}
+            />
+            <Body>
+                <MonitoringStatus
+                    name={props.name}
+                    age={props.age}
+                    gender={props.is_male ? 'Laki-laki' : 'Perempuan'}
+                    address={props.address}
+                    status={props.status}
+                />
+                {props.children}
+            </Body>
+            
+        </ScrollView>
+    );
+}
+
+export default BaseMonitoringForm;
\ No newline at end of file

src/components/DatePicker/__snapshots__/index.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatePicker tests renders correctly 1`] = `
+<View
+  axis={2}
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+        "backgroundColor": "transparent",
+        "borderBottomColor": "black",
+        "borderBottomWidth": 0,
+        "borderLeftColor": "black",
+        "borderLeftWidth": 0,
+        "borderRadius": 0,
+        "borderRightColor": "black",
+        "borderRightWidth": 0,
+        "borderTopColor": "black",
+        "borderTopWidth": 0,
+        "flexDirection": "column",
+        "flexGrow": 0,
+        "flexShrink": 0,
+        "flexWrap": "nowrap",
+        "height": "auto",
+        "justifyContent": "flex-start",
+        "paddingBottom": 0,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "paddingTop": 0,
+        "width": "auto",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "flex-start",
+          "backgroundColor": "transparent",
+          "borderBottomColor": "black",
+          "borderBottomWidth": 0,
+          "borderLeftColor": "black",
+          "borderLeftWidth": 0,
+          "borderRadius": 0,
+          "borderRightColor": "black",
+          "borderRightWidth": 0,
+          "borderTopColor": "black",
+          "borderTopWidth": 0,
+          "flexDirection": "row",
+          "flexGrow": 0,
+          "flexShrink": 0,
+          "flexWrap": "nowrap",
+          "height": "auto",
+          "justifyContent": "flex-start",
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 0,
+          "width": "auto",
+        },
+      ]
+    }
+  >
+    <Text
+      fontSize="16px"
+      fontWeight="Bold"
+      style={
+        Array [
+          Object {
+            "color": "black",
+            "fontFamily": "Dosis-Bold",
+            "fontSize": 16,
+            "textAlign": "left",
+            "width": "auto",
+          },
+        ]
+      }
+    >
+      Tanggal Hari Ini
+    </Text>
+  </View>
+  <RNGestureHandlerButton
+    collapsable={false}
+    onGestureEvent={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onHandlerStateChange={[Function]}
+    rippleColor={0}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomWidth": 0.75,
+              "height": 40,
+              "paddingLeft": 5,
+              "paddingTop": 6,
+              "width": 728,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "flex-start",
+                "backgroundColor": "transparent",
+                "borderBottomColor": "black",
+                "borderBottomWidth": 0,
+                "borderLeftColor": "black",
+                "borderLeftWidth": 0,
+                "borderRadius": 0,
+                "borderRightColor": "black",
+                "borderRightWidth": 0,
+                "borderTopColor": "black",
+                "borderTopWidth": 0,
+                "flexDirection": "row",
+                "flexGrow": 0,
+                "flexShrink": 0,
+                "flexWrap": "nowrap",
+                "height": "auto",
+                "justifyContent": "flex-start",
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "width": "100%",
+              },
+            ]
+          }
+          width="100%"
+        >
+          <Text
+            fontSize="16px"
+            fontWeight="Regular"
+            style={
+              Array [
+                Object {
+                  "color": "black",
+                  "fontFamily": "Dosis-Regular",
+                  "fontSize": 16,
+                  "textAlign": "left",
+                  "width": "auto",
+                },
+              ]
+            }
+          >
+            4/21/2020
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "flex-start",
+                "backgroundColor": "transparent",
+                "borderBottomColor": "black",
+                "borderBottomWidth": 0,
+                "borderLeftColor": "black",
+                "borderLeftWidth": 0,
+                "borderRadius": 0,
+                "borderRightColor": "black",
+                "borderRightWidth": 0,
+                "borderTopColor": "black",
+                "borderTopWidth": 0,
+                "flexDirection": "row",
+                "flexGrow": 0,
+                "flexShrink": 0,
+                "flexWrap": "nowrap",
+                "height": "auto",
+                "justifyContent": "flex-start",
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "width": "auto",
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </RNGestureHandlerButton>
+</View>
+`;

src/components/DatePicker/index.test.tsx

+import 'react-native';
+import React from 'react';
+import DatePicker from '.';
+
+import renderer, {act} from 'react-test-renderer';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+describe("DatePicker tests", () => {
+  it('renders correctly', () => {
+    const inst = renderer.create(
+      <DatePicker
+        name="Tanggal Hari Ini"
+      />,
+    );
+  
+    expect(inst.toJSON()).toMatchSnapshot();
+  });
+
+  it('can change date correctly', () => {
+    let date: Date = new Date();  
+    const setDate = (val: Date) => {
+        date = val;
+    };
+  
+    const inst = renderer.create(
+      <DatePicker
+        name="Tanggal Hari Ini"
+        onChange={setDate}
+      />,
+    );
+
+    const dateField = inst.root.findByType(TouchableOpacity);
+    act(() => {
+        dateField.props.onPress();
+    })
+    
+    const picker = inst.root.findByType(DateTimePicker);
+    const newDate = new Date(1598051730000);
+    let e: any;
+    act(() => {
+        picker.props.onChange(e, newDate);
+    });
+  
+    expect(date).toBe(newDate);
+  });
+});

src/components/DatePicker/index.tsx

+import React, { useState, useEffect } from 'react';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Text, Box, Gap } from 'components';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Dimensions } from 'react-native';
+import styled from 'styled-components/native';
+
+
+interface CategoryButtonProps {
+    name: string,
+    value?: Date,
+    onChange?: (newDate: Date) => void,
+}
+
+const DatePicker = ({
+    name,
+    value = new Date(),
+    onChange = () => {}
+}: CategoryButtonProps) => {
+    const [date, setDate] = useState(value);
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        onChange(date);
+    }, [date]);
+
+    return (
+        <Box
+            axis={Box.Axis.Vertical}
+        >
+            <Box>
+                <Text isBold={true}>
+                    {name}
+                </Text>
+            </Box>
+            <TouchableOpacity
+                onPress={() => {
+                    setShow(true);
+                }}
+            >
+                <Container>
+                    <Box width="100%">
+                        <Text>
+                            {date.toLocaleDateString('id-ID')}
+                        </Text>
+                    </Box>
+                <Box></Box>
+                </Container>
+            </TouchableOpacity>
+            {show && (
+                <DateTimePicker
+                testID="dateTimePicker"
+                timeZoneOffsetInMinutes={0}
+                value={date}
+                mode="date"
+                display="default"
+                onChange={(e, selectedDate) => {
+                    setShow(false);
+                    const currentDate = selectedDate || date;
+                    setDate(currentDate);
+                }}
+                />
+            )}
+        </Box>
+        
+    );
+};
+
+export default DatePicker;
+
+var width = Dimensions.get('window').width;
+const Container = styled.View`
+  width: ${width-22};
+  border-bottom-width: 0.75px;
+  padding-top: 6px;
+  padding-left: 5px;
+  height: 40px;
+`;
\ No newline at end of file

src/components/MonitoringStatus/__snapshots__/index.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fafafa",
+        "borderBottomRightRadius": 60,
+        "borderTopLeftRadius": 20,
+        "marginBottom": 20,
+        "paddingBottom": 12,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 18,
+      },
+    ]
+  }
+>
+  <Text
+    fontSize="16px"
+    fontWeight="Regular"
+    style={
+      Array [
+        Object {
+          "color": "black",
+          "fontFamily": "Dosis-Regular",
+          "fontSize": 16,
+          "textAlign": "left",
+          "width": "auto",
+        },
+      ]
+    }
+  >
+    Sri Tanjung
+     | 
+    19
+     Tahun, 
+    Male
+  </Text>
+  <Text
+    fontSize="16px"
+    fontWeight="Regular"
+    style={
+      Array [
+        Object {
+          "color": "black",
+          "fontFamily": "Dosis-Regular",
+          "fontSize": 16,
+          "textAlign": "left",
+          "width": "auto",
+        },
+      ]
+    }
+  >
+    Pondok Cina, Beji
+  </Text>
+  <View
+    paddingBottom={5}
+    paddingLeft={0}
+    paddingRight={0}
+    paddingTop={5}
+    style={
+      Array [
+        Object {
+          "flexBasis": "auto",
+          "flexGrow": 0,
+          "flexShrink": 0,
+          "paddingBottom": 5,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 5,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#f5f5f5",
+          "borderRadius": 40,
+          "width": "60%",