SectionList on home screen with API

mobile/src/Home/Home.js

@@ -3,7 +3,7 @@ import {
   StyleSheet,
   Text,
   TextInput,
-  FlatList,
+  SectionList,
   Image,
   View,
   TouchableOpacity,
@@ -14,6 +14,7 @@ import { api } from "../API"
 import autobind from "autobind-decorator"
 import pinImage from "./images/pin.png"
 import { ifIphoneX } from "react-native-iphone-x-helper"
+import { workItemTypeText, pad } from "../util"
 
 const styles = StyleSheet.create({
   container: {
@@ -24,68 +25,20 @@ const styles = StyleSheet.create({
   },
 })
 
-const data = [
-  {
-    key: "1",
-    title: "Remove Animal Carcass",
-    location: "Ossington Ave. | 0.2 mi.",
-    state: "planned",
-    latlng: { latitude: 43.653226, longitude: -79.383184 },
-  },
-  {
-    key: "2",
-    title: "Fix sign post",
-    location: "Alexandre St. | 0.7 mi.",
-    state: "open",
-    latlng: { latitude: 43.648118, longitude: 79.392636 },
-  },
-  {
-    key: "3",
-    title: "Overflowing trash",
-    location: "Bay St. | 0.8 mi.",
-    state: "open",
-    latlng: { latitude: 43.640168, longitude: -79.409373 },
-  },
-  {
-    key: "4",
-    title: "Leaking water pipe",
-    location: "Bloor St. | 1.2 mi.",
-    state: "planned",
-    latlng: { latitude: 43.63311, longitude: -79.41588 },
-  },
-  {
-    key: "5",
-    title: "Tree branch in road",
-    location: "Blue Jays Way | 2.2 mi.",
-    state: "open",
-    latlng: { latitude: 43.653526, longitude: -79.361385 },
-  },
-  {
-    key: "6",
-    title: "Washing machine on sidewalk",
-    location: "Christie St. | 3.0 mi.",
-    state: "open",
-    latlng: { latitude: 43.66387, longitude: -79.383705 },
-  },
-  {
-    key: "7",
-    title: "Dead moose",
-    location: "Cummer Ave. | 4.2 mi.",
-    state: "open",
-    latlng: { latitude: 43.659166, longitude: -79.39135 },
-  },
-  {
-    key: "8",
-    title: "Glass in street",
-    location: "Danforth Ave. | 4.7 mi.",
-    state: "open",
-    latlng: { latitude: 43.663538, longitude: -79.423212 },
-  },
-]
-
 export class Home extends React.Component {
   constructor(props) {
     super(props)
+    this.state = {
+      sections: [],
+    }
+    api
+      .listWorkItemActivities()
+      .then((list) => {
+        this.setState({ sections: list.items })
+      })
+      .catch((err) => {
+        console.error(err)
+      })
   }
 
   @autobind
@@ -135,6 +88,8 @@ export class Home extends React.Component {
   }
 
   render() {
+    const { sections } = this.state
+
     return (
       <View style={styles.container}>
         <Header
@@ -161,12 +116,12 @@ export class Home extends React.Component {
             latitudeDelta: 0.0922,
             longitudeDelta: 0.0922,
           }}>
-          {data.map((marker) => (
+          {sections.map((section, index) => (
             <Marker
-              key={marker.key}
-              coordinate={marker.latlng}
-              title={marker.title}
-              description={marker.location}
+              key={index}
+              coordinate={section.coordinate}
+              title={workItemTypeText[section.workItemType]}
+              description={section.address}
               image={pinImage}
               anchor={{ x: 0.5, y: 1.0 }}
             />
@@ -178,7 +133,7 @@ export class Home extends React.Component {
             alignItems: "center",
             width: "100%",
             height: 40,
-            backgroundColor: "#F4F4F4",
+            backgroundColor: "white",
           }}>
           <Icon
             name="search"
@@ -187,7 +142,7 @@ export class Home extends React.Component {
           />
           <TextInput
             style={{ flexGrow: 1, flexBasis: 0, height: "100%" }}
-            underlineColorAndroid="#F4F4F4"
+            underlineColorAndroid="white"
             placeholder="Search"
           />
           <Icon
@@ -196,12 +151,34 @@ export class Home extends React.Component {
             style={{ marginLeft: 5, marginRight: 10, tintColor: "gray" }}
           />
         </View>
-        <FlatList
+        <SectionList
           style={{ width: "100%", flexGrow: 1 }}
-          data={data}
-          renderItem={({ item, index }) => {
+          sections={sections}
+          renderSectionHeader={({ section: workItem }) => (
+            <View
+              key={workItem._id}
+              style={{
+                flexDirection: "column",
+                justifyContent: "center",
+                backgroundColor: "#F4F4F4",
+                paddingLeft: 8,
+                height: 45,
+              }}>
+              <Text style={{ fontSize: 16 }}>
+                WORK ORDER {pad(workItem.ticketNumber, 4)}
+              </Text>
+            </View>
+          )}
+          renderItem={({ item: activity, section }) => {
             return (
-              <View style={{ flexDirection: "row", height: 50 }}>
+              <View
+                key={activity._id}
+                style={{
+                  flexDirection: "row",
+                  height: 50,
+                  marginTop: 3,
+                  marginBottom: 3,
+                }}>
                 <Text
                   style={{
                     fontSize: 8,
@@ -209,17 +186,19 @@ export class Home extends React.Component {
                     marginLeft: 5,
                     alignSelf: "center",
                   }}>
-                  {item.state.toUpperCase()}
+                  {activity.status.toUpperCase()}
                 </Text>
                 <View style={{ width: "75%", flexDirection: "column" }}>
-                  <Text style={{ fontSize: 20 }}>{item.title}</Text>
+                  <Text style={{ fontSize: 20, fontWeight: "bold" }}>
+                    {activity.resolution}
+                  </Text>
                   <Text style={{ fontSize: 14, color: "gray" }}>
-                    {item.location}
+                    {activity.address || "..."}
                   </Text>
                 </View>
                 <TouchableOpacity
                   style={{ alignSelf: "center" }}
-                  onPress={() => this.handleItemSelect(item, index)}>
+                  onPress={() => this.handleItemSelect(activity, index)}>
                   <Icon name="rightArrow" size={16} />
                 </TouchableOpacity>
               </View>