adding datepicker WIP

carlosjunod · Aug 14, 2017 · ff040f9 · ff040f9
1 parent 3288fea
commit ff040f9
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,10 +22,12 @@
   },
   "dependencies": {
     "expo": "^19.0.0",
+    "moment": "^2.18.1",
     "react": "16.0.0-alpha.12",
     "react-native": "^0.46.1",
     "react-native-linear-gradient": "^2.2.0",
     "react-native-modal": "^2.5.0",
+    "react-native-modal-datetime-picker": "^4.9.0",
     "react-native-svg": "^5.4.1",
     "redux-devtools-extension": "^2.13.2"
   }

diff --git a/src/components/Admin/index.js b/src/components/Admin/index.js
@@ -1,12 +1,28 @@
 import React, { Component } from 'react'
-import { View, Text, StyleSheet, TextInput, TouchableHighlight } from 'react-native'
-
+import { View, Text, StyleSheet, TextInput, TouchableHighlight, TouchableOpacity } from 'react-native'
+import DateTimePicker from 'react-native-modal-datetime-picker'
+import moment from 'moment'
 
 class Admin extends Component {
 
+  state = {
+    isDateTimePickerVisible: false,
+  };
+
+  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true })
+
+  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false })
+
+  _handleDatePicked = (date) => {
+    this.setState({ alarm: new Date(date) })
+    console.log('A date has been picked: ', date)
+    this._hideDateTimePicker()
+  }
 
-  handleName = (name) => {
-    this.setState({ ...this.props.edditing, name })
+  _updateDatePicked = (date) => {
+    this.setState({ ...this.props.edditing, alarm: new Date(date) })
+    console.log('A date has been picked: ', date)
+    this._hideDateTimePicker()
   }
 
   addMedicne() {
@@ -22,13 +38,13 @@ class Admin extends Component {
     this.state.name,
     this.state.brand,
     this.state.mg,
-    this.state.alarm,
+    // this.state.alarm,
     this.props.edditing.i)
     this.props.editMed(
       this.state.name,
       this.state.brand,
       this.state.mg,
-      this.state.alarm,
+      // this.state.alarm,
       this.props.edditing.i
     )
     this.props.closeModal()
@@ -44,43 +60,68 @@ class Admin extends Component {
 
         <View style={styles.formContainer}>
 
-          <Text style={styles.titleForm}>Edditing</Text>
+          <View style={styles.titleForm}>
+            <Text style={styles.title}>Editing {this.props.edditing.name}</Text>
+          </View>
+
 
           <View style={styles.form}>
 
             <Text style={styles.label}>Medicine Name</Text>
             <TextInput
               onChangeText={(name) => this.setState({ ...this.props.edditing, name })}
               defaultValue={this.props.edditing.name}
+              style={styles.input}
               blurOnSubmit={true}
             />
 
             <Text style={styles.label}>Brand</Text>
             <TextInput
               onChangeText={(brand) => this.setState({ ...this.props.edditing, brand })}
               defaultValue={this.props.edditing.brand}
+              style={styles.input}
               blurOnSubmit={true}
             />
 
             <Text style={styles.label}>Mg</Text>
             <TextInput
               onChangeText={(mg) => this.setState({ ...this.props.edditing, mg })}
               defaultValue={this.props.edditing.mg}
+              style={styles.input}
               blurOnSubmit={true}
             />
 
-            <Text style={styles.label}>alarm</Text>
-            <TextInput
+
+            {/* <Text>
+              {moment(this.props.edditing.alarm).format('LT')}
+            </Text> */}
+
+            {/* <TextInput
               onChangeText={(alarm) => this.setState({ ...this.props.edditing, alarm })}
               defaultValue={this.props.edditing.alarm}
+              style={styles.input}
               blurOnSubmit={true}
+            /> */}
+
+            <TouchableOpacity
+              onPress={this._showDateTimePicker}
+              style={[styles.button, styles.setTime]}
+            >
+              <Text style={styles.btnText}>Change {moment(this.props.edditing.alarm).format('LT')}</Text>
+            </TouchableOpacity>
+
+            <DateTimePicker
+              isVisible={this.state.isDateTimePickerVisible}
+              onConfirm={this._updateDatePicked}
+              onCancel={this._hideDateTimePicker}
+              mode='datetime'
             />
 
             <TouchableHighlight
               style={[styles.button, styles.edit]}
               onPress={this.editMedicine.bind(this)}
             >
-              <Text>Save medicine</Text>
+              <Text style={styles.btnText}>save medicine</Text>
             </TouchableHighlight>
 
           </View>
@@ -115,11 +156,20 @@ class Admin extends Component {
             onChangeText={(mg) => this.setState({ mg })}
             blurOnSubmit={true}
           />
-          <Text style={styles.label}>Alarm</Text>
-          <TextInput
-            style={styles.input}
-            onChangeText={(alarm) => this.setState({ alarm })}
-            blurOnSubmit={true}
+          {/* <Text style={styles.label}>Alarm</Text> */}
+
+          <TouchableOpacity
+            onPress={this._showDateTimePicker}
+            style={[styles.button, styles.setTime]}
+          >
+            <Text style={styles.btnText}>Set Alarm</Text>
+          </TouchableOpacity>
+
+          <DateTimePicker
+            isVisible={this.state.isDateTimePickerVisible}
+            onConfirm={this._handleDatePicked}
+            onCancel={this._hideDateTimePicker}
+            mode='datetime'
           />
 
           <TouchableHighlight
@@ -165,8 +215,9 @@ const styles = StyleSheet.create({
   },
 
   title: {
-    fontSize: 26,
+    fontSize: 30,
     fontWeight: 'bold',
+    color: '#4d478e'
   },
 
   label: {
@@ -187,7 +238,7 @@ const styles = StyleSheet.create({
 
   button: {
     // flex: 1,
-    backgroundColor: 'green',
+    backgroundColor: '#4d478e',
     padding: 15,
     // alignSelf: 'center',
     borderRadius: 10
@@ -197,6 +248,10 @@ const styles = StyleSheet.create({
     color: 'white',
     // backgroundColor: 'red',
     textAlign: 'center',
+  },
+  setTime: {
+    backgroundColor: '#53F082',
+    marginBottom: 10,
   }
 })
 

diff --git a/src/components/Item/index.js b/src/components/Item/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { StyleSheet, Text, View, TouchableHighlight } from 'react-native'
+import moment from 'moment'
 
 
 class Item extends Component {
@@ -30,7 +31,7 @@ class Item extends Component {
             {this.props.med.brand}, {this.props.med.mg}mg
           </Text>
           <Text style={styles.textfield}>
-            {this.props.med.alarm}
+            {moment(this.props.med.alarm).format('LT')}
           </Text>
 
         </View>

diff --git a/src/components/MedicineList/index.js b/src/components/MedicineList/index.js
@@ -8,7 +8,7 @@ const MedicneList = ({ meds, delMed, editMed, editModal }) => (
 
     <Text style={styles.h1}>My medicines</Text>
 
-    {/* {console.log('HERE MEDICINES 💊->', meds)} */}
+    {console.log('HERE MEDICINES 💊->', meds)}
 
     <ScrollView style={styles.containerMed}>
       {/* {console.log(meds)} */}

diff --git a/src/core-modules b/src/core-modules