[React Native] Complete the Notes view

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.

 

import firebase from 'firebase';
import React from 'react';
import {
    View,
    StyleSheet,
    Text,
    ListView,
    TextInput,
    TouchableHighlight
} from 'react-native';
import Badge from './Badge';
import Divdir from './Helpers/divdir';

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    },
    buttonText: {
        fontSize: 18,
        color: 'white'
    },
    button: {
        height: 60,
        backgroundColor: '#48BBEC',
        flex: 3,
        alignItems: 'center',
        justifyContent: 'center'
    },
    searchInput: {
        height: 60,
        padding: 10,
        fontSize: 18,
        color: '#111',
        flex: 10
    },
    rowContainer: {
        padding: 10
    },
    footerContainer: {
        backgroundColor: '#E3E3E3',
        alignItems: 'center',
        flexDirection: 'row'
    }
});


// In the video there are a couple errors, fixed them so it would build.
class Notes extends React.Component{
    constructor(props){
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
        this.notes = [];
        this.state = {
            note: '',
            dataSource: null,
        };
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyAs8HBqV2X6VIOE5MnDwENz1nRffNkUbiU",
            authDomain: "github-saver-9a338.firebaseapp.com",
            databaseURL: "https://github-saver-9a338.firebaseio.com",
            storageBucket: "github-saver-9a338.appspot.com",
        };
        firebase.initializeApp(config);
    }
    componentDidMount(){
        firebase.database().ref('notes/').on('child_added', (data)=>{
            this.notes.push(data.val());
        })
    }
    handleChange(e){
        this.setState({
            note: e.nativeEvent.text
        })
    }
    handleSubmit(){
        let note = this.state.note;
        firebase.database().ref('notes/').push({
            note,
            timestamp: +new Date()
        })
        this.setState({
            note: ''
        })
    }
    render(){

            var notesHtml = this.notes && this.notes.map((note, index)=>{
                return (
                    <View>
                        <Text key={index}>{note.note}</Text>
                        <Divdir />
                    </View>
                );
            });


        return (
            <View style={styles.container}>
                <Badge userInfo={this.props.userInfo}/>
                <View>
                    {notesHtml}
                </View>
                <View style={styles.footerContainer}>
                    <TextInput
                        style={styles.searchInput}
                        value={this.state.note}
                        onChange={this.handleChange.bind(this)}
                        placeholder="New Note" />
                    <TouchableHighlight
                        style={styles.button}
                        onPress={this.handleSubmit.bind(this)}
                        underlayColor="#88D4F5">
                        <Text style={styles.buttonText}>Submit</Text>
                    </TouchableHighlight>
                </View>
            </View>
        )
    }
};

Notes.propTypes = {
    userInfo: React.PropTypes.object.isRequired
};

module.exports = Notes;