hometask6

MobileApp/src/components/common/card.js

@@ -25,7 +25,8 @@ const styles = StyleSheet.create({
         shadowOffset: {
             width: 2, height: 2
         },
-        shadowOpacity: 0.5
+        shadowOpacity: 0.5,
+        elevation: 5
     }
 })
 

MobileApp/src/components/common/confirmation-modal.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Modal, View, Text, Button, StyleSheet } from 'react-native'
+
+class ConfirmationModal extends Component {
+    render() {
+        const {visible, children, onConfirm, onCancel} = this.props
+        return (
+            <Modal visible={visible} animationType="fade">
+                <View style={styles.modal}>
+                    <Text>{children}</Text>
+                    <Button title="Ok" onPress={onConfirm} />
+                    <Button title="Cancel" onPress={onCancel} />
+                </View>
+            </Modal>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    modal: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+})
+
+export default ConfirmationModal

MobileApp/src/components/event-list.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {ScrollView, StyleSheet, Text} from 'react-native'
+import {SectionList, StyleSheet, Text} from 'react-native'
 import Card from './common/card'
 
 class EventList extends Component {
@@ -8,14 +8,33 @@ class EventList extends Component {
     };
 
     render() {
+        const eventsGroupedByFirstLetter = this.props.events.reduce(
+            (acc, event) => {
+                const firstLetter = event.title.charAt(0).toUpperCase()
+                return {
+                    ...acc,
+                    [firstLetter]: [...(acc[firstLetter] || []), event]
+                }
+            },
+            {}
+        )
+        const sections = Object.entries(eventsGroupedByFirstLetter).map(
+            ([title, data]) => ({ title, data })
+        )
+
         return (
-            <ScrollView>
-                {this.props.events.map(event =>
-                    <Card key = {event.uid}>
-                        <Text>{event.title}</Text>
+            <SectionList
+                renderItem={({ item, index }) => (
+                    <Card key={index}>
+                        <Text>{item.title}</Text>
                     </Card>
                 )}
-            </ScrollView>
+                renderSectionHeader={({ section: { title } }) => (
+                    <Text>{title}</Text>
+                )}
+                sections={sections}
+                keyExtractor={(item, index) => item.uid + index}
+            />
         )
     }
 }

MobileApp/src/components/event.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import { View, Text, Button } from 'react-native'
+import ConfirmationModal from './common/confirmation-modal'
+
+class Event extends Component {
+    state = {
+        showConfirmationModal: false
+    }
+
+    render() {
+        const { event } = this.props
+
+        return (
+            <View>
+                <Text>{event.title}</Text>
+                <Text>{event.when}</Text>
+                <Text>{event.where}</Text>
+                <Button
+                    title="Delete"
+                    onPress={this.handleToggleConfirmationModal}
+                />
+                <ConfirmationModal
+                    visible = {this.state.showConfirmationModal}
+                    onConfirm = {this.handleToggleConfirmationModal}
+                    onCancel = {this.handleToggleConfirmationModal}
+                >
+                    Delete {event.title}?
+                </ConfirmationModal>
+            </View>
+        )
+    }
+
+    handleToggleConfirmationModal = () =>
+        this.setState({
+            showConfirmationModal: !this.state.showConfirmationModal
+        })
+}
+
+export default Event

MobileApp/src/components/sign-in.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {View, Text, TextInput, Platform} from 'react-native'
+import {View, Text, TextInput, Platform, Button} from 'react-native'
 
 class SignIn extends Component {
     static propTypes = {
@@ -27,10 +27,12 @@ class SignIn extends Component {
                     onChangeText = {this.handlePasswordChange}
                     secureTextEntry
                 />
+                <Button title="Sign In" onPress={handleSubmit} />
             </View>
         )
     }
 
+    handleSubmit = () => {}
     handleEmailChange = email => this.setState({ email })
     handlePasswordChange = password => this.setState({ password })
 }
@@ -43,7 +45,7 @@ const styles = {
                 borderBottomColor: '#000'
             },
             android: {
-                
+
             }
         })
     }