Hometask/6

MobileApp/App.js

@@ -37,4 +37,3 @@ const styles = StyleSheet.create({
         height: 100
     }
 });
-

MobileApp/src/components/common/card.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {View, StyleSheet} from 'react-native'
+import {View, StyleSheet, Platform} from 'react-native'
 
 class Card extends Component {
     static propTypes = {
@@ -21,12 +21,20 @@ const styles = StyleSheet.create({
         marginTop: 10,
         marginBottom: 10,
         padding: 5,
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 2, height: 2
-        },
-        shadowOpacity: 0.5
+
+        ...Platform.select({
+            ios: {
+                shadowColor: '#000',
+                shadowOffset: {
+                    width: 2, height: 2
+                },
+                shadowOpacity: 0.5
+            },
+            android: {
+                elevation: 3
+            }
+        }),
     }
 })
 
-export default Card
+export default Card

MobileApp/src/components/event-list.js

@@ -1,26 +1,58 @@
 import React, { Component } from 'react'
-import {ScrollView, StyleSheet, Text} from 'react-native'
+import {SectionList, Text, TouchableOpacity, View} from 'react-native'
 import Card from './common/card'
+import Event from './event'
 
 class EventList extends Component {
     static propTypes = {
 
     };
 
+    state = {
+        currentEvent: null
+    }
+
+    showEvent = (event) => {
+        this.setState({ currentEvent: event })
+    }
+
+    getFitstLetterOfEvent = event => {
+        return event.title.charAt(0)
+    }
+
+    getFilterEvents = letter => {
+        const {events} = this.props
+        return events.filter(event => this.getFitstLetterOfEvent(event) === letter)
+    }
+
     render() {
+        const {events} = this.props
+        const {currentEvent} = this.state
+        const firstLettersofEvents = [...new Set(events.map(event => this.getFitstLetterOfEvent(event)))].sort()
+
         return (
-            <ScrollView>
-                {this.props.events.map(event =>
-                    <Card key = {event.uid}>
-                        <Text>{event.title}</Text>
-                    </Card>
-                )}
-            </ScrollView>
+            <View>
+                {currentEvent && <Event event={currentEvent} />}
+                <SectionList
+                  style={{width: 300}}
+                  renderItem={({item, index, section}) =>
+                      <TouchableOpacity onPress={() => this.showEvent(item)}>
+                          <Card key = {index}>
+                              <Text>{item.title}</Text>
+                          </Card>
+                      </TouchableOpacity>
+                  }
+                  renderSectionHeader={({section: {title}}) => (
+                    <Text style={{fontWeight: 'bold'}}>{title}</Text>
+                  )}
+                  sections={firstLettersofEvents.map(letter =>
+                      ({title: letter, data: this.getFilterEvents(letter)})
+                  )}
+                  keyExtractor={(item, index) => item + index}
+                />
+            </View>
         )
     }
 }
 
-const styles = StyleSheet.create({
-})
-
-export default EventList
+export default EventList

MobileApp/src/components/event.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import {View, StyleSheet, Text, Button, Modal} from 'react-native'
+
+class Event extends Component {
+    static propTypes = {
+
+    }
+
+    state = {
+        modalVisible: false,
+    }
+
+    removeEvent = (event) => {
+        console.log('Remove event: ', event)
+        this.setModalVisible(false)
+    }
+
+    setModalVisible = (visible) => {
+        this.setState({modalVisible: visible})
+    }
+
+    render() {
+        const {event} = this.props
+        const {modalVisible} = this.state
+
+        return (
+            <View style = {styles.container}>
+                <Modal
+                  animationType="slide"
+                  transparent={false}
+                  visible={modalVisible}
+                  onRequestClose={() => {
+                    alert('Modal has been closed.');
+                  }}>
+                  <View style={{marginTop: 22}}>
+                    <View>
+                      <Text>Are you sure?</Text>
+
+                      <Text>{"\n"}</Text>
+                      <Button
+                        onPress={() => this.removeEvent(event)}
+                        title="Yes"
+                        color="#841584"
+                      />
+                      <Text>{"\n"}</Text>
+                      <Button
+                        onPress={() => this.setModalVisible(!modalVisible)}
+                        title="No"
+                        color="#841584"
+                      />
+                    </View>
+                  </View>
+                </Modal>
+
+                <Text>Selected event:{"\n"}</Text>
+
+                {Object.entries(event).map(([key, value]) => <Text key={key}>{`${key}: ${value}`}</Text>)}
+
+                <Text>{"\n"}</Text>
+                <Button
+                  onPress={() => this.setModalVisible(true)}
+                  title="Remove event"
+                  color="#841584"
+                />
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: '#DDD',
+        marginTop: 10,
+        marginBottom: 30,
+        padding: 5,
+    }
+})
+
+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,6 +27,11 @@ class SignIn extends Component {
                     onChangeText = {this.handlePasswordChange}
                     secureTextEntry
                 />
+                <Button
+                  onPress={() => {console.log('Login')}}
+                  title="Login"
+                  color="#841584"
+                />
             </View>
         )
     }
@@ -43,10 +48,10 @@ const styles = {
                 borderBottomColor: '#000'
             },
             android: {
-                
+
             }
         })
     }
 }
 
-export default SignIn
+export default SignIn