diff --git a/MobileApp/App.js b/MobileApp/App.js index 481462b..249fe0d 100644 --- a/MobileApp/App.js +++ b/MobileApp/App.js @@ -3,11 +3,14 @@ import {configure} from 'mobx' import {Provider} from 'mobx-react' import AppNavigator from './src/components/app-navigator' import stores from './src/stores' +import firebaseInit from './config' configure({ enforceActions: true }) +firebaseInit() + export default class App extends React.Component { render() { return ( diff --git a/MobileApp/config.js b/MobileApp/config.js new file mode 100644 index 0000000..653db78 --- /dev/null +++ b/MobileApp/config.js @@ -0,0 +1,17 @@ +import { initializeApp } from 'firebase/app' +import 'firebase/auth' +import 'firebase/database' + +export const appName = 'advreact-25-06' + +const config = { + apiKey: 'AIzaSyBnWMvhTYPpwSnVwYvrWTrsS7TlHwu1wHg', + authDomain: 'advreact-25-06.firebaseapp.com', + databaseURL: 'https://advreact-25-06.firebaseio.com', + projectId: 'advreact-25-06', + storageBucket: '', + messagingSenderId: '371151529375' +} + + +export default () => initializeApp(config) \ No newline at end of file diff --git a/MobileApp/package.json b/MobileApp/package.json index e7187b5..bd93e6e 100644 --- a/MobileApp/package.json +++ b/MobileApp/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "devDependencies": { - "react-native-scripts": "1.14.0", "jest-expo": "~27.0.0", + "react-native-scripts": "1.14.0", "react-test-renderer": "16.3.1" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", @@ -21,6 +21,7 @@ "dependencies": { "email-validator": "^2.0.4", "expo": "^27.0.1", + "firebase": "^5.3.0", "lodash": "^4.17.10", "mobx": "^5.0.3", "mobx-react": "^5.2.3", diff --git a/MobileApp/src/actions/auth.js b/MobileApp/src/actions/auth.js new file mode 100644 index 0000000..d759706 --- /dev/null +++ b/MobileApp/src/actions/auth.js @@ -0,0 +1,12 @@ +import firebase from 'firebase/app' +import stores from '../stores' + +export const LoggedIn = (email, password) => { + const firebaseAuth = firebase.auth() + const { auth } = stores + return firebaseAuth.signInWithEmailAndPassword(email, password) + .then(({user})=> auth.setUser(user)) + .catch((e) => console.error(e)) +} + + diff --git a/MobileApp/src/actions/events.js b/MobileApp/src/actions/events.js new file mode 100644 index 0000000..bf592f6 --- /dev/null +++ b/MobileApp/src/actions/events.js @@ -0,0 +1,16 @@ +import firebase from 'firebase/app' +import stores from '../stores' + +const LoadEvents = () => { + stores.events.toggleLoading() + const ref = firebase.database().ref('events') + ref.once('value') + .then(snapshot => { + const events = Object.entries(snapshot.val()).map(([uid, event]) => ({...event, uid})) + stores.events.setData(events) + }) + .finally(()=>stores.events.toggleLoading()) +} + + +export default LoadEvents \ No newline at end of file diff --git a/MobileApp/src/actions/people.js b/MobileApp/src/actions/people.js new file mode 100644 index 0000000..889b9fd --- /dev/null +++ b/MobileApp/src/actions/people.js @@ -0,0 +1,17 @@ +import firebase from 'firebase/app' +import stores from '../stores' + +const LoadPeople = () => { + stores.people.toggleLoading() + const ref = firebase.database().ref('people') + ref.once('value') + .then(snapshot => { + const people = Object.entries(snapshot.val()).map(([uid, people]) => ({...people, uid})) + console.log(people); + stores.people.setData(people) + }) + .finally(()=>stores.people.toggleLoading()) +} + + +export default LoadPeople \ No newline at end of file diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js index e3156c4..d871228 100644 --- a/MobileApp/src/components/app-navigator.js +++ b/MobileApp/src/components/app-navigator.js @@ -1,19 +1,32 @@ -import {createStackNavigator} from 'react-navigation' +import {createStackNavigator, createBottomTabNavigator, createSwitchNavigator} from 'react-navigation' import AuthScreen from './screens/auth' import EventListScreen from './screens/event-list' import EventScreen from './screens/event' +import PeopleScreen from './screens/people' -export default createStackNavigator({ - auth: { - screen: AuthScreen - }, - eventList: { - screen: EventListScreen, - navigationOptions: { - title: 'events' - } - }, - event: { - screen: EventScreen +const EventListStack = createStackNavigator({ + eventList: { + screen: EventListScreen, + navigationOptions: { + title: 'events' } + }, + event: EventScreen, +}); + +const PeopleStack = createSwitchNavigator({ + people: PeopleScreen, +}); + +const BottomStack = createBottomTabNavigator( + { + eventList: EventListStack, + people: PeopleStack, + } +); + +export default createStackNavigator({ + auth: AuthScreen, + eventList: BottomStack, + people: BottomStack }) \ No newline at end of file diff --git a/MobileApp/src/components/people/people-card.js b/MobileApp/src/components/people/people-card.js new file mode 100644 index 0000000..03f6f87 --- /dev/null +++ b/MobileApp/src/components/people/people-card.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react' +import {Text, StyleSheet} from 'react-native' +import Card from '../common/card' + +class PeopleCard extends Component { + static propTypes = { + + }; + + render() { + const { people } = this.props + return ( + + {people.lastName} {people.firstName} {people.email} + + ) + } +} + +const styles = StyleSheet.create({ +}) + +export default PeopleCard \ No newline at end of file diff --git a/MobileApp/src/components/people/people-list.js b/MobileApp/src/components/people/people-list.js new file mode 100644 index 0000000..138fa21 --- /dev/null +++ b/MobileApp/src/components/people/people-list.js @@ -0,0 +1,41 @@ +import React, { Component } from 'react' +import {Text, StyleSheet, SectionList, TouchableOpacity} from 'react-native' +import PeopleCard from './people-card' +import groupBy from 'lodash/groupBy' + +class PeopleList extends Component { + static propTypes = { + + }; + + render() { + const grouped = groupBy(this.props.people, people => people.lastName.charAt(0)) + const sections = Object.entries(grouped).map(([letter, list]) => ({ + title: `${letter}, ${list.length} people`, + data: list.map(people => ({key: people.uid, people})) + })) + return } + /> + } + + getSectionRenderer = ({section}) => {section.title} +} + +const styles = StyleSheet.create({ + header: { + backgroundColor: '#F0F0F0', + height: 40, + lineHeight: 40, + marginBottom: 5, + shadowOffset: { + height: 2, width: 0 + }, + shadowOpacity: 0.3, + elevation: 3 + } +}) + +export default PeopleList \ No newline at end of file diff --git a/MobileApp/src/components/screens/event-list.js b/MobileApp/src/components/screens/event-list.js index ce3b3d6..e5d7d20 100644 --- a/MobileApp/src/components/screens/event-list.js +++ b/MobileApp/src/components/screens/event-list.js @@ -1,17 +1,27 @@ import React, { Component } from 'react' -import {StyleSheet} from 'react-native' +import {StyleSheet, Text} from 'react-native' +import {observer, inject} from 'mobx-react' import EventList from '../events/event-list' import data from '../../fixtures' +import loadEvents from '../../actions/events' -const events = Object.entries(data.events).map(([uid, event]) => ({...event, uid})) - +@inject('events') +@observer class EventListScreen extends Component { static propTypes = { }; + componentDidMount() { + loadEvents() + } + render() { - return + const {data, loading} = this.props.events + if(loading) { + return Loading... + } + return } handleEventPress = ({ uid, title }) => { diff --git a/MobileApp/src/components/screens/people.js b/MobileApp/src/components/screens/people.js new file mode 100644 index 0000000..23e3205 --- /dev/null +++ b/MobileApp/src/components/screens/people.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react' +import {StyleSheet, Text} from 'react-native' +import {observer, inject} from 'mobx-react' +import PeopleList from '../people/people-list' +import data from '../../fixtures' +import loadPeople from '../../actions/people' + +@inject('people') +@observer +class EventListScreen extends Component { + static propTypes = { + + }; + + componentDidMount() { + loadPeople() + } + + render() { + const {data, loading} = this.props.people + if(loading) { + return Loading... + } + return + } +} + +const styles = StyleSheet.create({ +}) + +export default EventListScreen \ No newline at end of file diff --git a/MobileApp/src/components/sign-in.js b/MobileApp/src/components/sign-in.js index 812285e..ea05f19 100644 --- a/MobileApp/src/components/sign-in.js +++ b/MobileApp/src/components/sign-in.js @@ -1,67 +1,74 @@ import React, { Component } from 'react' import {View, TextInput, Text, Button, Platform} from 'react-native' import {observer, inject} from 'mobx-react' +import {LoggedIn} from '../actions/auth' @inject('navigation', 'auth') @observer class SignIn extends Component { - static propTypes = { + static propTypes = { - }; + }; - render() { - const { email, password, isValidEmail } = this.props.auth - return ( - - - Email: - - - - {isValidEmail ? '' : 'Not a valid email'} - - - Password: - - -