add/delete reminder almost finish

src/components/MedForm.js

-import React, { Component } from 'react';
+import React from 'react';
 import {
   View,
   Text,

src/components/MedicineDetailCard.js

+import React from 'react'
+import { Alert } from 'react-native'
+import {
+  Container,
+  View,
+  Text,
+  Button,
+} from 'native-base'
+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 realm from './../Database';
+
+class MedicineDetailCard extends React.Component {
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const { headerStyle, timeTitleStyle, detailStyle, btnStyle } = styles;
+
+    const { id, medName, reminderTime, meal } = this.props.item
+
+    return (
+      <View style={{ flex: 1, marginTop: 10 }}>
+        <View style={timeTitleStyle}>
+          <Text style={{ color: 'white', fontSize: 20 }}>{moment(reminderTime).format('HH:mm')}</Text>
+        </View>
+        <View style={detailStyle}>
+          <Text>{medName}</Text>
+          <Text>Take 2</Text>
+        </View>
+        <View>
+          <Grid>
+            <Col>
+              <Button full style={btnStyle} >
+                <Text style={{ color: "#1686C4" }}>Delete</Text>
+              </Button>
+            </Col>
+            <Col>
+              <Button full style={btnStyle} onPress={() => this._cancleNotification(id)}>
+                <Text style={{ color: "#1686C4" }}>Delete</Text>
+              </Button>
+            </Col>
+          </Grid>
+
+
+        </View>
+      </View>
+    )
+  }
+
+  _cancleNotification(id) {
+    Alert.alert(
+      'Alert',
+      'Are you sure to delete this reminder ?',
+      [
+        {
+          text: 'OK', onPress: () => {
+            PushNotification.cancelLocalNotifications({ id })
+            realm.write(() => {
+              let myReminder = realm.objects('Reminder').filtered('id == ' + id)
+              realm.delete(myReminder)
+              ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
+            })
+          }
+        },
+      ],
+      { cancelable: false }
+    )
+
+
+  }
+}
+
+const styles = {
+  timeTitleStyle: {
+    height: 60,
+    justifyContent: 'center',
+    backgroundColor: "#1686c4",
+    padding: 10,
+  },
+  detailStyle: {
+    padding: 10,
+  },
+  btnStyle: {
+    backgroundColor: 'white',
+
+  }
+}
+
+export default MedicineDetailCard;
\ No newline at end of file

src/components/ReminderList.js

+import React from 'react';
+import { ToastAndroid } from 'react-native';
+import {
+  View,
+  Text,
+  List,
+  ListItem,
+} from 'native-base';
+
+
+class ReminderList extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const { containerStyle } = styles
+    return (
+      <View>
+        <Text>{this.props.periodText}</Text>
+        <View style={containerStyle}>
+          <List dataArray={this.props.items}
+            renderRow={(item) =>
+              <ListItem>
+                <Text>{item.medName}</Text>
+              </ListItem>
+            }>
+          </List>
+        </View>
+      </View>
+    )
+  }
+
+}
+
+const styles = {
+  containerStyle: {
+    flex: 1,
+    height: 200,
+    backgroundColor: 'white',
+    borderWidth: 5,
+    borderRadius: 2,
+    borderColor: '#1686C4',
+    borderBottomWidth: 0,
+    elevation: 1,
+  }
+}
+
+export default ReminderList
\ No newline at end of file

src/navigators/RootNavigator.js

@@ -8,16 +8,24 @@ import SettingsScreen from './../screens/SettingsScreen';
 import MedicationsScreen from './../screens/MedicationsScreen';
 import SignInScreen from './../screens/SignInScreen';
 import MainScreen from './../screens/MainScreen';
+import SettingsTimePeriod from './../screens/SettingsTimePeriod'
+import ReminderDetail from './../screens/ReminderDetail'
 
 const RootNavigator = StackNavigator(
   {
-    SignIn: {
-      screen: SignInScreen,
-    },
     Home: {
       screen: DrawerNavigator({
         Home: {
-          screen: HomeScreen,
+          screen: StackNavigator({
+            Home: {
+              screen: HomeScreen
+            },
+            Detail: {
+              screen: ReminderDetail
+            }
+          }, {
+              headerMode: 'none'
+            })
         },
         Camera: {
           screen: StackNavigator({
@@ -35,10 +43,22 @@ const RootNavigator = StackNavigator(
           screen: MedicationsScreen
         },
         Settings: {
-          screen: SettingsScreen,
+          screen: StackNavigator({
+            Settings: {
+              screen: SettingsScreen
+            },
+            SettingsTime: {
+              screen: SettingsTimePeriod
             }
+          }, {
+              headerMode: 'none'
             })
         }
+      })
+    },
+    SignIn: {
+      screen: SignInScreen,
+    },
   }, {
     headerMode: 'none'
   }

src/screens/HomeScreen.js

 import React, { Component } from 'react';
-import { ToastAndroid } from 'react-native';
+import { ToastAndroid, AsyncStorage, TouchableOpacity } from 'react-native';
 import {
   Container,
   Content,
@@ -18,30 +18,29 @@ import {
   Grid
 } from 'react-native-easy-grid'
 import AppHeader from './../components/Header';
-import Realm from 'realm';
-
-let realm = new Realm({
-  schema: [{
-    name: 'Reminder',
-    properties: {
-      medName: 'string',
-      reminderTime: 'date'
-    }
-  }]
-})
+import ReminderList from './../components/ReminderList';
+import { formatDate } from './../Utils';
+import realm from './../Database';
 
 class HomeScreen extends Component {
   constructor() {
     super();
     this.state = {
+      firstLaunch: null,
       active: false,
-      today: this.formatDate(new Date(Date.now()))
+      today: formatDate(new Date(Date.now())),
+      initDB: false,
+      morningReminder: [],
+      afternoonReminder: [],
+      eveningReminder: [],
+      nightReminder: [],
     };
   }
 
   componentWillMount() {
-    let myReminder = realm.objects('Reminder')
-    ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
+    this._isFirstLaunched()
+    this._initDB()
+    this._queryReminder()
   }
 
   render() {
@@ -68,38 +67,38 @@ class HomeScreen extends Component {
           <Grid>
             <Col>
               <Row>
-                <View style={timePeriodLeftStyle}>
-                  <Text>Morning</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.morningReminder)}>
+                  <ReminderList
+                    periodText={"Morning"}
+                    items={this.state.morningReminder}
+                  />
+                </TouchableOpacity>
               </Row>
               <Row>
-                <View style={timePeriodLeftStyle}>
-                  <Text>Afternoon</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.afternoonReminder)}>
+                  <ReminderList
+                    periodText={"Afternoon"}
+                    items={this.state.afternoonReminder}
+                  />
+                </TouchableOpacity>
               </Row>
             </Col>
             <Col>
               <Row>
-                <View style={timePeriodRightStyle}>
-                  <Text>Evening</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.eveningReminder)}>
+                  <ReminderList
+                    periodText={"Evening"}
+                    items={this.state.eveningReminder}
+                  />
+                </TouchableOpacity>
               </Row>
               <Row>
-                <View style={timePeriodRightStyle}>
-                  <Text>Night</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.nightReminder)}>
+                  <ReminderList
+                    periodText={"Night"}
+                    items={this.state.nightReminder}
+                  />
+                </TouchableOpacity>
               </Row>
             </Col>
           </Grid>
@@ -125,36 +124,84 @@ class HomeScreen extends Component {
     this.props.navigation.navigate('DrawerToggle');
   }
 
-  formatDate(date) {
-    var monthNames = [
-      "January", "February", "March",
-      "April", "May", "June", "July",
-      "August", "September", "October",
-      "November", "December"
-    ];
+  _timePeriodPress(data) {
+    ToastAndroid.show(JSON.stringify(data), ToastAndroid.SHORT)
+    this.props.navigation.navigate('Detail', { items: data })
+  }
+
+  _queryReminder() {
+    let myReminder = realm.objects('Reminder')
+    let morningReminder = myReminder.filtered('period == 1')
+    let afternoonReminder = myReminder.filtered('period == 2')
+    let eveningReminder = myReminder.filtered('period == 3')
+    let nightReminder = myReminder.filtered('period == 4')
 
-    var day = date.getDate();
-    var monthIndex = date.getMonth();
+    var tmpMorning = []
+    morningReminder.forEach(i => {
+      tmpMorning.push(i)
+    });
 
-    return 'Today, ' + day + ' ' + monthNames[monthIndex];
+    var tmpAfternoon = []
+    afternoonReminder.forEach(i => {
+      tmpAfternoon.push(i)
+    })
+
+    var tmpEvening = []
+    eveningReminder.forEach(i => {
+      tmpEvening.push(i)
+    })
+
+    var tmpNight = []
+    nightReminder.forEach(i => {
+      tmpNight.push(i)
+    })
+
+
+    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)
+  }
+
+  _isFirstLaunched() {
+    AsyncStorage.getItem("alreadyLaunched").then(value => {
+      if (value == null) {
+        AsyncStorage.setItem('alreadyLaunched', 'true')
+          .catch(error => {
+            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)
+      } else {
+        this.setState({ firstLaunch: false });
+        ToastAndroid.show("Frist Launch:" + this.state.firstLaunch, ToastAndroid.LONG)
+      }
+    }) // Add some error handling, also you can simply do this.setState({fistLaunch: value == null})
+  }
+
+  _initDB() {
+
+    AsyncStorage.getItem("alreadyInitDB").then(value => {
+      if (value == null) {
+        ToastAndroid.show("Init DB", ToastAndroid.LONG)
+        AsyncStorage.setItem('alreadyInitDB', 'true')
+        realm.write(() => {
+          realm.create('TimePeriod', {
+            morning: '08:00',
+            afternoon: '12:00',
+            evening: '16:00',
+            night: '20:00'
+          })
+        })
+      }
+    })
   }
 
 }
 
 const styles = {
-  containerStyle: {
-    flex: 1,
-    backgroundColor: 'white',
-    borderWidth: 5,
-    borderRadius: 2,
-    borderColor: '#1686C4',
-    borderBottomWidth: 0,
-    elevation: 1,
-    padding: 10
-  },
   timePeriodLeftStyle: {
     flex: 1,
-    height: 200,
     marginLeft: 20,
     marginRight: 10,
     marginTop: 20,
@@ -162,7 +209,6 @@ const styles = {
   },
   timePeriodRightStyle: {
     flex: 1,
-    height: 200,
     marginLeft: 10,
     marginRight: 20,
     marginTop: 20,

src/screens/MainScreen.js

@@ -23,7 +23,8 @@ class MainScreen extends Component {
 
 
   render() {
-    return this.state.user != null ? <HomeScreen /> : <SignInScreen />;
+    // return this.state.user != null ? <HomeScreen /> : <SignInScreen />;
+    return <HomeScreen />
   }
 }
 

src/screens/ReminderDetail.js

+import React from 'react';
+import {
+  Container,
+  Content,
+  View,
+  Text,
+  Button,
+  Icon,
+  List,
+  ListItem
+} from 'native-base';
+import AppHeader from './../components/Header';
+import MedicineDetailCard from './../components/MedicineDetailCard';
+import { formatDate } from './../Utils';
+import moment from 'moment';
+
+class ReminderDetail extends React.Component {
+  render() {
+    const { params } = this.props.navigation.state;
+    const { goBack } = this.props.navigation;
+    const items = params ? params.items : null
+
+    const { headerStyle, headerFontStyle } = styles
+
+    return (
+      <Container style={{ backgroundColor: 'white' }}>
+        <AppHeader
+          headerText={"Morning"}
+          headerLeft={
+            <Button onPress={() => goBack()}>
+              <Icon name='arrow-back' />
+            </Button>
+          }
+        />
+
+        <Content>
+          <View style={headerStyle}>
+            <Text style={headerFontStyle}>{formatDate(new Date(Date.now()))}</Text>
+          </View>
+          <List dataArray={items}
+            renderRow={(item) =>
+              <ListItem style={{ marginLeft: 10, paddingLeft: 0, paddingRight: 0, marginRight: 10 }}>
+                <MedicineDetailCard
+                  item={item}
+                />
+              </ListItem>
+            }>
+          </List>
+
+
+        </Content>
+
+      </Container>
+    )
+  }
+}
+
+const styles = {
+  headerStyle: {
+    height: 50,
+    marginTop: 20,
+    marginBottom: 10,
+    justifyContent: 'center'
+  },
+  headerFontStyle: {
+    fontSize: 20,
+    textAlign: 'center',
+  }
+}
+
+export default ReminderDetail;
\ No newline at end of file

src/screens/SettingsScreen.js

@@ -12,6 +12,12 @@ import AppHeader from '../components/Header';
 import BtnSettings from '../components/BtnSettings';
 
 class Menu extends Component {
+
+  constructor(props) {
+    super(props);
+    this.props.navigation.state.key = 'SettingsScreen'
+  }
+
   render() {
     return (
       <Container>
@@ -32,6 +38,12 @@ class Menu extends Component {
                 ToastAndroid.show("Language", ToastAndroid.SHORT)
               }}
             />
+            <BtnSettings
+              text={"Time Period"}
+              onPress={() => {
+                this.props.navigation.navigate('SettingsTime', { keyBScreen: this.props.navigation.state.key });
+              }}
+            />
             <BtnSettings
               text={"Log Out"}
               onPress={() => {

src/screens/SettingsTimePeriod.js

+import React from 'react';
+import { ToastAndroid, View, TimePickerAndroid, Alert } from 'react-native';
+import {
+  Container,
+  Content,
+  Button,
+  Icon,
+  Text,
+  Left,
+  Right
+} from 'native-base'
+import AppHeader from './../components/Header';
+import BtnSettings from './../components/BtnSettings';
+import moment from 'moment';
+import realm from './../Database';
+
+
+
+class SettingTimePeriod extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      morningTime: "",
+      afternoonTime: "",
+      eveningTime: "",
+      nightTime: ""
+    }
+  }
+
+  componentDidMount() {
+    this._queryTimePeriod()
+  }
+
+  render() {
+    const { key } = this.props.navigation.state;
+    const { goBack } = this.props.navigation;
+    const { btnTimeStyle, fontStyle } = styles
+
+    return (
+      <Container>
+        <AppHeader
+          headerText={"Time Period"}
+          headerLeft={
+            <Button onPress={() => goBack(key.keyBScreen)}>
+              <Icon name='arrow-back' />
+            </Button>
+          }
+        />
+
+        <Content style={{ marginTop: 50 }}>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(1)}>
+              <Left>
+                <Text style={fontStyle}>Morning</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.morningTime}</Text>
+              </Right>
+            </Button>
+          </View>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(2)}>
+              <Left>
+                <Text style={fontStyle}>Afternoon</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.afternoonTime}</Text>
+              </Right>
+            </Button>
+          </View>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(3)}>
+              <Left>
+                <Text style={fontStyle}>Evening</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.eveningTime}</Text>
+              </Right>
+            </Button>
+          </View>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(4)}>
+              <Left>
+                <Text style={fontStyle}>Night</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.nightTime}</Text>
+              </Right>
+            </Button>
+          </View>
+
+        </Content>
+
+      </Container>
+    )
+  }
+
+  _timePicker(period) {
+    try {
+      const { action, hour, minute } = TimePickerAndroid
+        .open({
+          is24Hour: true, // Will display '2 PM'
+        })
+        .then(({ action, hour, minute }) => {
+          switch (action) {
+            case "timeSetAction":
+              Alert.alert(
+                'Confirm',
+                '',
+                [
+                  { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
+                  { text: 'OK', onPress: () => this._setTime(hour, minute, period) },
+                ],
+                { cancelable: false }
+              )
+              break;
+            case "dismissedAction":
+              break;
+          }
+        })
+
+    } catch ({ code, message }) {
+      console.warn('Cannot open time picker', message);
+    }
+  }
+
+  _setTime(hour, minute, period) {
+    let timePeriod = realm.objects("TimePeriod")
+    switch (period) {
+      case 1:
+        realm.write(() => {
+          timePeriod[0].morning = this._formatDate(hour, minute)
+        })
+        this.setState({ morningTime: this._formatDate(hour, minute) })
+        break;
+      case 2:
+        realm.write(() => {
+          timePeriod[0].afternoon = this._formatDate(hour, minute)
+        })
+        this.setState({ afternoonTime: this._formatDate(hour, minute) })
+        break;
+      case 3:
+        realm.write(() => {
+          timePeriod[0].evening = this._formatDate(hour, minute)
+        })
+        this.setState({ eveningTime: this._formatDate(hour, minute) })
+        break;
+      case 4:
+        realm.write(() => {
+          timePeriod[0].night = this._formatDate(hour, minute)
+        })
+        this.setState({ nightTime: this._formatDate(hour, minute) })
+        break;
+    }
+  }
+
+  _formatDate(hour, minute) {
+    return moment(hour + ":" + minute, 'HH:mm').format('HH:mm').toString()
+  }
+
+
+  _queryTimePeriod() {
+    let timePeriod = realm.objects('TimePeriod')
+    var morningTime = timePeriod[0].morning
+    var afternoonTime = timePeriod[0].afternoon
+    var eveningTime = timePeriod[0].evening
+    var nightTime = timePeriod[0].night
+
+    this.setState({ morningTime, afternoonTime, eveningTime, nightTime })
+  }
+}
+
+const styles = {
+  btnTimeStyle: {
+    height: 60,
+    backgroundColor: 'white',
+    padding: 20,
+  },
+  fontStyle: {
+    fontFamily: 'sans-serif-light',
+    fontSize: 18
+  }
+}
+
+export default SettingTimePeriod;
\ No newline at end of file