write & query reminder from database

src/screens/HomeScreen.js

@@ -12,20 +12,44 @@ import {
   View,
   Text
 } from 'native-base';
+import {
+  Col,
+  Row,
+  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'
+    }
+  }]
+})
 
 class HomeScreen extends Component {
   constructor() {
     super();
     this.state = {
-      active: false
+      active: false,
+      today: this.formatDate(new Date(Date.now()))
     };
   }
 
+  componentWillMount() {
+    let myReminder = realm.objects('Reminder')
+    ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
+  }
+
   render() {
+
+    var { containerStyle, timePeriodLeftStyle, timePeriodRightStyle, dateTitle } = styles;
+
     return (
-      <Container>
+      <Container style={{ backgroundColor: 'white' }}>
         <AppHeader
           headerText={'Pill Minder'}
           headerLeft={
@@ -39,11 +63,50 @@ class HomeScreen extends Component {
             </Button>
           }
         />
-        <Content>
+        <Content style={{ flex: 1 }}>
+          <Text style={dateTitle}>{this.state.today}</Text>
+          <Grid>
+            <Col>
+              <Row>
+                <View style={timePeriodLeftStyle}>
+                  <Text>Morning</Text>
+                  <View style={containerStyle}>
+
+                  </View>
+                </View>
+              </Row>
+              <Row>
+                <View style={timePeriodLeftStyle}>
+                  <Text>Afternoon</Text>
+                  <View style={containerStyle}>
+
+                  </View>
+                </View>
+              </Row>
+            </Col>
+            <Col>
+              <Row>
+                <View style={timePeriodRightStyle}>
+                  <Text>Evening</Text>
+                  <View style={containerStyle}>
+
+                  </View>
+                </View>
+              </Row>
+              <Row>
+                <View style={timePeriodRightStyle}>
+                  <Text>Night</Text>
+                  <View style={containerStyle}>
 
+                  </View>
+                </View>
+              </Row>
+            </Col>
+          </Grid>
         </Content>
-      </Container>
+      </Container >
     )
+
   }
 
   onHomePressed() {
@@ -61,6 +124,58 @@ class HomeScreen extends Component {
   onMenuPressed() {
     this.props.navigation.navigate('DrawerToggle');
   }
+
+  formatDate(date) {
+    var monthNames = [
+      "January", "February", "March",
+      "April", "May", "June", "July",
+      "August", "September", "October",
+      "November", "December"
+    ];
+
+    var day = date.getDate();
+    var monthIndex = date.getMonth();
+
+    return 'Today, ' + day + ' ' + monthNames[monthIndex];
+  }
+
+}
+
+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,
+    marginBottom: 20
+  },
+  timePeriodRightStyle: {
+    flex: 1,
+    height: 200,
+    marginLeft: 10,
+    marginRight: 20,
+    marginTop: 20,
+    marginBottom: 20
+  },
+  dateTitle: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginTop: 20,
+    marginLeft: 20,
+    marginLeft: 20,
+    marginBottom: 10,
+  }
 }
 
 export default HomeScreen;
\ No newline at end of file

src/screens/MedicationsScreen.js

@@ -16,9 +16,20 @@ import {
   Radio,
   Right
 } from 'native-base';
-import DatePicker from 'react-native-datepicker'
+import DatePicker from 'react-native-datepicker';
 import AppHeader from './../components/Header';
 import MedForm from '../components/MedForm';
+import Realm from 'realm';
+
+let realm = new Realm({
+  schema: [{
+    name: 'Reminder',
+    properties: {
+      medName: 'string',
+      reminderTime: 'date'
+    }
+  }]
+})
 
 class MedicationsScreen extends Component {
 
@@ -27,17 +38,18 @@ class MedicationsScreen extends Component {
     this.state = {
       text: "",
       date: new Date(Date.now()).toISOString().split('T')[0],
+      reminderDate: new Date(Date.now()),
       minDate: new Date(Date.now()).toISOString().split('T')[0],
-      hour: 0,
-      minute: 0,
-      today: Date.now(),
-      morning: false,
+      morning: true,
       lunch: false,
       night: false
     };
   }
 
   componentWillMount() {
+
+    this.init()
+
     PushNotification.registerNotificationActions(['Yes', 'No']);
     DeviceEventEmitter.addListener('notificationActionReceived', function (action) {
       console.log('Notification action received: ' + action);
@@ -79,37 +91,24 @@ class MedicationsScreen extends Component {
             </Form>
           </MedForm>
 
-          {/* <MedForm titleText={"Reminder Time"}>
-            <DatePicker
-              style={timeStyle}
-              date={this.state.time}
-              mode="time"
-              format="HH:mm"
-              confirmBtnText="Confirm"
-              cancelBtnText="Cancel"
-              minuteInterval={10}
-              onDateChange={(time) => { this.setState({ time: time }); }}
-            />
-          </MedForm> */}
-
           <MedForm titleText={"Reminder Time"}>
             <Content>
               <ListItem onPress={() => this._onReminderTimePresses("1")}>
                 <Text>Morning</Text>
                 <Right>
-                  <Radio selected={this.state.morning} />
+                  <Radio selected={this.state.morning} onPress={() => this._onReminderTimePresses("1")} />
                 </Right>
               </ListItem>
               <ListItem onPress={() => this._onReminderTimePresses("2")}>
                 <Text>Lunch</Text>
                 <Right>
-                  <Radio selected={this.state.lunch} />
+                  <Radio selected={this.state.lunch} onPress={() => this._onReminderTimePresses("2")} />
                 </Right>
               </ListItem>
               <ListItem onPress={() => this._onReminderTimePresses("3")}>
                 <Text>Night</Text>
                 <Right>
-                  <Radio selected={this.state.night} />
+                  <Radio selected={this.state.night} onPress={() => this._onReminderTimePresses("3")} />
                 </Right>
               </ListItem>
             </Content>
@@ -130,7 +129,7 @@ class MedicationsScreen extends Component {
           </MedForm>
 
           <View>
-            <Button style={btnAddNoti}>
+            <Button style={btnAddNoti} onPress={() => this._onResetPressed()}>
               <Text style={{ color: "#1686C4" }}>Reset</Text>
             </Button>
 
@@ -145,6 +144,28 @@ class MedicationsScreen extends Component {
     )
   };
 
+  init() {
+
+  }
+
+  setReminderDate() {
+
+    var reminderDate = this.state.reminderDate
+
+    if (this.state.morning) {
+      reminderDate = new Date(this.state.date).setHours(8, 0, 0, 0)
+    } else if (this.state.lunch) {
+      reminderDate = new Date(this.state.date).setHours(12, 0, 0, 0)
+    } else if (this.state.night) {
+      reminderDate = new Date(this.state.date).setHours(21, 0, 0, 0)
+    }
+
+    reminderDate = new Date(reminderDate)
+
+    this.setState({ reminderDate })
+
+  }
+
   _setNotification() {
     // if (this.state.text) {
     //   PushNotification.localNotificationSchedule({
@@ -156,25 +177,33 @@ class MedicationsScreen extends Component {
     //   })
     // }
 
-    var reminderDate = new Date(this.state.date).setHours(0, 0, 0, 0)
-    reminderDate = new Date(reminderDate)
+    if (this.state.text) {
+      realm.write(() => {
+        realm.create('Reminder', {
+          medName: this.state.text,
+          reminderTime: this.state.reminderDate
+        })
+      })
+    }
+    ToastAndroid.show(this.state.reminderDate.toString(), ToastAndroid.SHORT)
 
-    this.setState({ date: reminderDate })
 
 
-    ToastAndroid.show(this.state.date.toString(), ToastAndroid.SHORT)
   }
 
   _onReminderTimePresses(id) {
     switch (id) {
       case '1':
         this.setState({ morning: !this.state.morning, lunch: false, night: false })
+        this.setReminderDate()
         break
       case '2':
         this.setState({ lunch: !this.state.lunch, morning: false, night: false })
+        this.setReminderDate()
         break
       case '3':
         this.setState({ night: !this.state.night, morning: false, lunch: false })
+        this.setReminderDate()
         break
     }
   }
@@ -182,6 +211,12 @@ class MedicationsScreen extends Component {
   _onMenuPressed() {
     this.props.navigation.navigate("DrawerToggle");
   }
+
+  _onResetPressed() {
+
+    let myReminder = realm.objects('Reminder')
+    ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
+  }
 };
 
 const styles = {