HT6

MobileApp/App.js

@@ -10,23 +10,45 @@ const events = Object.entries(data.events).map(([uid, event]) => ({...event, uid
 
 export default class App extends React.Component {
   render() {
+    const groupedEvents = groupEventsByName(events)
+    const sectionListEvents = adjustSectionListData(groupedEvents)
+
     return (
       <View style={styles.container}>
           <Image style = {styles.image}
                  source = {require('./assets/logo.png')}
                  resizeMode = {Image.resizeMode.contain}/>
-          <Event event = {events[0]}/>
+          <Event event={events[0]}/>
       </View>
     );
   }
 }
 
+function groupEventsByName(events) {
+  return events.reduce((grouped, event) => {
+  	const firstLetter = event.title[0].toUpperCase()
+
+		if (!grouped.get(firstLetter)) {
+	    grouped.set(firstLetter, [])
+    }
+
+		grouped.get(firstLetter).push(event)
+
+    return grouped
+  }, new Map())
+}
+
+function adjustSectionListData(eventsMap) {
+  return Array.from(eventsMap, ([title, data]) => ({
+  	title,
+    data
+  })).sort((sectionA, sectionB) => sectionA.title > sectionB.title ? 1 : -1)
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: '#fff'
   },
   image: {
     width: '100%'

MobileApp/src/components/event-list.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Text, ScrollView, StyleSheet} from 'react-native'
+import { View, Text, SectionList, StyleSheet} from 'react-native'
 import Card from './common/card'
 
 class EventList extends Component {
@@ -8,19 +8,47 @@ class EventList extends Component {
     };
 
     render() {
-        return (
-            <ScrollView>
-                {this.props.events.map(event =>
-                    <Card key = {event.uid}>
-                        <Text>{event.title}</Text>
-                    </Card>
-                )}
-            </ScrollView>
-        )
+        return <SectionList
+            renderItem={({ item, index }) => (
+                <Card event={item} key={index}>
+                    <Text>{item.title}</Text>
+                    <Text>{item.when}</Text>
+                    <Text>{item.where}</Text>
+                </Card>
+            )}
+            keyExtractor={(item, index) => item + index}
+            sections={this.props.events}
+            renderSectionHeader={({ section }) => {
+                // debugger
+                return (
+                    <View style={styles.header}>
+                        <Text style={styles.title}>{section.title}</Text>
+                        <Text style={styles.count}>{`Number of Events: ${section.data.length}`}</Text>
+                    </View>
+                )
+            }}
+        />
     }
 }
 
 const styles = StyleSheet.create({
+    header: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        backgroundColor: 'white',
+        padding: 10,
+        borderBottomColor: 'black',
+        borderBottomWidth: 2
+    },
+    title: {
+        fontWeight: 'bold',
+        backgroundColor: 'white'
+    },
+    count: {
+        fontWeight: 'bold',
+        backgroundColor: 'white'
+    }
 })
 
 export default EventList

MobileApp/src/components/event.js

@@ -1,36 +1,65 @@
 import React, { Component } from 'react'
-import {View, Text, Image, StyleSheet} from 'react-native'
+import {View, Text, Image, StyleSheet, TouchableHighlight, Alert} from 'react-native'
 
 class Event extends Component {
     static propTypes = {
 
     };
+
+    onPress = () => {
+        Alert.alert(
+            'Warning!',
+            'Are you sure you want to delete an event?',
+            [
+                {text: 'Yes'},
+                {text: 'No'}
+            ],
+            { cancelable: false }
+        )
+    }
 
     render() {
         const { event } = this.props
         return (
             <View style = {styles.container}>
                 <Image source = {{uri: 'http://lorempixel.com/400/200'}} style = {styles.image}/>
-                <Text style = {styles.title}>{event.title}</Text>
-                <Text>{event.url}</Text>
-                <Text>{event.where}</Text>
-                <Text>{event.when}</Text>
+                <View style = {styles.desc}>
+                    <Text style = {styles.title}>{event.title}</Text>
+                    <Text>{event.url}</Text>
+                    <Text>{event.where}</Text>
+                    <Text>{event.when}</Text>
+                </View>
+                <TouchableHighlight
+                    style={styles.button}
+                    onPress={this.onPress}
+                >
+                    <Text>Delete an event</Text>
+                </TouchableHighlight>
             </View>
         )
     }
 }
 
 const styles = StyleSheet.create({
     image: {
-        width: 400,
+        width: '100%',
         height: 200
     },
     title: {
         fontSize: 30
     },
     container: {
-        flex: 1,
-        justifyContent: 'space-around',
+        borderColor: 'black',
+        borderWidth: 1,
+        borderStyle: 'solid'
+    },
+    desc: {
+        padding: 15
+    },
+    button: {
+        alignItems: 'center',
+        backgroundColor: '#DDDDDD',
+        padding: 10
     }
 })