Clicking on activity working

mobile/src/Activity/Activity.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 import {
   StyleSheet,
   View,
@@ -8,34 +8,45 @@ import {
   TextInput,
   KeyboardAvoidingView,
   Platform,
-  TouchableOpacity
-} from 'react-native'
-import MapView, { Marker } from 'react-native-maps'
-import { FormBinder } from 'react-form-binder'
-import { Icon, Header, PhotoButton, BoundInput, BoundButton, BoundOptionStrip } from '../ui'
-import autobind from 'autobind-decorator'
-import { ifIphoneX, isIphoneX } from 'react-native-iphone-x-helper'
+  TouchableOpacity,
+} from "react-native"
+import MapView, { Marker } from "react-native-maps"
+import { FormBinder } from "react-form-binder"
+import {
+  Icon,
+  Header,
+  PhotoButton,
+  BoundInput,
+  BoundButton,
+  BoundOptionStrip,
+} from "../ui"
+import { MessageModal } from "../Modal"
+import autobind from "autobind-decorator"
+import KeyboardSpacer from "react-native-keyboard-spacer"
+import { isIphoneX } from "react-native-iphone-x-helper"
+import { api } from "../API"
+import { formatLatLng, parseLatLng } from "../util"
 
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
-    backgroundColor: '#DDDDDD',
+    backgroundColor: "#DDDDDD",
   },
   panel: {
-    width: '94%',
-    backgroundColor: 'white',
-    alignSelf: 'center',
-    marginTop: '3%',
-    shadowColor: 'gray',
+    width: "94%",
+    backgroundColor: "white",
+    alignSelf: "center",
+    marginTop: "3%",
+    shadowColor: "gray",
     shadowOffset: { width: 2, height: 2 },
     shadowRadius: 2,
-    shadowOpacity: .5,
+    shadowOpacity: 0.5,
     padding: 10,
   },
   label: {
     fontSize: 14,
     marginBottom: 4,
-  }
+  },
 })
 
 export class Activity extends React.Component {
@@ -44,7 +55,8 @@ export class Activity extends React.Component {
       isValid: true,
     },
     location: {
-      isValid: true,
+      isValid: (r, v) => v !== "",
+      isReadOnly: true,
     },
     details: {
       isValid: true,
@@ -57,7 +69,7 @@ export class Activity extends React.Component {
     },
     status: {
       isValid: true,
-    }
+    },
   }
 
   constructor(props) {
@@ -66,6 +78,51 @@ export class Activity extends React.Component {
       binder: new FormBinder({}, Activity.bindings),
       messageModal: null,
     }
+
+    const { search } = this.props.location
+
+    if (search) {
+      const id = new URLSearchParams(search).get("id")
+
+      if (id) {
+        api
+          .getActivity(id)
+          .then((activity) => {
+            if (activity) {
+              const [lng, lat] = activity.location.coordinates
+              activity.location = formatLatLng(lat, lng)
+              this.setState({
+                binder: new FormBinder(activity, Activity.bindings),
+                region: {
+                  latitude: lat,
+                  longitude: lng,
+                  latitudeDelta: 0.01,
+                  longitudeDelta: 0.01,
+                },
+              })
+            }
+          })
+          .catch((err) => {
+            this.setState({
+              messageModal: {
+                icon: "hand",
+                message: "Unable to get activity details",
+                detail: err.message,
+                back: true,
+              },
+            })
+          })
+      }
+    }
+  }
+
+  @autobind
+  handleMessageDismiss() {
+    const back = this.state.messageModal.back
+    this.setState({ messageModal: null })
+    if (back) {
+      this.handleBackPress()
+    }
   }
 
   @autobind
@@ -75,41 +132,49 @@ export class Activity extends React.Component {
     if (history.length > 1) {
       history.goBack()
     } else {
-      history.replace('/home')
+      history.replace("/home")
     }
   }
 
   render() {
-    const { binder } = this.state
+    const { binder, messageModal, region } = this.state
 
     return (
-      <View style={{ width: '100%', height: '100%' }}>
-        <Header title='Activity' leftButton={{ icon: 'back', onPress: this.handleBackPress }} />
+      <View style={{ width: "100%", height: "100%" }}>
+        <Header
+          title="Activity"
+          leftButton={{ icon: "back", onPress: this.handleBackPress }}
+        />
         <ScrollView style={styles.container}>
           <View style={styles.panel}>
-            <BoundInput binder={binder} name='resolution' label='Resolution:' />
+            <BoundInput binder={binder} name="resolution" label="Resolution:" />
           </View>
           <View style={styles.panel}>
             <BoundOptionStrip
               binder={binder}
               options={[
-                { value: 'planned', text: 'Planned' },
-                { value: 'open', text: 'Open' },
-                { value: 'onHold', text: 'On Hold' },
-                { value: 'closed', text: 'Closed' },
+                { value: "planned", text: "Planned" },
+                { value: "open", text: "Open" },
+                { value: "onHold", text: "On Hold" },
+                { value: "closed", text: "Closed" },
               ]}
-              label='Status:'
-              name='status' />
+              label="Status:"
+              name="status"
+            />
           </View>
           <View style={styles.panel}>
-            <BoundInput binder={binder} name='notes' label='Notes:' />
+            <BoundInput binder={binder} name="notes" label="Notes:" />
           </View>
           <View style={styles.panel}>
-            <BoundInput binder={binder} name='dateTime' label='Date &amp; Time:' />
-            <BoundInput binder={binder} name='location' label='Location:' />
+            <BoundInput
+              binder={binder}
+              name="dateTime"
+              label="Date &amp; Time:"
+            />
+            <BoundInput binder={binder} name="location" label="Location:" />
             <MapView
               style={{
-                width: '100%',
+                width: "100%",
                 height: 400,
                 marginTop: 10,
               }}
@@ -119,24 +184,43 @@ export class Activity extends React.Component {
                 longitude: -79.384293,
                 latitudeDelta: 0.0922,
                 longitudeDelta: 0.0421,
-              }} />
+              }}
+            />
           </View>
           <View style={styles.panel}>
             <Text style={styles.label}>Pictures:</Text>
-            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 }}>
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                marginBottom: 5,
+              }}>
               <PhotoButton />
               <PhotoButton />
               <PhotoButton />
             </View>
-            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                marginTop: 5,
+              }}>
               <PhotoButton />
               <PhotoButton />
               <PhotoButton />
             </View>
           </View>
-          { isIphoneX ? <View style={{ height: 30, width: '100%' }} /> : null }
+          {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
+        <MessageModal
+          open={!!messageModal}
+          icon={messageModal ? messageModal.icon : ""}
+          message={messageModal ? messageModal.message : ""}
+          detail={messageModal ? messageModal.detail : ""}
+          onDismiss={messageModal && this.handleMessageDismiss}
+        />
+        {Platform.OS === "ios" && <KeyboardSpacer />}
       </View>
-    );
+    )
   }
 }

mobile/src/Home/Home.js

@@ -84,8 +84,8 @@ export class Home extends React.Component {
   }
 
   @autobind
-  handleItemSelect(item, index) {
-    this.props.history.push("/activity")
+  handleItemSelect(item) {
+    this.props.history.push(`/activity?id=${item._id}`)
   }
 
   @autobind
@@ -207,12 +207,24 @@ export class Home extends React.Component {
               <View
                 key={workItem._id}
                 style={{
-                  flexDirection: "column",
-                  justifyContent: "center",
+                  flexDirection: "row",
+                  justifyContent: "flex-start",
+                  alignItems: "center",
                   backgroundColor: "#F4F4F4",
                   paddingLeft: 8,
                   height: 45,
                 }}>
+                <Icon
+                  name={
+                    workItem.workItemType === "order"
+                      ? "hardhat"
+                      : workItem.workItemType === "complaint"
+                        ? "question"
+                        : "clipboard"
+                  }
+                  size={16}
+                  style={{ marginRight: 10 }}
+                />
                 <Text style={{ fontSize: 16 }}>
                   {workItemTypeText[workItem.workItemType].toUpperCase()}{" "}
                   {pad(workItem.ticketNumber, 4)}
@@ -230,7 +242,7 @@ export class Home extends React.Component {
                     backgroundColor: "white",
                   }}
                   underlayColor="#EEEEEE"
-                  onPress={() => this.handleItemSelect(activity, index)}>
+                  onPress={() => this.handleItemSelect(activity)}>
                   <View
                     style={{
                       height: "100%",