<commit_before>var React = require('react-native');
var ClassStandbyView = require('./classStandbyView.js');
require('./../../utils/userAgent');
var io =require('socket.io-client/socket.io');
var env = require('./../../utils/environment');
var server = env.server + ':' + env.port;

var {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Modal,
  Dimensions,
  TextInput,
  TouchableOpacity,
  Navigator,
} = React;

class NavBar extends React.Component {
  render () {
    return (
      <View style={{flex: 0.2, justifyContent: 'center'}}>
        <TouchableOpacity onPress={this.props.onBack}>
          <Text>Back</Text>
        </TouchableOpacity>
         <View>
          <Text>{this.props.children}</Text>
        </View>
         <TouchableOpacity >
          <Text onPress={this.props.onOut}>Logout</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

class Button extends React.Component {
  
  render () {
    return (
      <TouchableOpacity style={styles.buttons} onPress={this.props.onPress}>
        <Text style={{color: 'white'}}>
          {this.props.children}
        </Text>
      </TouchableOpacity>
    )
  }
};

class JoinClassView extends React.Component {
  constructor(props){
    super(props);
    var {height, width} = Dimensions.get('window');
    this.state = {
      enrolledClasses: [{id: 1, name:'Quick Class'}, {id:2, name:'CS 101'}, {id:3, name: 'CS 201'}],
      userId: this.props.route.userId,
      secretCode: '',
      height: height,
      width: width,
      modalVisible: false
    }
  }

  selectedClass(cls) {
    //perhaps pass class as part of url to socket
    this.socket = io(server, {jsonp: false});
    this.socket.emit('studentConnect', {userId: this.state.userId, classId: cls.id});

    this.props.navigator.push({
      component: ClassStandbyView,
      class: cls,
      userId: this.state.userId,
      socket: this.socket,
      sceneConfig: {
        ...Navigator.SceneConfigs.FloatFromBottom,
        gestures: {}
      }
    });
  }

  selectQuickClass() {
    this.setState({
      modalVisible: true
    })
  }

  handleCodeChange(event) {
    this.setState({
      secretCode: event.nativeEvent.text
    });
  }

  handleModalSubmit() {
    var code = this.state.secretCode;
    this.setState({
      modalVisible: false
    });
    //assuming code is valid:
    this.socket = io(server, {jsonp: false});
    this.socket.emit('studentQuickClassConnect', {userId: this.state.userId, classId: code});
    this.setState({
      secretCode: ''
    });
    var classObj = {
      id: classCode,
      name: 'Quick Class: ' + classCode 
    };
    this.props.navigator.push({
      component: ClassStandbyView,
      class: classObj,
      userId: this.state.userId,
      socket: this.socket,
      sceneConfig: {
        ...Navigator.SceneConfigs.FloatFromBottom,
        gestures: {}
      }
    });
  }

  handleModalCancel() {
    this.setState({
      secretCode: '',
      modalVisible: false
    });
  }

  eachClasses(classes){
    return classes.map((cls, index) => {
      return (
        <View style={styles.buttonsContainer} key={index}>
          <Button onPress={this.selectedClass.bind(this, cls)}>
            <Text>{cls.name}</Text>
          </Button>
        </View>
      )
    })
  }

   previousPage() {
    this.props.navigator.pop();
  }

  logout(){
    this.props.navigator.popToTop();
  }

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', backgroundColor: '#ededed'}}>
        <NavBar onBack={this.previousPage.bind(this)} onOut={this.logout.bind(this)}>Enrollled Classes</NavBar>
          <Text style={styles.textSize}>Enrollled Classes</Text>
        <View>
          <Button onPress={this.selectQuickClass.bind(this)}>
            <Text style={styles.buttonText}> Join Quick Class </Text>
          </Button>
          {this.eachClasses(this.state.enrolledClasses)}
        </View>
        

        <Modal visible={this.state.modalVisible} transparent={true} animated={true}>
          <View style={styles.modal}>
            <View style={{height:this.state.height * 0.6, width:this.state.width * 0.8}}>
              <View style={styles.modalBox}>
                <Text> Enter the secret code from your lecturer: </Text>
                <TextInput
                  autoCapitalize={'none'}
                  autoCorrect={false}
                  maxLength={4}
                  style={styles.userInput}
                  keyboardType='numeric'
                  value={this.state.secretCode}
                  returnKeyType={'done'}
                  onChange={this.handleCodeChange.bind(this)}
                  onSubmitEditing={this.handleModalSubmit.bind(this)}
                />
                <TouchableHighlight onPress={this.handleModalSubmit.bind(this)}>
                  <Text> Enter </Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this.handleModalCancel.bind(this)}>
                  <Text> Cancel </Text>
                </TouchableHighlight>
              </View>
            </View>
          </View>
        </Modal>

      </View>

    )
  }
}

const styles = StyleSheet.create({
  textHeader: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  buttons: {
    height: 70,
    width: 300,
    backgroundColor:'#6FC3D1',
    borderColor: '#6FC3D1',<commit_msg>implement navBar with fully function back and logout button<commit_after>var React = require('react-native');
var ClassStandbyView = require('./classStandbyView.js');
require('./../../utils/userAgent');
var io =require('socket.io-client/socket.io');
var env = require('./../../utils/environment');
var server = env.server + ':' + env.port;
import NavigationBar from 'react-native-navigation-bar';

var {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Modal,
  Dimensions,
  TextInput,
  TouchableOpacity,
  Navigator,
} = React;

//textAlign enum('auto', 'left', 'right', 'center', 'justify')
class NavBar extends React.Component {
  render () {
    return (
      <View style={styles.nav}>
        <TouchableOpacity onPress={this.props.onBack}>
          <Text style={styles.textSize}>Back</Text>
        </TouchableOpacity>
         <View>
          <Text style={styles.textSize}>{this.props.children}</Text>
        </View>
         <TouchableOpacity onPress={this.props.onOut}>
          <Text style={styles.textSize}>Logout</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

class Button extends React.Component {
  
  render () {
    return (
      <TouchableOpacity style={styles.buttons} onPress={this.props.onPress}>
        <Text style={{color: 'white'}}>
          {this.props.children}
        </Text>
      </TouchableOpacity>
    )
  }
};

class JoinClassView extends React.Component {
  constructor(props){
    super(props);
    var {height, width} = Dimensions.get('window');
    this.state = {
      enrolledClasses: [{id: 1, name:'Quick Class'}, {id:2, name:'CS 101'}, {id:3, name: 'CS 201'}],
      userId: this.props.route.userId,
      secretCode: '',
      height: height,
      width: width,
      modalVisible: false
    }
  }

  selectedClass(cls) {
    //perhaps pass class as part of url to socket
    this.socket = io(server, {jsonp: false});
    this.socket.emit('studentConnect', {userId: this.state.userId, classId: cls.id});

    this.props.navigator.push({
      component: ClassStandbyView,
      class: cls,
      userId: this.state.userId,
      socket: this.socket,
      sceneConfig: {
        ...Navigator.SceneConfigs.FloatFromBottom,
        gestures: {}
      }
    });
  }

  selectQuickClass() {
    this.setState({
      modalVisible: true
    })
  }

  handleCodeChange(event) {
    this.setState({
      secretCode: event.nativeEvent.text
    });
  }

  handleModalSubmit() {
    var code = this.state.secretCode;
    this.setState({
      modalVisible: false
    });
    //assuming code is valid:
    this.socket = io(server, {jsonp: false});
    this.socket.emit('studentQuickClassConnect', {userId: this.state.userId, classId: code});
    this.setState({
      secretCode: ''
    });
    var classObj = {
      id: classCode,
      name: 'Quick Class: ' + classCode 
    };
    this.props.navigator.push({
      component: ClassStandbyView,
      class: classObj,
      userId: this.state.userId,
      socket: this.socket,
      sceneConfig: {
        ...Navigator.SceneConfigs.FloatFromBottom,
        gestures: {}
      }
    });
  }

  handleModalCancel() {
    this.setState({
      secretCode: '',
      modalVisible: false
    });
  }

  eachClasses(classes){
    return classes.map((cls, index) => {
      return (
        <View style={styles.buttonsContainer} key={index}>
          <Button onPress={this.selectedClass.bind(this, cls)}>
            <Text>{cls.name}</Text>
          </Button>
        </View>
      )
    })
  }

   previousPage() {
    this.props.navigator.pop();
  }

  logout(){
    this.props.navigator.popToTop();
  }

  render() {
    return (
      <View>
        <View>
          <NavBar onBack={this.previousPage.bind(this)} onOut={this.logout.bind(this)}>Enrollled Classes</NavBar>
        </View>
        <View>
          <Button onPress={this.selectQuickClass.bind(this)}>
            <Text style={styles.buttonText}> Join Quick Class </Text>
          </Button>
          {this.eachClasses(this.state.enrolledClasses)}
        </View>
        

        <Modal visible={this.state.modalVisible} transparent={true} animated={true}>
          <View style={styles.modal}>
            <View style={{height:this.state.height * 0.6, width:this.state.width * 0.8}}>
              <View style={styles.modalBox}>
                <Text> Enter the secret code from your lecturer: </Text>
                <TextInput
                  autoCapitalize={'none'}
                  autoCorrect={false}
                  maxLength={4}
                  style={styles.userInput}
                  keyboardType='numeric'
                  value={this.state.secretCode}
                  returnKeyType={'done'}
                  onChange={this.handleCodeChange.bind(this)}
                  onSubmitEditing={this.handleModalSubmit.bind(this)}
                />
                <TouchableHighlight onPress={this.handleModalSubmit.bind(this)}>
                  <Text> Enter </Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this.handleModalCancel.bind(this)}>
                  <Text> Cancel </Text>
                </TouchableHighlight>
              </View>
            </View>
          </View>
        </Modal>

      </View>

    )
  }
}

const styles = StyleSheet.create({
  nav: {
    flex: 0.2,
    marginTop: 20,
    height: 40,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#59CA7C',
  },
  textHeader: {
    flex: 0.9,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  buttons: {
    height: 70,
    width: 300,
    backgroundColor:'#6FC3D1',
    borderColor: '#6FC3D1',
{'fraction_non_alphanumeric': 0.14418144181441814, 'fraction_numerical': 0.006030060300603006, 'mean_word_length': 2.204152249134948, 'pattern_counts': {'":': 0, '<': 113, '<?xml version=': 0, '>': 115, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3948058', 'n_tokens_mistral': 3424, 'n_tokens_neox': 3348, 'n_words': 621}