feat(device_info): added screen and menu entry in react-native UI to …

…display device infos

client/react-native/common/components/Screens/Settings/Devtools/DeviceInfos.js

@@ -0,0 +1,68 @@
+import React, { PureComponent } from 'react'
+import { Text, ScrollView, TouchableOpacity, Clipboard } from 'react-native'
+import { Header } from '../../../Library'
+import { colors } from '../../../../constants'
+import { padding } from '../../../../styles'
+import { GetDeviceInfos } from '../../../../graphql/queries'
+
+export default class DeviceInfos extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: (
+      <Header
+        navigation={navigation}
+        title='Device infos'
+        titleIcon='info'
+        backBtn
+      />
+    ),
+  })
+
+  state = {
+    infos: {},
+  }
+
+  componentDidMount () {
+    GetDeviceInfos.then(data => {
+      this.setState({ infos: data.DeviceInfos.infos })
+    })
+  }
+
+  render () {
+    const { infos } = this.state
+
+    var fields = []
+    for (let i = 0; i < infos.length; i++) {
+      fields.push(
+        <TouchableOpacity
+          key={i}
+          style={[
+            {
+              backgroundColor: colors.white,
+              borderBottomColor: '#bbb',
+              borderBottomWidth: 1,
+            },
+            padding,
+          ]}
+          onPress={() => Clipboard.setString(infos[i].value)}
+        >
+          <Text
+            color={colors.black}
+            style={{
+              fontWeight: 'bold',
+              marginBottom: 4,
+            }}
+          >
+            {infos[i].key}
+          </Text>
+          <Text color={colors.black}>{infos[i].value}</Text>
+        </TouchableOpacity>
+      )
+    }
+
+    return (
+      <ScrollView style={{ backgroundColor: colors.background }}>
+        {fields}
+      </ScrollView>
+    )
+  }
+}

client/react-native/common/components/Screens/Settings/Devtools/List.js

@@ -18,6 +18,13 @@ export default class List extends PureComponent {
     const { navigation } = this.props
     return (
       <Menu absolute>
+        <Menu.Section>
+          <Menu.Item
+            icon='info'
+            title='Device infos'
+            onPress={() => navigation.push('devtools/deviceinfos')}
+          />
+        </Menu.Section>
         <Menu.Section>
           <Menu.Item
             icon='refresh-ccw'

client/react-native/common/components/Screens/Settings/Devtools/index.js

@@ -4,6 +4,7 @@ import Database from './Database'
 import Network from './Network'
 import EventList from './EventList'
 import EventDetails from './EventDetails'
+import DeviceInfos from './DeviceInfos'
 
 export default createSubStackNavigator(
   {
@@ -12,6 +13,7 @@ export default createSubStackNavigator(
     'devtools/network': Network,
     'devtools/eventlist': EventList,
     'devtools/eventdetails': EventDetails,
+    'devtools/deviceinfos': DeviceInfos,
   },
   {
     initialRouteName: 'devtools/list',