From d674f5e7eb2fbf8dba9023cdc93bb323c0b3a6cb Mon Sep 17 00:00:00 2001
From: John Lyon-Smith <john@lyon-smith.org>
Date: Sun, 8 Apr 2018 20:53:01 -0700
Subject: [PATCH] Start adding API selection modal and supporting code

---
 mobile/src/API.js                | 15 ++++++-
 mobile/src/Auth/Login.js         | 35 ++++++++++-----
 mobile/src/Home/Home.js          | 28 +++++++++---
 mobile/src/Modal/ApiModal.js     | 77 ++++++++++++++++++++++++++++++++
 mobile/src/Modal/MessageModal.js | 54 ++++++++++++----------
 mobile/src/Modal/index.js        |  3 +-
 6 files changed, 171 insertions(+), 41 deletions(-)
 create mode 100644 mobile/src/Modal/ApiModal.js

diff --git a/mobile/src/API.js b/mobile/src/API.js
index f199444..d4f7092 100644
--- a/mobile/src/API.js
+++ b/mobile/src/API.js
@@ -3,6 +3,8 @@ import io from "socket.io-client"
 import { AsyncStorage } from "react-native"
 
 const authTokenName = "AuthToken"
+const backendName = "backendName"
+
 let baseURL = null
 let apiPath = null
 //
@@ -46,6 +48,15 @@ class API extends EventEmitter {
     super()
     this.user = { pending: true }
 
+    AsyncStorage.getItem(backendName)
+      .then((backend) => {
+        this.backend = backend
+      })
+      .catch((err) => {
+        this.backend = "normal"
+        AsyncStorage.setItem(backendName, this.backend)
+      })
+
     AsyncStorage.getItem(authTokenName)
       .then((token) => {
         if (!token) {
@@ -105,8 +116,8 @@ class API extends EventEmitter {
     return this.user
   }
 
-  get apiURL() {
-    return baseURL + apiPath
+  get backend() {
+    return this.backend
   }
 
   makeImageUrl(id, size) {
diff --git a/mobile/src/Auth/Login.js b/mobile/src/Auth/Login.js
index a254e17..a9b3590 100644
--- a/mobile/src/Auth/Login.js
+++ b/mobile/src/Auth/Login.js
@@ -8,8 +8,9 @@ import {
   TextInput,
   View,
   Button,
+  TouchableWithoutFeedback,
 } from "react-native"
-import { MessageModal } from "../Modal"
+import { MessageModal, ApiModal } from "../Modal"
 import logoImage from "./images/deighton.png"
 import { FormBinder } from "react-form-binder"
 import { api } from "../API"
@@ -48,9 +49,6 @@ export class Login extends React.Component {
       alignItems: "center",
       justifyContent: "center",
     },
-    logo: {
-      width: "50%",
-    },
     inputRow: {
       paddingTop: 10,
       width: "60%",
@@ -79,6 +77,7 @@ export class Login extends React.Component {
     this.state = {
       binder: new FormBinder({ email: "john@lyon-smith.org" }, Login.bindings),
       messageModal: null,
+      apiModal: null,
     }
   }
 
@@ -110,16 +109,28 @@ export class Login extends React.Component {
     this.setState({ messageModal: null })
   }
 
+  @autobind
+  handleApiDismiss() {
+    this.setState({ apiModal: null })
+  }
+
+  @autobind
+  handleApiPress() {
+    this.setState({ apiModal: {} })
+  }
+
   render() {
-    const { messageModal } = this.state
+    const { messageModal, apiModal } = this.state
 
     return (
       <View style={Login.styles.page} behavior="padding">
-        <Image
-          style={Login.styles.logo}
-          source={logoImage}
-          resizeMode="contain"
-        />
+        <TouchableWithoutFeedback onPress={this.handleApiPress}>
+          <Image
+            style={{ width: "50%" }}
+            source={logoImage}
+            resizeMode="contain"
+          />
+        </TouchableWithoutFeedback>
         <View style={Login.styles.inputRow}>
           <BoundInput
             name="email"
@@ -172,6 +183,10 @@ export class Login extends React.Component {
           detail={messageModal ? messageModal.detail : ""}
           onDismiss={messageModal && this.handleMessageDismiss}
         />
+        <ApiModal
+          open={!!apiModal}
+          onDismiss={apiModal && this.handleApiDismiss}
+        />
         {Platform.OS === "ios" && <KeyboardSpacer />}
       </View>
     )
diff --git a/mobile/src/Home/Home.js b/mobile/src/Home/Home.js
index 6b207cd..0638b75 100644
--- a/mobile/src/Home/Home.js
+++ b/mobile/src/Home/Home.js
@@ -55,6 +55,17 @@ export class Home extends React.Component {
     }
   }
 
+  @autobind
+  handleMarkerPress(e, sectionIndex) {
+    if (this.sectionList) {
+      this.sectionList.scrollToLocation({
+        sectionIndex,
+        itemIndex: 0,
+        viewOffset: 45,
+      })
+    }
+  }
+
   @autobind
   handleWorkItemsListPress() {
     this.props.history.push("/workitemlist")
@@ -116,14 +127,19 @@ export class Home extends React.Component {
             latitudeDelta: 0.0922,
             longitudeDelta: 0.0922,
           }}>
-          {sections.map((section, index) => (
+          {sections.map((workItem, index) => (
             <Marker
               key={index}
-              coordinate={section.coordinate}
-              title={workItemTypeText[section.workItemType]}
-              description={section.address}
+              coordinate={workItem.coordinate}
+              title={
+                pad(workItem.ticketNumber, 4) +
+                ": " +
+                workItemTypeText[workItem.workItemType]
+              }
+              description={workItem.address}
               image={pinImage}
               anchor={{ x: 0.5, y: 1.0 }}
+              onPress={(e) => this.handleMarkerPress(e, index)}
             />
           ))}
         </MapView>
@@ -152,8 +168,10 @@ export class Home extends React.Component {
           />
         </View>
         <SectionList
+          ref={(ref) => (this.sectionList = ref)}
           style={{ width: "100%", flexGrow: 1 }}
           sections={sections}
+          stickySectionHeadersEnabled={true}
           renderSectionHeader={({ section: workItem }) => (
             <View
               key={workItem._id}
@@ -169,10 +187,10 @@ export class Home extends React.Component {
               </Text>
             </View>
           )}
+          keyExtractor={(item) => item._id}
           renderItem={({ item: activity, section }) => {
             return (
               <View
-                key={activity._id}
                 style={{
                   flexDirection: "row",
                   height: 50,
diff --git a/mobile/src/Modal/ApiModal.js b/mobile/src/Modal/ApiModal.js
new file mode 100644
index 0000000..a5e7bdd
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/mobile/src/Modal/MessageModal.js b/mobile/src/Modal/MessageModal.js
index 3431147..fe266a0 100644
--- a/mobile/src/Modal/MessageModal.js
+++ b/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>
     )
   }
-}
\ No newline at end of file
+}
diff --git a/mobile/src/Modal/index.js b/mobile/src/Modal/index.js
index 7852cbf..08b28e2 100644
--- a/mobile/src/Modal/index.js
+++ b/mobile/src/Modal/index.js
@@ -1 +1,2 @@
-export { MessageModal } from './MessageModal'
\ No newline at end of file
+export { MessageModal } from "./MessageModal"
+export { ApiModal } from "./ApiModal"