refactor code a little

src/Utils.js

@@ -53,4 +53,8 @@ export function appointmentNotification(message, date, id, payload) {
 
   //schedule the notification
   PushNotification.localNotificationSchedule(notification);
+}
+
+export function cancleNotification(id) {
+  PushNotification.cancelLocalNotifications({ id: id });
 }
\ No newline at end of file

src/components/MedicineDetailCard.js

@@ -10,6 +10,7 @@ import moment from 'moment'
 import { Grid, Col } from 'react-native-easy-grid';
 import { ToastAndroid } from 'react-native';
 import PushNotification from 'react-native-push-notification';
+import cancleNotification from './../Utils';
 import realm from './../Database';
 
 class MedicineDetailCard extends React.Component {
@@ -21,7 +22,7 @@ class MedicineDetailCard extends React.Component {
   render() {
     const { headerStyle, timeTitleStyle, detailStyle, btnStyle } = styles;
 
-    const { id, medName, reminderTime, meal } = this.props.item
+    const { id, medName, reminderTime, meal, dose } = this.props.item
 
     return (
       <View style={{ flex: 1, marginTop: 10 }}>
@@ -30,7 +31,8 @@ class MedicineDetailCard extends React.Component {
         </View>
         <View style={detailStyle}>
           <Text>{medName}</Text>
-          <Text>Take 2</Text>
+          <Text>{meal}</Text>
+          <Text>{"จำนวน " + dose}</Text>
         </View>
         <View>
           <Grid>
@@ -63,7 +65,7 @@ class MedicineDetailCard extends React.Component {
             realm.write(() => {
               let myReminder = realm.objects('Reminder').filtered('id == ' + id)
               realm.delete(myReminder)
-              ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
+              // ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
             })
           }
         },

src/screens/AppointmentListScreen.js

 import React, { Component } from 'react';
+import { Alert, ToastAndroid, TouchableOpacity } from 'react-native';
 import {
   Container,
   Content,
@@ -14,6 +15,7 @@ import {
 import AppHeader from './../components/Header';
 import realm from './../Database/';
 import moment from 'moment';
+import { cancleNotification } from './../Utils';
 
 class AppointmentListScreen extends Component {
 
@@ -30,7 +32,7 @@ class AppointmentListScreen extends Component {
 
   render() {
 
-    const { appointmentListStyle } = styles
+    const { appointmentListStyle, headerStyle } = styles
     const { goBack } = this.props.navigation
 
     return (
@@ -49,22 +51,27 @@ class AppointmentListScreen extends Component {
           }
         />
         <Content>
-          <Text>Appointment List</Text>
-          <List dataArray={this.state.appointmentList}
-            renderRow={(item) =>
-              <ListItem style={appointmentListStyle}>
-                <View style={{ flex: 1 }}>
-                  <Text>{"Doctor: " + item.doctorName}</Text>
-                  <Text>{"Date: " + moment(item.date).format("DD MM YYYY")}</Text>
-                  <Text>{"Time: " + moment(item.date).format("HH:mm")}</Text>
-                  <Text>{"Place: " + item.place}</Text>
-                </View>
-                <View>
-                  <Icon name='more' />
-                </View>
-              </ListItem>
-            }>
-          </List>
+          <View style={{ flex: 1, backgroundColor: 'white', height: 60 }}>
+            <Text style={headerStyle}>Appointment List</Text>
+          </View>
+          <View>
+            <List dataArray={this.state.appointmentList}
+              renderRow={(item) =>
+                <ListItem style={appointmentListStyle}>
+                  <View style={{ flex: 1 }}>
+                    <Text>{"Doctor: " + item.doctorName}</Text>
+                    <Text>{"Date: " + moment(item.date).format("DD MMM YYYY")}</Text>
+                    <Text>{"Time: " + moment(item.date).format("HH:mm")}</Text>
+                    <Text>{"Place: " + item.place}</Text>
+                  </View>
+
+                  <TouchableOpacity onPress={() => this._deleteAppointment(item)}>
+                    <Icon name='more' />
+                  </TouchableOpacity>
+                </ListItem>
+              }>
+            </List>
+          </View>
         </Content>
       </Container>
     )
@@ -79,6 +86,28 @@ class AppointmentListScreen extends Component {
     this.setState({ appointmentList: tmpAppointment })
   }
 
+  _deleteAppointment(data) {
+    // ToastAndroid.show("Clicked", ToastAndroid.SHORT)
+
+    Alert.alert(
+      'Confirm',
+      'Want to delete this appointment?',
+      [
+        { text: 'CANCLE', onPress: () => this.setState({ addItemVisible: true }) },
+        {
+          text: 'OK', onPress: () => {
+            const tmpAppointment = realm.objects("Appointments").filtered('id == ' + data.id)
+            cancleNotification(data.id)
+            realm.write(() => {
+              realm.delete(tmpAppointment)
+            })
+          }
+        },
+      ],
+      { cancelable: false }
+    )
+  }
+
 }
 
 const styles = {
@@ -88,8 +117,13 @@ const styles = {
     marginTop: 0,
     marginBottom: 0,
     padding: 15,
+  },
+  headerStyle: {
+    color: "#1686C4",
+    fontSize: 20,
+    paddingTop: 15,
+    paddingLeft: 15
   }
-
 }
 
 export default AppointmentListScreen;
\ No newline at end of file

src/screens/AppointmentsScreen.js

@@ -102,7 +102,7 @@ class AppointmentsScreen extends React.Component {
       let allReminder = realm.objects('Appointments')
       realm.delete(allReminder)
     })
-    ToastAndroid.show("reset", ToastAndroid.SHORT)
+    // ToastAndroid.show("reset", ToastAndroid.SHORT)
   }
 
   _addAppointment() {
@@ -112,7 +112,8 @@ class AppointmentsScreen extends React.Component {
         'Confrim?',
         'Are you sure to add this appointment?',
         [
-          { text: 'CANCLE', onPress: () => ToastAndroid.show("Cancled", ToastAndroid.SHORT) },
+          // { text: 'CANCLE', onPress: () => ToastAndroid.show("Cancled", ToastAndroid.SHORT) },
+          { text: 'CANCLE', onPress: () => { } },
           {
             text: 'OK', onPress: () => {
               var id = Math.random() * 10000
@@ -143,7 +144,8 @@ class AppointmentsScreen extends React.Component {
         'Please enter Doctor name / Select appointment date and time',
         '',
         [
-          { text: 'OK', onPress: () => ToastAndroid.show("Please enter medine name / Select reminder time", ToastAndroid.SHORT) },
+          // { text: 'OK', onPress: () => ToastAndroid.show("Please enter medine name / Select reminder time", ToastAndroid.SHORT) },
+          { text: 'OK', onPress: () => { } },
         ],
         { cancelable: false }
       )

src/screens/CameraScreen.js

@@ -110,10 +110,13 @@ class AppCamera extends Component {
         break;
     }
 
+    var timePeriod = data.period == 1 ? 'เช้า' : data.period == 2 ? 'กลางวัน' : data.period == 3 ? 'เย็น' : 'ค่ำ';
+    var beforeMeal = data.beforeMeal ? "\tก่อนอาหาร" : "\tหลังอาหาร";
+
 
     Alert.alert(
       'Confrim?',
-      JSON.stringify(data),
+      'ชื่อยา: ' + data.medName + '\nก่อน/หลัง อาหาร: ' + beforeMeal + '\nช่วงเวลา: ' + timePeriod + '\nจำนวน: ' + data.dose,
       [
         { text: 'CANCLE', onPress: () => this.setState({ addItemVisible: true }) },
         {
@@ -122,7 +125,7 @@ class AppCamera extends Component {
             var id = Math.random() * 10000
             var reminderDate = moment().hour(time[0]).minute(time[1]).second(0).toDate()
 
-            var beforeMeal = data.beforeMeal ? "\tก่อนอาหาร" : "\tหลังอาหาร";
+
             var msg = "แจ้งเตือนกินยา\n" + "เวลา: " + time[0] + ":" + time[1] + "\nยา: " + data.medName + beforeMeal;
             scheduleLocalNotification(msg, reminderDate, id)
 

src/screens/HomeScreen.js

@@ -125,7 +125,7 @@ class HomeScreen extends Component {
   }
 
   _timePeriodPress(data, period) {
-    ToastAndroid.show(JSON.stringify(data), ToastAndroid.SHORT)
+    // ToastAndroid.show(JSON.stringify(data), ToastAndroid.SHORT)
     this.props.navigation.navigate('Detail', { items: data, period: period })
   }
 
@@ -160,7 +160,7 @@ class HomeScreen extends Component {
     this.setState({ morningReminder: tmpMorning, afternoonReminder: tmpAfternoon, eveningReminder: tmpEvening, nightReminder: tmpNight })
 
     // ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.LONG)
-    ToastAndroid.show(JSON.stringify(this.state.morningReminder), ToastAndroid.LONG)
+    // ToastAndroid.show(JSON.stringify(this.state.morningReminder), ToastAndroid.LONG)
   }
 
   _isFirstLaunched() {
@@ -171,10 +171,10 @@ class HomeScreen extends Component {
             ToastAndroid.show(error.toString(), ToastAndroid.SHORT)
           }) // No need to wait for `setItem` to finish, although you might want to handle errors
         this.setState({ firstLaunch: true });
-        ToastAndroid.show("Frist Launch:" + this.state.firstLaunch, ToastAndroid.LONG)
+        // ToastAndroid.show("Frist Launch:" + this.state.firstLaunch, ToastAndroid.LONG)
       } else {
         this.setState({ firstLaunch: false });
-        ToastAndroid.show("Frist Launch:" + this.state.firstLaunch, ToastAndroid.LONG)
+        // ToastAndroid.show("Frist Launch:" + this.state.firstLaunch, ToastAndroid.LONG)
       }
     }) // Add some error handling, also you can simply do this.setState({fistLaunch: value == null})
   }

src/screens/MedicationListScreen.js

 import React, { Component } from 'react';
+import { TouchableOpacity, Alert } from 'react-native';
 import {
   Container,
   Content,
@@ -9,8 +10,10 @@ import {
   List,
   ListItem
 } from 'native-base';
+import { cancleNotification } from './../Utils';
 import AppHeader from './../components/Header';
-import realm from './../Database/'
+import realm from './../Database/';
+import moment from 'moment';
 
 class MedicationListScreen extends Component {
 
@@ -27,7 +30,7 @@ class MedicationListScreen extends Component {
 
   render() {
 
-    const { reminderListStyle } = styles
+    const { reminderListStyle, headerStyle } = styles
 
     const { goBack } = this.props.navigation
 
@@ -47,14 +50,26 @@ class MedicationListScreen extends Component {
           }
         />
         <Content>
-          <Text>Reminder List</Text>
-          <List dataArray={this.state.reminderList}
-            renderRow={(item) =>
-              <ListItem style={reminderListStyle}>
-                <Text>{item.medName}</Text>
-              </ListItem>
-            }>
-          </List>
+          <View style={{ flex: 1, backgroundColor: 'white', height: 60 }}>
+            <Text style={headerStyle}>Medication List</Text>
+          </View>
+          <View>
+            <List dataArray={this.state.reminderList}
+              renderRow={(item) =>
+                <ListItem style={reminderListStyle}>
+                  <View style={{ flex: 1 }}>
+                    <Text>{item.medName}</Text>
+                    <Text>{"Take: " + item.dose}</Text>
+                    <Text>{'Time: ' + moment(item.reminderTime).format('HH:mm')}</Text>
+                  </View>
+                  <TouchableOpacity onPress={() => this._deleteMedicine(item)}>
+                    <Icon name='more' />
+                  </TouchableOpacity>
+                </ListItem>
+              }>
+            </List>
+          </View>
+
         </Content>
       </Container>
     )
@@ -71,8 +86,29 @@ class MedicationListScreen extends Component {
     this.props.navigation.navigate("AddMedication")
   }
 
+  _deleteMedicine(data) {
+    Alert.alert(
+      'Confirm',
+      'Want to delete this medicine?',
+      [
+        { text: 'CANCLE', onPress: () => this.setState({ addItemVisible: true }) },
+        {
+          text: 'OK', onPress: () => {
+            const tmpMedicine = realm.objects("Reminder").filtered('id == ' + data.id)
+            cancleNotification(data.id)
+            realm.write(() => {
+              realm.delete(tmpMedicine)
+            })
+          }
+        },
+      ],
+      { cancelable: false }
+    )
+  }
+
 }
 
+
 const styles = {
   reminderListStyle: {
     marginLeft: 0,
@@ -80,6 +116,11 @@ const styles = {
     marginTop: 0,
     marginBottom: 0,
     padding: 15
+  }, headerStyle: {
+    color: "#1686C4",
+    fontSize: 20,
+    paddingTop: 15,
+    paddingLeft: 15
   }
 }
 

src/screens/MedicationsScreen.js

@@ -50,8 +50,8 @@ PushNotification.configure({
 
 class MedicationsScreen extends Component {
 
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
       text: "",
       date: new Date(Date.now()).toISOString().split('T')[0],
@@ -285,7 +285,8 @@ class MedicationsScreen extends Component {
         'Successful',
         '',
         [
-          { text: 'OK', onPress: () => ToastAndroid.show("Successful", ToastAndroid.SHORT) },
+          // { text: 'OK', onPress: () => ToastAndroid.show("Successful", ToastAndroid.SHORT) },
+          { text: 'OK', onPress: () => { } },
         ],
         { cancelable: false }
       )
@@ -295,7 +296,8 @@ class MedicationsScreen extends Component {
         'Please enter medine name / Select reminder time',
         '',
         [
-          { text: 'OK', onPress: () => ToastAndroid.show("Please enter medine name / Select reminder time", ToastAndroid.SHORT) },
+          // { text: 'OK', onPress: () => ToastAndroid.show("Please enter medine name / Select reminder time", ToastAndroid.SHORT) },
+          { text: 'OK', onPress: () => { } },
         ],
         { cancelable: false }
       )

src/screens/ReminderDetail.js

@@ -19,7 +19,7 @@ class ReminderDetail extends React.Component {
     const { params } = this.props.navigation.state;
     const { goBack } = this.props.navigation;
     const items = params ? params.items : null
-    const period = params.period == 1 ? "Mornign" : params.period == 2 ? "Afternoon" : params.period == 3 ? "Evening" : "Night"
+    const period = params.period == 1 ? "Morning" : params.period == 2 ? "Afternoon" : params.period == 3 ? "Evening" : "Night"
 
     const { headerStyle, headerFontStyle } = styles