Ht6

MobileApp/App.js

@@ -10,6 +10,23 @@ const events = Object.entries(data.events).map(([uid, event]) => ({...event, uid
 
 export default class App extends React.Component {
   render() {
+    const groupedEvents = events.reduce((acc, cur) => {
+      const firstLetter = cur.title[0].toUpperCase();
+      if (!acc[firstLetter]) {
+        acc[firstLetter] = []
+      }
+      acc[firstLetter].push(cur);
+      return acc;
+    }, {})
+
+    const sectionsEvents = Object.keys(groupedEvents).map((letter) => {
+      const events = groupedEvents[letter];
+      return {
+        title: `${letter} (${events.length})`,
+        data: events
+      }
+    })
+
     return (
       <View style={styles.container}>
           <Image style = {styles.image}

MobileApp/src/components/common/delete-button.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import {Button, Alert} from 'react-native'
+
+class DeleteButton extends Component {
+  static propTypes = {
+
+  };
+
+  handleClickButton() {
+    Alert.alert(
+      'Warning',
+      'Are you sure?',
+      [
+        {text: 'Cancel', onPress: () => console.log('Cancel Pressed')},
+        {text: 'OK', onPress: () => console.log('OK Pressed')},
+      ],
+      { cancelable: false }
+    )
+  }
+
+  render() {
+    return (
+      <Button
+        onPress={() => {
+          this.handleClickButton()
+        }}
+        title="Delete Event"
+      />
+    )
+  }
+}
+
+export default DeleteButton

MobileApp/src/components/event-list.js

@@ -1,26 +1,34 @@
 import React, { Component } from 'react'
-import {Text, ScrollView, StyleSheet} from 'react-native'
+import {Text, ScrollView, StyleSheet, SectionList} from 'react-native'
 import Card from './common/card'
 
 class EventList extends Component {
     static propTypes = {
 
     };
 
-    render() {
-        return (
-            <ScrollView>
-                {this.props.events.map(event =>
-                    <Card key = {event.uid}>
-                        <Text>{event.title}</Text>
-                    </Card>
-                )}
-            </ScrollView>
-        )
-    }
+  render() {
+    return (
+      <SectionList
+        renderItem={({ item, index, section }) => (
+          <Card key={item.uid}>
+            <Text>{item.title}</Text>
+          </Card>
+        )}
+        renderSectionHeader={({ section: { title } }) => (
+          <Text style={styles.header}>{title}</Text>
+        )}
+        sections={this.props.events}
+        keyExtractor={(item, index) => item + index}
+      />
+    )
+  }
 }
 
 const styles = StyleSheet.create({
+  header: {
+    fontWeight: 'bold'
+  }
 })
 
 export default EventList

MobileApp/src/components/event.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import {View, Text, Image, StyleSheet} from 'react-native'
+import DeleteButton from './common/delete-button'
 
 class Event extends Component {
     static propTypes = {
@@ -15,18 +16,20 @@ class Event extends Component {
                 <Text>{event.url}</Text>
                 <Text>{event.where}</Text>
                 <Text>{event.when}</Text>
+                <DeleteButton />
             </View>
         )
     }
 }
 
 const styles = StyleSheet.create({
     image: {
-        width: 400,
+        width: 300,
         height: 200
     },
     title: {
-        fontSize: 30
+        fontSize: 30,
+        color: '#ffcb38'
     },
     container: {
         flex: 1,