ChatBite

'use strict';

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

import Firebase from 'firebase';



class Chat extends Component {
  constructor() {
    super();
    this.state = {
      chatSnapshot: null,
    };
  }
  componentWillMount() {
    this._ref = new Firebase("https://nicholasstephan.firebaseio.com/chats/" + this.props.id + "/messages");
    this._ref.on('value', (snapshot) => {
      this.setState({chatSnapshot:snapshot});
    });
  }
  componentWillUnmount() {
    this._ref.off();
  }
  render() {
    let messages = [];

    if(this.state.chatSnapshot) {
      this.state.chatSnapshot.forEach((messageSnapshot) => {
        let id = messageSnapshot.key();
        let value = messageSnapshot.val();
        messages.push(
          <View
            key={id}
            style={{
              padding: 16,
              backgroundColor: 'lightgray',
              borderRadius: 4,
              margin: 8,
            }}>

            <Text
              style={{
                fontSize: 16,
              }}>
              {value.text}
            </Text>

          </View>
        );
      });
    }


    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'white',
        }}>

        <TouchableOpacity
          style={{
            flex: 0,
            padding: 16,
            paddingTop: 36,
            backgroundColor: 'slategray',
          }}
          onPress={() => this.props.navigator.pop()}>

          <Text
            style={{
              color: 'white'
            }}>
             Back
          </Text>

        </TouchableOpacity>


        <ScrollView
          style={{
            flex: 1,
          }}>

          {messages}

        </ScrollView>

        <View
          style={{
            flex: 0,
            height: 60,
            backgroundColor: 'slategray',
          }}>

        </View>

      </View>
    );
  }
}


class Chats extends Component {
  constructor() {
    super();
    this.state = {
      chats: [],
    };
  }
  componentWillMount() {
    fetch("https://nicholasstephan.firebaseio.com/chats.json").then(
      (result) => {
        let chats = JSON.parse(result._bodyText);
        this.setState({chats});
      },
      (err) => {
        console.error("Failed to get chats from firebase.");
      }
    );
  }
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor:'white',
        }}>

        <View
          style={{
            flex: 0,
            padding: 16,
            paddingTop: 36,
            backgroundColor: 'slategray',
          }}>

          <Text
            style={{
              color: 'white',
              textAlign: 'center',
            }}>
             Chat
          </Text>

        </View>

        {this.state.chats.map((chat, id) => (
          <TouchableOpacity
            key={id}
            style={{
              padding:20,
              backgroundColor: 'silver',
              borderBottomWidth: 1,
              borderBottomColor: 'white',
            }}
            onPress={()=> {
              this.props.navigator.push({
                component: Chat,
                props: {
                  id: id
                }
              });
            }}>
            <Text style={{fontSize:16}}>{chat.name}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }

}


class ChatBite extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{component:Chats}}
        renderScene={(route, navigator)=> <route.component navigator={navigator} {...route.props}/>}
        sceneStyle={{
          flex: 1,
        }}
        style={{
          backgroundColor: 'black',
        }}
      />
    );
  }


}

AppRegistry.registerComponent('ChatBite', () => ChatBite);