[Gateway] add flatlist screen (#119)

* [Gateway] add flatlist screen

* add upColor/downColor to StatusDot

* add gateway connected status

* prepend ttn to gateway

* add catch to gateway actions

* define alive gateway as seen in last minute

* [eslint] remove import plugin

* fix prop type

* lint

.eslintrc.yml

@@ -10,8 +10,6 @@ globals:
   jest: true
 
 extends:
-- plugin:eslint-plugin-import/warnings
-- plugin:eslint-plugin-import/errors
 - standard-react
 
 plugins:

package.json

@@ -55,7 +55,6 @@
     "eslint": "^3.18.0",
     "eslint-config-standard-react": "^4.3.0",
     "eslint-plugin-flowtype": "^2.30.4",
-    "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-react": "git+ssh://git@github.com/async-la/eslint-plugin-react#ttn-patch",
     "flow-bin": "0.42",
     "haul-cli": "^0.1.2",
@@ -68,4 +67,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
+}

src/components/GatewayListItem.js

@@ -0,0 +1,101 @@
+// @flow
+
+import React, { Component } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+import StatusDot from '../components/StatusDot'
+import TagLabel from '../components/TagLabel'
+
+import { GATEWAY_DETAIL } from '../scopes/navigation/constants'
+import { BLUE, MID_GREY, WHITE } from '../constants/colors'
+import { LATO_REGULAR } from '../constants/fonts'
+
+const LAST_SEEN_LIMIT_MSECS = 1000 * 60 // 1 minute
+
+import type { TTNGateway } from '../scopes/content/gateways/types'
+
+type Props = {
+  gateway: TTNGateway,
+  navigation: Object,
+}
+
+export default class GatewayListItem extends Component {
+  props: Props
+  _navigateToSingleGateway = gateway => {
+    this.props.navigation.navigate(GATEWAY_DETAIL, {
+      gateway: gateway,
+      gatwayName: gateway.attributes.description,
+      gatwayId: gateway.id,
+    })
+  }
+  render() {
+    const { gateway } = this.props
+    const isAlive =
+      Date.now() - gateway.status.time / (1000 * 1000) < LAST_SEEN_LIMIT_MSECS
+
+    return (
+      <TouchableOpacity
+        onPress={() => this._navigateToSingleGateway(gateway)}
+        style={styles.gatewayItem}
+      >
+        <View style={styles.idHandlerRow}>
+          <TagLabel center orange style={{ width: '50%' }}>
+            {gateway.id}
+          </TagLabel>
+          <StatusDot downColor={MID_GREY} up={isAlive} upColor={BLUE} />
+        </View>
+        <View style={styles.descriptionRow}>
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={styles.descriptionText}
+          >
+            {gateway.attributes.description}
+          </Text>
+          <Text style={styles.frequencyText}>
+            {gateway.frequency_plan}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  gatewayItem: {
+    backgroundColor: WHITE,
+    borderRadius: 3,
+    padding: 10,
+    minHeight: 100,
+    justifyContent: 'center',
+  },
+  idHandlerRow: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 5,
+    flexDirection: 'row',
+  },
+  descriptionRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 5,
+    marginTop: 10,
+    marginLeft: 5,
+  },
+  descriptionText: {
+    color: MID_GREY,
+    fontFamily: LATO_REGULAR,
+  },
+  nameContainer: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  handlerContainer: {
+    width: 70,
+  },
+  frequencyText: {
+    fontStyle: 'italic',
+    fontSize: 10,
+  },
+})

src/components/StatusDot.js

@@ -6,11 +6,18 @@ import { StyleSheet, View } from 'react-native'
 import { GREY, ORANGE, BRIGHT_GREEN } from '../constants/colors'
 
 type Props = {
+  downColor?: string,
   up: boolean,
+  upColor?: string,
 }
 
-const StatusDot = ({ up }: Props) => {
-  return <View style={[styles.dot, up && styles.up]} />
+const StatusDot = ({
+  downColor = ORANGE,
+  up,
+  upColor = BRIGHT_GREEN,
+}: Props) => {
+  const backgroundColor = up ? upColor : downColor
+  return <View style={[styles.dot, { backgroundColor }]} />
 }
 
 export default StatusDot
@@ -21,10 +28,6 @@ const styles = StyleSheet.create({
     width: 15,
     borderRadius: 10,
     borderWidth: 1,
-    backgroundColor: ORANGE,
     borderColor: GREY,
   },
-  up: {
-    backgroundColor: BRIGHT_GREEN,
-  },
 })

src/constants/apiEndpoints.js

@@ -9,3 +9,6 @@ export const AUTHORIZATION_URI =
 
 // Applications
 export const APPLICATIONS = `${HOST}applications/`
+
+// Gateways
+export const GATEWAYS = `${HOST}gateways/`

src/scopes/content/gateways/actions.js

@@ -0,0 +1,40 @@
+// @flow
+
+import apiClient from '../../../utils/apiClient'
+
+import { GATEWAYS } from '../../../constants/apiEndpoints'
+import type { TTNGateway } from './types'
+import type { Dispatch, GetState } from '../../../types/redux'
+
+/**
+ * Fetch ALL Gateways
+ */
+
+export function getGatewaysAsync() {
+  return async (dispatch: Dispatch, getState: GetState) => {
+    try {
+      const payload: Array<TTNGateway> = await apiClient.get(GATEWAYS)
+      return dispatch({ type: 'content/RECEIVE_TTN_GATEWAYS', payload })
+    } catch (err) {
+      console.log('## getGatewaysAsync error', err)
+      throw err
+    }
+  }
+}
+
+/**
+ * Fetch Gateway by ID
+ */
+
+export function getGatewayAsync(gateway: TTNGateway) {
+  const { id } = gateway
+  return async (dispatch: Dispatch, getState: GetState) => {
+    try {
+      const payload: TTNGateway = await apiClient.get(GATEWAYS + id)
+      return dispatch({ type: 'content/RECEIVE_TTN_GATEWAY', payload })
+    } catch (err) {
+      console.log('## getGatewaysAsync error', err)
+      throw err
+    }
+  }
+}

src/scopes/content/gateways/types.js

@@ -0,0 +1,68 @@
+// @flow
+
+type Collaborator = {
+  username: string,
+  rights: Array<string>,
+}
+
+export type TTNGateway = {
+  id: string,
+  activated: boolean,
+  frequency_plan: string,
+  frequency_plan_url: string,
+  auto_update: boolean,
+  location_public: boolean,
+  status_public: boolean,
+  owner_public: boolean,
+  antenna_location: {
+    longitude: number,
+    latitude: number,
+    altitude: number,
+  },
+  collaborators: ?Array<Collaborator>,
+  key: string,
+  token: {
+    access_token: string,
+    expiry: string,
+  },
+  attributes: {
+    brand: string,
+    model: string,
+    placement: string,
+    antenna_model: string,
+    description: string,
+  },
+  router: Router,
+  fallback_routers: Array<Router>,
+  owner: { id: string, username: string },
+  rights: ?Array<string>,
+  status: {
+    time: number,
+    gps: { altitude: number },
+    rx_ok: number,
+    tx_in: number,
+  },
+}
+
+type Router = {
+  id: string,
+  address: string,
+  mqtt_address: string,
+}
+
+export const RECEIVE_TTN_GATEWAY = 'content/RECEIVE_TTN_GATEWAY'
+export const RECEIVE_TTN_GATEWAYS = 'content/RECEIVE_TTN_GATEWAYS'
+
+export type ReceiveTTNGatewayAction = {
+  type: 'content/RECEIVE_TTN_GATEWAY',
+  payload: TTNGateway,
+}
+
+export type ReceiveTTNGatewaysAction = {
+  type: 'content/RECEIVE_TTN_GATEWAYS',
+  payload: Array<TTNGateway>,
+}
+
+export type TTNGatewayAction =
+  | ReceiveTTNGatewayAction
+  | ReceiveTTNGatewaysAction

src/scopes/content/reducer.js

@@ -5,30 +5,47 @@ import {
   RECEIVE_TTN_APPLICATIONS,
 } from './applications/types'
 
+import { RECEIVE_TTN_GATEWAY, RECEIVE_TTN_GATEWAYS } from './gateways/types'
+
 import { RESET_AUTH } from '../auth/types'
 
 import type { TTNApplicationAction, TTNApplication } from './applications/types'
+import type { TTNGatewayAction, TTNGateway } from './gateways/types'
 import _ from 'lodash'
 
+type ContentAction = TTNApplicationAction | TTNGatewayAction
+
 type TTNApplicationDictionary = {
   [key: string]: TTNApplication,
 }
 
+type TTNGatewayDictionary = {
+  [key: string]: TTNGateway,
+}
+
 export type State = {
   applications: {
     list: Array<string>,
     dictionary: TTNApplicationDictionary,
   },
+  gateways: {
+    list: Array<string>,
+    dictionary: TTNGatewayDictionary,
+  },
 }
 
 export const initialState: State = {
   applications: {
     list: [],
     dictionary: {},
   },
+  gateways: {
+    list: [],
+    dictionary: {},
+  },
 }
 
-export default (state: State = initialState, action: TTNApplicationAction) => {
+export default (state: State = initialState, action: ContentAction) => {
   switch (action.type) {
     case RESET_AUTH:
       return initialState
@@ -66,6 +83,39 @@ export default (state: State = initialState, action: TTNApplicationAction) => {
       }
     }
 
+    case RECEIVE_TTN_GATEWAY: {
+      const gateway = action.payload
+
+      let dictionary = {
+        ...state.gateways.dictionary,
+        [gateway.id]: gateway,
+      }
+
+      return {
+        ...state,
+        gateways: {
+          list: _.uniq([...state.gateways.list, ...[gateway.id]]),
+          dictionary,
+        },
+      }
+    }
+
+    case RECEIVE_TTN_GATEWAYS: {
+      const incomingDictionary: TTNGatewayDictionary = _.keyBy(
+        action.payload,
+        'id'
+      )
+      const incomingList: Array<string> = _.map(action.payload, 'id')
+
+      return {
+        ...state,
+        gateways: {
+          list: incomingList,
+          dictionary: incomingDictionary,
+        },
+      }
+    }
+
     default:
       return state
   }

src/scopes/types.js

@@ -4,6 +4,7 @@ import { REHYDRATE as SOURCE_REHYDRATE } from 'redux-persist/constants'
 
 import type { AuthAction } from './auth/types'
 import type { TTNApplicationAction } from './content/applications/types'
+import type { TTNGatewayAction } from './content/gateways/types'
 import type { DeviceAction } from './device/types'
 import type { State } from './rootReducer'
 
@@ -16,10 +17,11 @@ export { REHYDRATE }
 type RehydrateAction = {
   type: 'persist/REHYDRATE',
   payload: State,
-};
+}
 
 export type Action =
   | TTNApplicationAction
   | AuthAction
   | DeviceAction
-  | RehydrateAction;
+  | TTNGatewayAction
+  | RehydrateAction