HT6

MobileApp/App.js

@@ -1,25 +1,37 @@
 import React from 'react';
-import { StyleSheet, View, Image } from 'react-native';
-//import SignIn from './src/components/sign-in'
+import {StyleSheet, View, Image, NavigatorIOS} from 'react-native';
+import SignIn from './src/components/sign-in'
 //import HelloWorld from './src/hello-world'
 import EventList from './src/components/event-list'
 import fixtures from './fixtures.json'
 import img from './assets/images/logo.png'
-
+import EventScreen from './src/components/event-screen-1'
 
 const events = Object.entries(fixtures.events).map(([uid, event]) => ({...event, uid}))
 
+/*export default class App extends React.Component {
+  render() {
+    return (
+      <NavigatorIOS
+        style={{flex: 1}}
+        initialRoute={{
+          component: EventList,
+          title: 'My Initial Scene',
+          passProps: {events}
+        }}/>
+
+    );
+  }
+}*/
+
 export default class App extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-          <Image style = {styles.image}
-                 source = {img}
-                 resizeMode = {Image.resizeMode.contain}
-          />
-          <EventList events = {events}/>
+        <EventList events = {events}/>
+        {/*<EventScreen event = {events[0]}/>*/}
       </View>
-    );
+    )
   }
 }
 
@@ -32,9 +44,9 @@ const styles = StyleSheet.create({
     paddingTop: 30,
     paddingBottom: 30,
   },
-    image: {
-        width: '100%',
-        height: 100
-    }
+  image: {
+    width: '100%',
+    height: 100
+  }
 });
 

MobileApp/package.json

@@ -23,4 +23,4 @@
     "react": "16.3.1",
     "react-native": "~0.55.2"
   }
-}
+}

MobileApp/src/components/event-list.js

@@ -1,26 +1,74 @@
-import React, { Component } from 'react'
-import {ScrollView, StyleSheet, Text} from 'react-native'
+import React, {Component} from 'react'
+import {Button, View, StyleSheet, Text, SectionList, NavigatorIOS} from 'react-native'
 import Card from './common/card'
 
+import EventScreen from './event-screen-1'
+
+
 class EventList extends Component {
-    static propTypes = {
-
-    };
-
-    render() {
-        return (
-            <ScrollView>
-                {this.props.events.map(event =>
-                    <Card key = {event.uid}>
-                        <Text>{event.title}</Text>
-                    </Card>
-                )}
-            </ScrollView>
-        )
-    }
+  static propTypes = {};
+
+  render() {
+    const sections = Object
+      .entries(this.props.events
+        .reduce((acc, event) => {
+          const firstLetter = event.title[0].toUpperCase()
+          acc[firstLetter] = [...acc[firstLetter] || [], event.title]
+          return acc;
+        }, {}))
+      .map(([firstLetter, data]) => ({firstLetter, data}))
+      .sort((a, b) => a.firstLetter > b.firstLetter)
+
+    return (
+      <SectionList
+        renderItem={({item, index, section}) =>
+          <Text key={index}
+                onPress={() => alert(item)}
+                style = {styles.item}
+          >{item}
+          </Text>
+        }
+        renderSectionHeader={({section: {firstLetter}}) =>
+          <View style={styles.firstLetterView}>
+            <Text style={styles.firstLetter}>{firstLetter}</Text>
+          </View>
+        }
+        sections={sections}
+        keyExtractor={(item, index) => item + index}
+      />
+      /*
+        <SectionList>
+            {this.props.events.map(event =>
+                <Card key = {event.uid}>
+                    <Text>{event.title}</Text>
+                </Card>
+            )}
+        </SectionList>*/
+
+
+    )
+  }
+
 }
 
 const styles = StyleSheet.create({
+  firstLetter: {
+    textAlign: 'center',
+    margin: 5,
+    fontSize: 20,
+    fontFamily: 'HelveticaNeue-Bold',
+  },
+  firstLetterView: {
+    backgroundColor: '#fff'
+  },
+  item : {
+    margin: 5,
+    fontSize: 15,
+    paddingLeft: 10,
+    paddingRight: 10,
+    fontFamily: 'HelveticaNeue-Light',
+  }
 })
 
+
 export default EventList

MobileApp/src/components/event-screen-1.js

@@ -0,0 +1,89 @@
+import React, {Component} from 'react'
+import {View, StyleSheet, Text, ImageBackground, Linking, TouchableOpacity, Button, AlertIOS} from 'react-native'
+
+class EventScreen extends Component {
+  static propTypes = {};
+
+  render() {
+    const {title, url, when, where, uid} = this.props.event
+    return (
+      <View key={uid} style={styles.container}>
+        <TouchableOpacity
+          onPress={() => Linking.openURL(url)}>
+          <ImageBackground source={{uri: 'https://placeimg.com/350/700/tech'}}
+                           style={styles.image}
+          >
+            <View style={styles.text}/>
+            <Text style={styles.title}>
+              {title.toUpperCase()}
+            </Text>
+            <Text style={styles.paragraph}>
+              {when}
+            </Text>
+            <Text style={styles.paragraph}>
+              {where}
+            </Text>
+            <Button
+              style={styles.paragraph}
+              title = "Delete Event"
+              onPress = {() => AlertIOS.alert(
+                'Delete event',
+                'Are you sure you want to delete this event?',
+                [
+                  {
+                    text: 'Cancel',
+                    onPress: () => console.log('Cancel Pressed'),
+                    style: 'cancel',
+                  },
+                  {
+                    text: 'Delete',
+                    onPress: () => console.log('Delete Pressed'),
+                    style: 'destructive'
+                  },
+                ]
+              )}
+            />
+          </ImageBackground>
+        </TouchableOpacity>
+
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  image: {
+    height: 700,
+    width: 350,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  paragraph: {
+    textAlign: 'left',
+    margin: 5,
+    fontSize: 20,
+    color: '#fff',
+    fontFamily: 'HelveticaNeue-Thin'
+  },
+  title: {
+    textAlign: 'left',
+    margin: 5,
+    fontSize: 20,
+    color: '#fff',
+    fontFamily: 'HelveticaNeue-Light'
+  },
+  text: {
+    backgroundColor: '#000',
+    opacity: .5,
+    width: 350,
+    height: 200,
+    position: 'absolute'
+
+  }
+});
+
+export default EventScreen

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, Alert} from 'react-native'
 
 class SignIn extends Component {
     static propTypes = {
@@ -27,12 +27,28 @@ class SignIn extends Component {
                     onChangeText = {this.handlePasswordChange}
                     secureTextEntry
                 />
+                <Button
+                  onPress={this.handleSubmit}
+                  title="Sign In"
+                  accessibilityLabel="Learn more about this button"
+                />
             </View>
         )
     }
 
     handleEmailChange = email => this.setState({ email })
     handlePasswordChange = password => this.setState({ password })
+    handleSubmit = () => Alert.alert(
+      'Alert Title',
+      'My Alert Msg',
+      [
+        {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
+        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
+        {text: 'OK', onPress: () => console.log('OK Pressed')},
+      ],
+      { cancelable: false }
+    )
+
 }
 
 const styles = {
@@ -43,7 +59,7 @@ const styles = {
                 borderBottomColor: '#000'
             },
             android: {
-                
+              elevation: 2
             }
         })
     }

admin/src/config.js

@@ -2,15 +2,15 @@ import firebase from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
 
-export const appName = 'advreact-10-05'
+export const appName = 'advancedreactcourse'
 
 export const config = {
-  apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
+  apiKey: 'AIzaSyCCtMGA9FTNVds_QTkB1oRTlqF2u07MHuk',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
   storageBucket: '',
-  messagingSenderId: '1094825197832'
+  messagingSenderId: '649150663252'
 }
 
 firebase.initializeApp(config)

admin/src/routes/auth.js

@@ -34,4 +34,7 @@ class AuthPage extends Component {
   signIn = ({ email, password }) => this.props.signIn(email, password)
 }
 
-export default connect(null, { signUp, signIn })(AuthPage)
+export default connect(
+  null,
+  { signUp, signIn }
+)(AuthPage)

admin/src/routes/person-page.js

@@ -18,4 +18,7 @@ class PersonPage extends Component {
   }
 }
 
-export default connect(null, { addPerson })(PersonPage)
+export default connect(
+  null,
+  { addPerson }
+)(PersonPage)