<commit_before>var React = require('react-native');
var FeedbackView = require('./display_feedback/feedbackView');
var api = require('./../../utils/api');
var NavBar = require('./../shared/navbar');
var Button = require('./../shared/button');

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

class RequestFeedbackView extends React.Component {
  constructor(props) {
    super(props);
    var {height, width} = Dimensions.get('window');
    this.state = {
      lessonId: this.props.route.lessonId,
      classId: this.props.route.classId,
      socket: this.props.route.socket,
      modal: false,
      height: height,
      width: width,
      feedbackOptions: [
        {
          id: 1,
          name: 'Thumbs Check',
          /*options:{for preset answers?}*/
        },
        {
          id: 2,
          name: 'Multiple Choice'
        }
      ],
      numberOfStudentHands: 0,
      raisedHandList: [{student:'A', active: true},{student:'B', active: true},{student:'C', active: true}],
      count: 0,
    };
    //populate feedbackOptions with anything custom from lesson
    this.state.socket.on('studentRaisedHand', function(data){
      var numberOfStudentHands = this.state.numberOfStudentHands + 1;
      var raisedHandList = this.state.raisedHandList.slice();
      raisedHandList.push(data.user.uid);
      this.setState({
        numberOfStudentHands: numberOfStudentHands,
        raisedHandList: raisedHandList
      });
    }.bind(this))

  }

  clickRaisedHand() {
    this.setState({
      modal: !this.state.modal,
    })
  }

  dismissClass() {
    // emit socket dismissClass
    this.state.socket.emit('dismiss');
    // if quickClass, need to disconnect from socket
    if(this.state.lessonId = 'Quick Class') {
      this.state.socket.disconnect();
    }
    this.props.navigator.pop();
  }

  beforeLogout() {
    this.state.socket.emit('teacherLoggingOut');
  }

  listStudent(list) {
    if(list.length === 0) {
      return (
        <Text>No one raised hand yet</Text>
      )
    }
    return list.map((student, index) => {
      if(!this.state.modal && this.state.count > 0 && this.state.count % 2 === 0) {
        student.active = false
      }
      if(student.active){
        return (
          <View key={index}>
            <Text style={styles.studentName}>
              {student.student}
            </Text>
          </View>     
        )
      } else {
        return (
          <View key={index}>
            <Text style={styles.studentNameChange}>
              {student.student}
            </Text>
          </View>     
        )
      }
    })
  }

  clearList() {
    this.setState({
      raisedHandList: [],
      numberOfStudentHands: 0
    })
  }

  callOnStudent() {
    var studentsObj = this.props.route.getActiveStudents();
    var keys = Object.keys(studentsObj);
    var index = Math.floor(Math.random() * keys.length);
    var randomKey = keys[index];
    var student = studentsObj[randomKey];
    console.log('Calling on:', student);
    this.state.socket.emit('callOnStudent', student);
    if(student.firstName) {
      Alert.alert('Called on', student.firstName + ' ' + student.lastName);
    } else {
      Alert.alert('Called on student', student.uid);
    }
  }

  selectFeebackOption(feedbackOption) {
    api.startPoll(feedbackOption, this.state.lessonId, this.state.classId)
    .then((response) => {
      if(response.status === 500) {
        console.error('Server error', response);
      } else if(response.status === 201) {
        var pollId = JSON.parse(response._bodyText).pollId;
        this.props.navigator.push({
          component: FeedbackView,
          lessonId: this.state.lessonId,
          pollId: pollId,
          feedbackOption: feedbackOption,
          socket: this.state.socket,
          sceneConfig: {
            ...Navigator.SceneConfigs.FloatFromRight,
            gestures: {}
          }
        });
      } else {
        console.error('Error getting poll data', response);
      }
    })
    .catch((err) => {
      console.error('Error starting poll', err);
    });
  }

  renderFeedbackOptions(feedbackOptions) {
    return feedbackOptions.map((feedbackOption, index) => {
      return (      
        <Button key={index} onPress={this.selectFeebackOption.bind(this, feedbackOption)} text={feedbackOption.name} />
      )
    })
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#ededed'}}> 
        <NavBar navi={this.props.navigator} beforeLogout={this.beforeLogout.bind(this)} 
          onBack={this.dismissClass.bind(this)}>
          Request Feedback
        </NavBar>
        <View style={styles.viewContainer}>
          <Button onPress={this.dismissClass.bind(this)} text={'Dismiss Class'}/>
          {this.renderFeedbackOptions(this.state.feedbackOptions)}
          <Button onPress={this.callOnStudent.bind(this)} text={'Call On Student'}/>
        </View>
        <View style={{flexDirection: 'column', height:60, width: null}}>
          <TouchableOpacity onPress={this.clickRaisedHand.bind(this)} style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'column', backgroundColor:'yellow', height:60, width: 100, alignSelf:'flex-end'}}>
             <Text style={styles.textSize}>
                {this.state.numberOfStudentHands}
              </Text>
          </TouchableOpacity>
        </View>


        <Modal visible={this.state.modal} transparent={true} animated={true}>
          <View style={styles.modal}>
            <View style={{height:this.state.height * 0.8, width:this.state.width * 0.9}}>
              <View style={styles.modalBox}>
                <Text style={styles.textSizeModal}> Raised hand student: </Text>
                {this.listStudent(this.state.raisedHandList)}
              </View>
              <Button onPress={this.clickRaisedHand.bind(this)} text={'Close'}/>
              <Button onPress={this.clearList.bind(this)} text={'clear'}/>
            </View>
          </View>
        </Modal>


      </View>
    )
  }
}

const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  modal: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.8)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalBox: {<commit_msg>question modal and button works on teachers request feedbackview<commit_after>var React = require('react-native');
var FeedbackView = require('./display_feedback/feedbackView');
var api = require('./../../utils/api');
var NavBar = require('./../shared/navbar');
var Button = require('./../shared/button');

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

class RequestFeedbackView extends React.Component {
  constructor(props) {
    super(props);
    var {height, width} = Dimensions.get('window');
    this.state = {
      lessonId: this.props.route.lessonId,
      classId: this.props.route.classId,
      socket: this.props.route.socket,
      modal: false,
      modalQuestion: false,
      height: height,
      width: width,
      feedbackOptions: [
        {
          id: 1,
          name: 'Thumbs Check',
          /*options:{for preset answers?}*/
        },
        {
          id: 2,
          name: 'Multiple Choice'
        }
      ],
      numberOfStudentHands: 0,
      raisedHandList: [{student:'A', active: true},{student:'B', active: true},{student:'C', active: true}],
      count: 0,
    };
    //populate feedbackOptions with anything custom from lesson
    this.state.socket.on('studentRaisedHand', function(data){
      var numberOfStudentHands = this.state.numberOfStudentHands + 1;
      var raisedHandList = this.state.raisedHandList.slice();
      raisedHandList.push(data.user.uid);
      this.setState({
        numberOfStudentHands: numberOfStudentHands,
        raisedHandList: raisedHandList
      });
    }.bind(this))

  }

  clickQuestion() {
    this.setState({
      modalQuestion: !this.state.modalQuestion,
    })
  }

  clickRaisedHand() {
    var count = this.state.count + 1;
    this.setState({
      modal: !this.state.modal,
      count: count,
    })
  }

  dismissClass() {
    // emit socket dismissClass
    this.state.socket.emit('dismiss');
    // if quickClass, need to disconnect from socket
    if(this.state.lessonId = 'Quick Class') {
      this.state.socket.disconnect();
    }
    this.props.navigator.pop();
  }

  beforeLogout() {
    this.state.socket.emit('teacherLoggingOut');
  }

  listStudent(list) {
    if(list.length === 0) {
      return (
        <Text>No one raised hand yet</Text>
      )
    }
    return list.map((student, index) => {
      if(!this.state.modal && this.state.count > 0 && this.state.count % 2 === 0) {
        student.active = false
      }
      if(student.active){
        return (
          <View key={index}>
            <Text style={styles.studentName}>
              {student.student}
            </Text>
          </View>     
        )
      } else {
        return (
          <View key={index}>
            <Text style={styles.studentNameChange}>
              {student.student}
            </Text>
          </View>     
        )
      }
    })
  }

  clearList() {
    this.setState({
      raisedHandList: [],
      numberOfStudentHands: 0
    })
  }

  callOnStudent() {
    var studentsObj = this.props.route.getActiveStudents();
    var keys = Object.keys(studentsObj);
    var index = Math.floor(Math.random() * keys.length);
    var randomKey = keys[index];
    var student = studentsObj[randomKey];
    console.log('Calling on:', student);
    this.state.socket.emit('callOnStudent', student);
    if(student.firstName) {
      Alert.alert('Called on', student.firstName + ' ' + student.lastName);
    } else {
      Alert.alert('Called on student', student.uid);
    }
  }

  selectFeebackOption(feedbackOption) {
    api.startPoll(feedbackOption, this.state.lessonId, this.state.classId)
    .then((response) => {
      if(response.status === 500) {
        console.error('Server error', response);
      } else if(response.status === 201) {
        var pollId = JSON.parse(response._bodyText).pollId;
        this.props.navigator.push({
          component: FeedbackView,
          lessonId: this.state.lessonId,
          pollId: pollId,
          feedbackOption: feedbackOption,
          socket: this.state.socket,
          sceneConfig: {
            ...Navigator.SceneConfigs.FloatFromRight,
            gestures: {}
          }
        });
      } else {
        console.error('Error getting poll data', response);
      }
    })
    .catch((err) => {
      console.error('Error starting poll', err);
    });
  }

  renderFeedbackOptions(feedbackOptions) {
    return feedbackOptions.map((feedbackOption, index) => {
      return (      
        <Button key={index} onPress={this.selectFeebackOption.bind(this, feedbackOption)} text={feedbackOption.name} />
      )
    })
  }
// style={{alignItems: 'center', justifyContent: 'center', backgroundColor:'red', height:60, width: 100, alignSelf:'flex-end'}}
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#ededed'}}> 
        <NavBar navi={this.props.navigator} beforeLogout={this.beforeLogout.bind(this)} 
          onBack={this.dismissClass.bind(this)}>
          Request Feedback
        </NavBar>
        <View style={styles.viewContainer}>
          <Button onPress={this.dismissClass.bind(this)} text={'Dismiss Class'}/>
          {this.renderFeedbackOptions(this.state.feedbackOptions)}
          <Button onPress={this.callOnStudent.bind(this)} text={'Call On Student'}/>
        </View>
          <View style={{flexDirection: 'row', height:60, width: null, alignSelf:'flex-end'}}>
          <TouchableOpacity onPress={this.clickQuestion.bind(this)}style={{alignItems: 'center', justifyContent: 'center', backgroundColor:'yellow', height: 60, width: 100}}>
              <Text style={styles.textSize}>
                Q: 0
              </Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.clickRaisedHand.bind(this)} style={{alignItems: 'center', justifyContent: 'center', backgroundColor:'red', height: 60, width: 100}}>
              <Text style={styles.textSize}>
                R : {this.state.numberOfStudentHands}
              </Text>
          </TouchableOpacity>
        </View>


        <Modal visible={this.state.modal} transparent={true} animated={true}>
          <View style={styles.modal}>
            <View style={{height:this.state.height * 0.8, width:this.state.width * 0.9}}>
              <View style={styles.modalBox}>
                <Text style={styles.textSizeModal}> Raised hand student: </Text>
                {this.listStudent(this.state.raisedHandList)}
              </View>
              <Button onPress={this.clickRaisedHand.bind(this)} text={'Close'}/>
              <Button onPress={this.clearList.bind(this)} text={'clear'}/>
            </View>
          </View>
        </Modal>

        <Modal visible={this.state.modalQuestion} transparent={true} animated={true}>
          <View style={styles.modal}>
            <View style={{height:this.state.height * 0.8, width:this.state.width * 0.9}}>
              <View style={styles.modalBox}>
                <Text style={styles.textSizeModal}> Question: </Text>
              </View>
              <Button onPress={this.clickQuestion.bind(this)} text={'Close'}/>
            </View>
          </View>
        </Modal>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  modal: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.8)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalBox: {
{'fraction_non_alphanumeric': 0.14629444523775526, 'fraction_numerical': 0.006283021562187634, 'mean_word_length': 2.3630252100840337, 'pattern_counts': {'":': 0, '<': 92, '<?xml version=': 0, '>': 102, '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': '4370190', 'n_tokens_mistral': 4285, 'n_tokens_neox': 4149, 'n_words': 776}