From e41d61125237e9bc4ee0e8b501b0e5d549aacd0e Mon Sep 17 00:00:00 2001
From: Personal <personal@Sergeys-MacBook-Pro.local>
Date: Wed, 25 Jul 2018 07:38:19 +0200
Subject: [PATCH 1/3] HT6.2 rewrite EventList on SectionList

---
 MobileApp/App.js                       | 26 +++++++++++++-
 MobileApp/src/components/event-list.js | 48 ++++++++++++++++++++------
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/MobileApp/App.js b/MobileApp/App.js
index bd99b36..16d6fc3 100644
--- a/MobileApp/App.js
+++ b/MobileApp/App.js
@@ -10,17 +10,41 @@ 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]}/>
+          <EventList events={sectionListEvents}/>
       </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,
diff --git a/MobileApp/src/components/event-list.js b/MobileApp/src/components/event-list.js
index b15eaa1..a1800be 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 { 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
\ No newline at end of file

From 1961fbd07b5aa8f0d2e521e5fc44664a84801f4a Mon Sep 17 00:00:00 2001
From: Personal <personal@Sergeys-MacBook-Pro.local>
Date: Wed, 25 Jul 2018 08:16:01 +0200
Subject: [PATCH 2/3] HT6.3 style Events component

---
 MobileApp/App.js                  |  6 ++----
 MobileApp/src/components/event.js | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/MobileApp/App.js b/MobileApp/App.js
index 16d6fc3..8f157e1 100644
--- a/MobileApp/App.js
+++ b/MobileApp/App.js
@@ -18,7 +18,7 @@ export default class App extends React.Component {
           <Image style = {styles.image}
                  source = {require('./assets/logo.png')}
                  resizeMode = {Image.resizeMode.contain}/>
-          <EventList events={sectionListEvents}/>
+          <Event event={events[0]}/>
       </View>
     );
   }
@@ -48,9 +48,7 @@ function adjustSectionListData(eventsMap) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: '#fff'
   },
   image: {
     width: '100%'
diff --git a/MobileApp/src/components/event.js b/MobileApp/src/components/event.js
index ace1ea9..8051e54 100644
--- a/MobileApp/src/components/event.js
+++ b/MobileApp/src/components/event.js
@@ -11,10 +11,12 @@ class Event extends Component {
         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>
             </View>
         )
     }
@@ -22,15 +24,19 @@ class Event extends Component {
 
 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
     }
 })
 

From e8330bd44be2de14d6d11535f84ff59bcb5fe713 Mon Sep 17 00:00:00 2001
From: Sergey Ryabov <ryabovs@yahoo.com>
Date: Wed, 25 Jul 2018 10:01:07 +0200
Subject: [PATCH 3/3] HT6.4 Implement Delete button

---
 MobileApp/src/components/event.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/MobileApp/src/components/event.js b/MobileApp/src/components/event.js
index 8051e54..ebd27bf 100644
--- a/MobileApp/src/components/event.js
+++ b/MobileApp/src/components/event.js
@@ -1,10 +1,22 @@
 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
@@ -17,6 +29,12 @@ class Event extends Component {
                     <Text>{event.where}</Text>
                     <Text>{event.when}</Text>
                 </View>
+                <TouchableHighlight
+                    style={styles.button}
+                    onPress={this.onPress}
+                >
+                    <Text>Delete an event</Text>
+                </TouchableHighlight>
             </View>
         )
     }
@@ -37,6 +55,11 @@ const styles = StyleSheet.create({
     },
     desc: {
         padding: 15
+    },
+    button: {
+        alignItems: 'center',
+        backgroundColor: '#DDDDDD',
+        padding: 10
     }
 })