Start adding API selection modal and supporting code

mobile/src/Modal/ApiModal.js

@@ -0,0 +1,77 @@
+import React, { Component } from "react"
+import Modal from "react-native-modal"
+import PropTypes from "prop-types"
+import { View, Text, TouchableOpacity } from "react-native"
+import { Icon, OptionStrip } from "../ui"
+import autobind from "autobind-decorator"
+
+export class ApiModal extends Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    onDismiss: PropTypes.func,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: null,
+    }
+  }
+
+  @autobind
+  handleButtonPress() {
+    const { onDismiss } = this.props
+
+    if (onDismiss) {
+      onDismiss()
+    }
+  }
+
+  @autobind
+  handleValueChanged(newValue) {
+    this.setState({ value: newValue })
+  }
+
+  render() {
+    const { open, icon, message, detail } = this.props
+    const { value } = this.state
+
+    return (
+      <Modal isVisible={open}>
+        <View
+          style={{
+            flexDirection: "column",
+            justifyContent: "center",
+            width: "100%",
+            backgroundColor: "#FFFFFF",
+            padding: 10,
+          }}>
+          <OptionStrip
+            options={[
+              { value: "normal", text: "Normal" },
+              { value: "test", text: "Test" },
+              { value: "local", text: "Local" },
+            ]}
+            value={value}
+            onValueChanged={this.handleValueChanged}
+          />
+          <TouchableOpacity
+            onPress={this.handleButtonPress}
+            style={{
+              alignSelf: "center",
+              backgroundColor: "blue",
+              marginTop: 30,
+              marginBottom: 10,
+              justifyContent: "center",
+              paddingHorizontal: 10,
+              height: 40,
+              width: 100,
+              backgroundColor: "#3BB0FD",
+            }}>
+            <Text style={{ alignSelf: "center", color: "black" }}>OK</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+    )
+  }
+}

mobile/src/Modal/MessageModal.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
-import Modal from 'react-native-modal'
-import PropTypes from 'prop-types'
-import { View, Text, TouchableOpacity } from 'react-native'
-import { Icon } from '../ui'
-import autobind from 'autobind-decorator'
+import React, { Component } from "react"
+import Modal from "react-native-modal"
+import PropTypes from "prop-types"
+import { View, Text, TouchableOpacity } from "react-native"
+import { Icon } from "../ui"
+import autobind from "autobind-decorator"
 
 export class MessageModal extends Component {
   static propTypes = {
@@ -11,7 +11,7 @@ export class MessageModal extends Component {
     icon: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     detail: PropTypes.string,
-    onDismiss: PropTypes.func
+    onDismiss: PropTypes.func,
   }
 
   @autobind
@@ -23,40 +23,48 @@ export class MessageModal extends Component {
     }
   }
 
-  constructor(props) {
-    super(props)
-    this.state = {
-
-    }
-  }
-
   render() {
     const { open, icon, message, detail } = this.props
 
     return (
       <Modal isVisible={open}>
-        <View style={{ flexDirection: 'row', width: '100%', padding: 5, backgroundColor: '#FFFFFF' }}>
+        <View
+          style={{
+            flexDirection: "row",
+            width: "100%",
+            padding: 5,
+            backgroundColor: "#FFFFFF",
+          }}>
           <Icon name={icon} size={100} margin={3} />
-          <View style={{ flexGrow: 1, flexBasis: 0, flexDirection: 'column', flexWrap: 'wrap', marginLeft: 20, marginRight: 20}}>
+          <View
+            style={{
+              flexGrow: 1,
+              flexBasis: 0,
+              flexDirection: "column",
+              flexWrap: "wrap",
+              marginLeft: 20,
+              marginRight: 20,
+            }}>
             <Text style={{ marginTop: 5, fontSize: 18 }}>{message}</Text>
             <Text style={{ marginTop: 20 }}>{detail}</Text>
-            <TouchableOpacity onPress={this.handleButtonPress}
+            <TouchableOpacity
+              onPress={this.handleButtonPress}
               style={{
-                alignSelf: 'flex-end',
-                backgroundColor: 'blue',
+                alignSelf: "flex-end",
+                backgroundColor: "blue",
                 marginTop: 20,
                 marginBottom: 10,
-                justifyContent: 'center',
+                justifyContent: "center",
                 paddingHorizontal: 10,
                 height: 40,
                 width: 100,
-                backgroundColor: '#3BB0FD'
+                backgroundColor: "#3BB0FD",
               }}>
-              <Text style={{ alignSelf: 'center', color: 'black' }}>OK</Text>
+              <Text style={{ alignSelf: "center", color: "black" }}>OK</Text>
             </TouchableOpacity>
           </View>
         </View>
       </Modal>
     )
   }
-}
+}

mobile/src/Modal/index.js

@@ -1 +1,2 @@
-export { MessageModal } from './MessageModal'
+export { MessageModal } from "./MessageModal"
+export { ApiModal } from "./ApiModal"