update detail screen

App.js

@@ -25,6 +25,7 @@ import AddDevice from './src/screens/AddDevice';
 import ScanDevice from './src/screens/ScanDevice';
 import UserDevices from './src/screens/UserDevices';
 import UserDetailDevice from './src/screens/UserDetailDevice';
+import Measurement from './src/screens/Measurement';
 import Logout from './src/screens/Logout';
 import { Provider } from 'react-redux';
 import store from './src/store';
@@ -154,6 +155,7 @@ const RootStack = SwitchNavigator(
       screen: UserAccess
     },
     Home: {
+      // screen: Drawer
       screen: Drawer
     }
   },

src/components/ListUserDeviceHome.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View,
+  Button,
+  ToastAndroid,
+  Text,
+  TouchableHighlight,
+  Image
+} from 'react-native'
+import { DrawerNavigator, StackNavigator } from 'react-navigation';
+import moment from 'moment'
+
+class ListUserDeviceHome extends Component {
+
+  viewDetailDevices = (deviceId) => {
+    const { navigation } = this.props
+    navigation.navigate('detailDevice', {deviceId: deviceId})
+  }
+
+  render() {
+    const { item } = this.props
+    return (
+      <View>
+        <TouchableHighlight
+         style={styles.button}
+         onPress={() => { this.viewDetailDevices(item.id) }}
+         underlayColor="rgba(255,255,255,0.2)">
+        <View style={styles.wrapper}>
+          <View>
+            <Image source={require('../treki_logo_circle.png')} style={styles.image}/>
+          </View>
+          <View>
+            <Text style={styles.innerTextSmall}>
+              Device Name:
+            </Text>
+            <Text style={styles.innerText}>
+              {item.name}
+            </Text>
+            <View style={{flexDirection: 'row'}}>
+            <Text style={styles.innerTextSmallBold}>
+              Active: 
+            </Text>
+            <Text style={styles.innerTextSmall}>
+              {" "+moment(item.updatedAt).fromNow()}
+            </Text>
+            </View>
+          </View>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    // alignItems: 'center',
+    backgroundColor: '#0098a7',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    margin: 10,
+    width: 300,
+    color: 'white',
+    borderRadius: 50,
+  },
+  innerText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: '500'
+  },
+  innerTextSmall: {
+    color: 'white',
+    fontSize: 15,
+    fontWeight: '200'
+  },
+  innerTextSmallBold: {
+    color: 'white',
+    fontSize: 15,
+    fontWeight: '600'
+  },
+  image: {
+    height: 70,
+    // borderRadius: 50,
+    width: 70,
+    marginRight: 20
+  },
+  wrapper: {
+    flexDirection: 'row'
+  }
+
+})
+
+export default ListUserDeviceHome;

src/screens/Home.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Text, StyleSheet, Button, ToastAndroid, PermissionsAndroid, TouchableHighlight, Image} from 'react-native';
+import { View, Text, StyleSheet, Button, ToastAndroid, PermissionsAndroid, TouchableHighlight, Image, FlatList} from 'react-native';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
@@ -11,6 +11,8 @@ import ScanDevice from './ScanDevice';
 import AddDevice from './AddDevice';
 import Maps from '../components/Maps';
 import HamburgerButton from '../components/HamburgerButton';
+import ListUserDeviceHome from '../components/ListUserDeviceHome';
+import Modal from "react-native-modal";
 import { loadRegisteredDevices, updateDeviceLocation, LoadTreki, GetLocation } from '../store/treki/treki.action';
 import { updateTokenDevice } from '../store/user/user.action';
 import { NotificationsAndroid } from 'react-native-notifications';
@@ -47,10 +49,20 @@ class Home extends Component {
         latitude: 0,
         longitude: 0,
         accuracy: 0
-      }
+      },
+      isVisible: false,
+      user_id: ''
     }
   }
 
+  renderItem = ({item}) => {
+    return (
+      <ListUserDeviceHome item={item} navigation={this.props.navigation}/>
+    )
+  }
+
+  keyExtractor = (item, index) => `userdevices-${index}`
+
   componentWillMount = async () => {
     await this.props.LoadTreki(this.setCoordinate);
   }
@@ -96,9 +108,26 @@ class Home extends Component {
       <View style={styles.container}>
         <HamburgerButton navigation={ this.props.navigation} />
         <Maps latitude={this.state.midPoint.latitude} longitude={this.state.midPoint.longitude} />
-        <TouchableHighlight style={styles.button}>  
+        <TouchableHighlight style={styles.button} onPress={() => {
+          this.setState({isVisible: true})
+        }}>  
         <Image style={styles.image}source={require('../treki_logo_circle.png')}/>    
         </TouchableHighlight>
+        {/* <ModalList isVisible={this.state.isVisible} /> */}
+
+         <Modal style={styles.modalWrapper} isVisible={this.state.isVisible}>
+          <View style={styles.modal}>
+            <FlatList 
+              contentContainerStyle = { styles.flatList }
+              data = { this.props.userDevices }
+              renderItem = { this.renderItem }
+              keyExtractor = { this.keyExtractor }
+            />
+            <TouchableHighlight onPress={() => this.setState({isVisible: false})}>
+              <Text style={{backgroundColor: 'red'}}>Hide me!</Text>
+            </TouchableHighlight>
+          </View>
+        </Modal>
       </View>
     );
   }
@@ -123,7 +152,21 @@ const styles = StyleSheet.create({
     borderWidth: 5,
     borderColor: '#0098a7',
     borderRadius: 30
-  }
+  },
+  modal: {
+    backgroundColor: 'white',
+    borderRadius: 10,
+    width: 300,
+    height: 400
+  },
+  modalWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1
+  },
+  flatList: {
+    alignItems: 'center'
+  },
 })
 
 const mapStateToProps = (state) => {

src/screens/Measurement.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+
+export default class componentName extends Component {
+  render() {
+    return (
+      <View style={style.outer}>
+        <View style={style.outer2}>
+          <View style={style.outer3}>
+            <View style={style.outer4}>
+              <Text style={style.title}> Handphone </Text>
+              <Text style={style.distance}> 15.00 m</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}
+
+const style = StyleSheet.create({
+  outer: {
+    backgroundColor: '#004e54',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1
+  },
+  outer2: {
+    backgroundColor: '#006971',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 600,
+    height: 600,
+    borderRadius: 300
+  },
+  outer3: {
+    backgroundColor: '#0098a7',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 450,
+    height: 450,
+    borderRadius: 225
+  },
+  outer4: {
+    backgroundColor: '#00afc4',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 300,
+    height: 300,
+    borderRadius: 150
+  },
+  title: {
+    color: 'white',
+    fontSize: 40,
+    borderBottomWidth: 3,
+    borderBottomColor: 'white',
+    paddingBottom: 7
+  },
+  distance: {
+    color: 'white',
+    fontSize: 70,
+    fontWeight: '600',
+    paddingTop: 7
+  }
+})

src/screens/UserDetailDevice.js

@@ -11,6 +11,7 @@ import {
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { getUserDetailDevice } from '../store/devices/devices.action';
+import { updateState } from '../store/treki/treki.action'
 
 class UserDetailDevice extends Component {
   static navigationOptions = {
@@ -25,14 +26,34 @@ class UserDetailDevice extends Component {
   constructor () {
     super()
     this.state = {
-      notif: false
+      notif: false,
+      detail: {
+        device_id: '',
+        name: '',
+        location: null,
+        createdAt: null,
+        updatedAt: null,
+        state: false
+      }
     }
   }
 
-  componentDidMount () {
+  updateData () {
     const { deviceId } = this.props.navigation.state.params
-    ToastAndroid.show(`${deviceId}`, ToastAndroid.SHORT)
     this.props.getUserDetailDevice(deviceId)
+      .then((detail) => {
+        console.warn(detail.data.data)
+        this.setState({
+          detail: detail.data.data
+        })
+      })
+  }
+
+  componentDidMount () {
+    // console.warn("deviceID", deviceId)
+    // let detail = this.props.userDevices.filter(val => val.id === deviceId);
+    // console.warn('detail', detail)
+    this.updateData();
   }
 
   render() {
@@ -43,14 +64,20 @@ class UserDetailDevice extends Component {
         <Image source={require('../treki_logo_circle.png')} style={style.image} />
         <Text style={style.textTitle}>Device ID</Text>
         <View style={style.wrapperDetail}>
-          <Text style={style.textDetail}>FE:JE:JK:34:32</Text>
+          <Text style={style.textDetail}>{this.state.detail.device_id}</Text>
         </View>
         <Text style={style.textTitle}>Name</Text>
         <View style={style.wrapperDetail}>
-          <Text style={style.textDetail}>Handphone</Text>
+          <Text style={style.textDetail}>{this.state.detail.name}</Text>
         </View>
         <Text style={style.textTitle}>Notification</Text>
-        <Switch onValueChange={(value) => this.setState({notif: value})} value={ this.state.notif } onTintColor='#00afc4' thumbTintColor='white'/>
+        <Switch onValueChange={(value) => {
+          this.props.updateState(value)
+            .then(() => {
+              console.warn("UPDATE")
+              this.updateData();
+            })
+          }} value={ this.state.detail.state } onTintColor='#00afc4' thumbTintColor='white'/>
         <Text style={style.textTitle}>Location</Text>
       </View>
       </ScrollView> 
@@ -94,8 +121,13 @@ const style = StyleSheet.create({
 })
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
-  getUserDetailDevice
+  getUserDetailDevice,
+  updateState
 }, dispatch)
 
-export default connect(null, mapDispatchToProps)(UserDetailDevice);
+const mapStateToProps = (state) => ({
+  userDevices: state.devicesReducer.userDevices,
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserDetailDevice);
 

src/store/devices/devices.action.js

@@ -44,13 +44,9 @@ export const getUserDevices = (id) => {
 
 export const getUserDetailDevice = (id) => {
   return (dispatch) => {
-     axios({
+     return axios({
       method: `GET`,
       url: `http://treki.fadhilmch.com/treki/${id}`,       
      })
-      .then((resp) => {
-        console.warn(`=====> DATA DETAIL ${JSON.stringify(resp.data.data)}`)
-        // dispatch()
-      })
   }
 }

src/store/treki/treki.action.js

@@ -101,6 +101,19 @@ export const saveNewDevice = (payload) => {
   }
 }
 
+export const updateState = (payload) => {
+  return (dispatch) => {
+    console.warn('updatestate')
+    return axios({
+      method: `PUT`,
+      url: `http://treki.fadhilmch.com/treki/${payload.id}/state`,
+      data: {
+        state: payload.state
+      }
+    })
+  }
+}
+
 export const updateDeviceLocation = (payload) => {
   return (dispatch) => {
     axios({