add appointments screen

package.json

@@ -15,6 +15,7 @@
     "react-native-datepicker": "^1.6.0",
     "react-native-firebase": "^3.1.0",
     "react-native-google-signin": "^0.12.0",
+    "react-native-material-dialog": "^0.7.4",
     "react-native-modal-datetime-picker": "^4.13.0",
     "react-native-push-notification": "^3.0.2",
     "react-native-vector-icons": "^4.4.2",

src/navigators/RootNavigator.js

 import React, { Component } from 'react';
-import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation';
+import { DrawerNavigator, StackNavigator } from 'react-navigation';
 
 import HomeScreen from './../screens/HomeScreen';
 import CameraScreen from './../screens/CameraScreen';
@@ -10,11 +10,12 @@ import SignInScreen from './../screens/SignInScreen';
 import MainScreen from './../screens/MainScreen';
 import SettingsTimePeriod from './../screens/SettingsTimePeriod'
 import ReminderDetail from './../screens/ReminderDetail'
+import AppointmentsScreen from './../screens/AppointmentsScreen'
 
 const RootNavigator = StackNavigator(
   {
     Home: {
-      screen: TabNavigator({
+      screen: DrawerNavigator({
         Home: {
           screen: StackNavigator({
             Home: {
@@ -42,6 +43,9 @@ const RootNavigator = StackNavigator(
         Medications: {
           screen: MedicationsScreen
         },
+        Appointments: {
+          screen: AppointmentsScreen
+        },
         Settings: {
           screen: StackNavigator({
             Settings: {
@@ -54,18 +58,6 @@ const RootNavigator = StackNavigator(
               headerMode: 'none'
             })
         }
-      }, {
-          tabBarPosition: 'bottom',
-          swipeEnabled: false,
-          tabBarOptions: {
-            labelStyle: {
-              color: 'black'
-            },
-            style: {
-              backgroundColor: 'white',
-
-            }
-          }
       })
     },
     SignIn: {

src/screens/AppointmentsScreen.js

+import React from 'react';
+import { DatePickerAndroid, TimePickerAndroid, Alert, Keyboard } from 'react-native';
+import {
+  Container,
+  Content,
+  View,
+  Button,
+  Icon,
+  Form,
+  Item,
+  Label,
+  Input,
+  Text
+} from 'native-base';
+import AppHeader from './../components/Header';
+import MedForm from './../components/MedForm';
+import { Grid, Col } from 'react-native-easy-grid';
+import realm from './../Database';
+import moment from 'moment';
+
+class AppointmentsScreen extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      doctor: "",
+      date: null,
+      time: "",
+      place: "",
+    }
+  }
+
+  render() {
+
+    const { goBack } = this.props.navigation;
+    const { btnAddNoti } = styles
+
+    return (
+      <Container>
+        <AppHeader
+          headerText={"Appointments"}
+          headerLeft={
+            <Button onPress={() => goBack()}>
+              <Icon name='arrow-back' />
+            </Button>
+          }
+        />
+
+        <Content>
+          <MedForm titleText={"Appointments Detail"}>
+            <Form>
+              <Item floatingLabel>
+                <Label>Doctor's name</Label>
+                <Input
+                  onChangeText={(text) => this.setState({ doctor: text })}
+                />
+              </Item>
+              <Item floatingLabel>
+                <Label>Date</Label>
+                <Input
+                  onFocus={() => { this._datePicker(), Keyboard.dismiss() }}
+                  value={this.state.date == null ? "" : this._formatDate(this.state.date)}
+                />
+              </Item>
+              <Item floatingLabel>
+                <Label>Time</Label>
+                <Input
+                  onFocus={() => { this._timePicker(), Keyboard.dismiss() }}
+                  value={this.state.time}
+                />
+              </Item>
+              <Item floatingLabel>
+                <Label>Place</Label>
+                <Input
+                  onChangeText={(text) => this.setState({ place: text })}
+                />
+              </Item>
+            </Form>
+          </MedForm>
+
+          <Grid>
+            <Col>
+              <Button full style={btnAddNoti}>
+                <Text style={{ color: "#1686C4" }}>Reset</Text>
+              </Button>
+            </Col>
+            <Col>
+              <Button full style={btnAddNoti}>
+                <Text style={{ color: "#1686C4" }}>Add</Text>
+              </Button>
+            </Col>
+
+          </Grid>
+        </Content>
+      </Container >
+    )
+  }
+
+  _addAppointment() {
+
+  }
+
+  _datePicker() {
+    try {
+      const { action, year, month, day } = DatePickerAndroid
+        .open({
+          // Use `new Date()` for current date.
+          // May 25 2020. Month 0 is January.
+          date: moment().toDate()
+        })
+        .then(({ action, year, month, day }) => {
+          switch (action) {
+            case "dateSetAction":
+              this.setState({ date: moment().year(year).month(month).date(day).toDate() })
+              break;
+            case "dismissedAction":
+              break;
+          }
+
+        })
+      if (action !== DatePickerAndroid.dismissedAction) {
+        // Selected year, month (0-11), day
+      }
+    } catch ({ code, message }) {
+      console.warn('Cannot open date picker', message);
+    }
+
+  }
+
+  _timePicker() {
+    try {
+      const { action, hour, minute } = TimePickerAndroid
+        .open({
+          is24Hour: true, // Will display '2 PM'
+        })
+        .then(({ action, hour, minute }) => {
+          switch (action) {
+            case "timeSetAction":
+              this.setState({ time: this._formatTime(hour, minute) })
+              break;
+            case "dismissedAction":
+              break;
+          }
+        })
+
+    } catch ({ code, message }) {
+      console.warn('Cannot open time picker', message);
+    }
+  }
+
+  _formatDate(date) {
+    return moment(date).format('DD MMM YYYY')
+  }
+
+  _formatTime(hour, minute) {
+    return moment(hour + ":" + minute, 'HH:mm').format('HH:mm').toString()
+  }
+
+}
+
+
+const styles = {
+  btnAddNoti: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    marginTop: 15,
+    marginBottom: 15,
+    marginLeft: 20,
+    marginRight: 20,
+  }
+}
+
+export default AppointmentsScreen;
\ No newline at end of file

src/screens/MedicationsScreen.js

 import React, { Component } from 'react';
 import { DeviceEventEmitter, ToastAndroid, Alert } from 'react-native';
+import { formatDate, scheduleLocalNotification } from './../Utils';
+import { Grid, Col } from 'react-native-easy-grid';
+import { MaterialDialog } from 'react-native-material-dialog';
 import PushNotification from 'react-native-push-notification';
 import {
   Container,
@@ -21,10 +24,8 @@ import {
 import DatePicker from 'react-native-datepicker';
 import AppHeader from './../components/Header';
 import MedForm from '../components/MedForm';
-import { formatDate, scheduleLocalNotification } from './../Utils';
 import moment from 'moment'
 import realm from './../Database'
-import { Grid, Col } from 'react-native-easy-grid';
 
 PushNotification.configure({
   // (required) Called when a remote or local notification is opened or received
@@ -66,6 +67,7 @@ class MedicationsScreen extends Component {
       nightTime: "",
       beforeMeal: true,
       afterMeal: false,
+      visible: null,
     };
   }
 
@@ -123,7 +125,7 @@ class MedicationsScreen extends Component {
             </Form>
           </MedForm>
 
-          <MedForm titleText={"Reminder Time"}>
+          <MedForm titleText={"Reminder Times"}>
             <Content>
               <ListItem onPress={() => this._onReminderTimePresses(1)}>
                 <Radio selected={this.state.morning} />
@@ -197,6 +199,19 @@ class MedicationsScreen extends Component {
             /> */}
           </MedForm>
 
+          <MedForm titleText={"Dose"}>
+            {/* <MaterialDialog
+              title="Use Google's Location Service?"
+              visible={true}
+              onOk={() => this.setState({ visible: false })}
+              onCancel={() => this.setState({ visible: false })}>
+              <Text style={styles.dialogText}>
+                Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
+              </Text>
+            </MaterialDialog>; */}
+
+          </MedForm>
+
           <Grid>
             <Col>
               <Button full style={btnAddNoti} onPress={() => this._onResetPressed()}>

yarn.lock

@@ -3097,7 +3097,7 @@ minimist@~0.0.1:
   dependencies:
     minimist "0.0.8"
 
-moment@^2.19.0, moment@^2.20.1:
+moment@2.x.x, moment@^2.19.0, moment@^2.20.1:
   version "2.20.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
 
@@ -3698,6 +3698,12 @@ react-native-camera@^0.12.0:
   dependencies:
     prop-types "^15.5.10"
 
+react-native-datepicker@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-datepicker/-/react-native-datepicker-1.6.0.tgz#3a40dc9b112023c49d60ba2a0789d440b7e3d97c"
+  dependencies:
+    moment "2.x.x"
+
 react-native-dismiss-keyboard@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
@@ -3747,6 +3753,14 @@ react-native-google-signin@^0.12.0:
     prop-types "^15.5.10"
     react-timer-mixin "^0.13.3"
 
+react-native-material-dialog@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/react-native-material-dialog/-/react-native-material-dialog-0.7.4.tgz#fa70861b08331a3dc320a1b9dd39f81cc9ca6df2"
+  dependencies:
+    prop-types "^15.5.10"
+    react-native-typography "^1.0.3"
+    react-native-vector-icons "^4.2.0"
+
 react-native-modal-datetime-picker@^4.13.0:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-4.13.0.tgz#bcf9f62c691befb133bf6fd6e5d6189d397608ef"
@@ -3772,6 +3786,18 @@ react-native-tab-view@^0.0.70:
   dependencies:
     prop-types "^15.5.10"
 
+react-native-typography@^1.0.3:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-typography/-/react-native-typography-1.3.0.tgz#ae921c141ab1dfdf4335ebc2b4a146bcf7919b36"
+
+react-native-vector-icons@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.5.0.tgz#6b95619e64f62f05f579f74a01fe5640df95158b"
+  dependencies:
+    lodash "^4.0.0"
+    prop-types "^15.5.10"
+    yargs "^8.0.2"
+
 react-native-vector-icons@^4.4.2, react-native-vector-icons@~4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.4.2.tgz#090f42ee0396c4cc4eae0ddaa518028ba8df40c7"