From 66a9930ad4063400ae3e1fbc3ca3a7d2d58a5538 Mon Sep 17 00:00:00 2001
From: vitaliy <viprogramm@gmail.com>
Date: Thu, 26 Jul 2018 00:04:11 +0300
Subject: [PATCH 1/2] rewrite EventList from ScrollView to SectionList

---
 MobileApp/App.js                       | 19 ++++++++++++++-
 MobileApp/src/components/event-list.js | 32 ++++++++++++++++----------
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/MobileApp/App.js b/MobileApp/App.js
index bd99b36..cf3994f 100644
--- a/MobileApp/App.js
+++ b/MobileApp/App.js
@@ -10,12 +10,29 @@ 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}
                  source = {require('./assets/logo.png')}
                  resizeMode = {Image.resizeMode.contain}/>
-          <Event event = {events[0]}/>
+          <EventList events = {sectionsEvents}/>
       </View>
     );
   }
diff --git a/MobileApp/src/components/event-list.js b/MobileApp/src/components/event-list.js
index b15eaa1..aaffd71 100644
--- a/MobileApp/src/components/event-list.js
+++ b/MobileApp/src/components/event-list.js
@@ -1,5 +1,5 @@
 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 {
@@ -7,20 +7,28 @@ class EventList extends Component {
 
     };
 
-    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
\ No newline at end of file

From c27f4676467a75126bcd7d2ffee40de47b6e990d Mon Sep 17 00:00:00 2001
From: vitaliy <viprogramm@gmail.com>
Date: Thu, 26 Jul 2018 00:56:18 +0300
Subject: [PATCH 2/2] add delete button with modal

---
 MobileApp/App.js                              |  2 +-
 .../src/components/common/delete-button.js    | 33 +++++++++++++++++++
 MobileApp/src/components/event.js             |  7 ++--
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 MobileApp/src/components/common/delete-button.js

diff --git a/MobileApp/App.js b/MobileApp/App.js
index cf3994f..26e5b5c 100644
--- a/MobileApp/App.js
+++ b/MobileApp/App.js
@@ -32,7 +32,7 @@ export default class App extends React.Component {
           <Image style = {styles.image}
                  source = {require('./assets/logo.png')}
                  resizeMode = {Image.resizeMode.contain}/>
-          <EventList events = {sectionsEvents}/>
+          <Event event = {events[0]}/>
       </View>
     );
   }
diff --git a/MobileApp/src/components/common/delete-button.js b/MobileApp/src/components/common/delete-button.js
new file mode 100644
index 0000000..2b28e74
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/MobileApp/src/components/event.js b/MobileApp/src/components/event.js
index ace1ea9..230499b 100644
--- a/MobileApp/src/components/event.js
+++ b/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,6 +16,7 @@ class Event extends Component {
                 <Text>{event.url}</Text>
                 <Text>{event.where}</Text>
                 <Text>{event.when}</Text>
+                <DeleteButton />
             </View>
         )
     }
@@ -22,11 +24,12 @@ class Event extends Component {
 
 const styles = StyleSheet.create({
     image: {
-        width: 400,
+        width: 300,
         height: 200
     },
     title: {
-        fontSize: 30
+        fontSize: 30,
+        color: '#ffcb38'
     },
     container: {
         flex: 1,