<commit_before>import React from 'react'
import request from 'request'
import {CSVDownload, CSVLink} from 'react-csv'
import getParameterByName from '../modules/get_parameter_by_name'
import LoadingSpinner from '../shared/loading_indicator.jsx'
import StudentOveriewTable from './student_overview_table.jsx'
import moment from 'moment'

export default class extends React.Component {

	constructor(){
		super()
    this.state = {
      loading: true,
      errors: false,
    }
		this.calculateCountAndAverage = this.calculateCountAndAverage.bind(this)
	}

  componentDidMount(){
    const that = this;
		const classroomId = getParameterByName('classroom_id', window.location.href)
		const studentId = getParameterByName('student_id', window.location.href)
    request.get({
      url: `${process.env.DEFAULT_URL}/api/v1/progress_reports/student_overview_data/${studentId}/${classroomId}`,
    },
    (e, r, body) => {
      const data = JSON.parse(body)
      that.setState({loading: false, errors: body.errors, studentData: data.student_data, reportData: data.report_data, classroomName: data.classroom_name});
    });
  }

	grayAndYellowStat(grayContent,yellowContent, optionalClassName){
		return (<td className={optionalClassName}>
			<div className='gray-text'>{grayContent}</div>
			<div className='yellow-text'>{yellowContent}</div>
		</td>)
	}

	calculateCountAndAverage(){
		let count = 0;
		let cumulativeScore = 0;
		this.state.reportData.forEach((row) => {
			if (row.percentage) {
				count += 1;
				cumulativeScore += parseFloat(row.percentage);
			}
		})
		let average = Math.round((cumulativeScore / count) * 100) + '%'
		return {count, average}
	}

	studentOverviewSection(){
		let countAndAverage
		if (this.state.reportData) {
			countAndAverage = this.calculateCountAndAverage()
		}
		return (
		 <table className='overview-header-table'>
			 <tbody>
				 <tr className='top'>
					 <td className='student-name'>
						 {this.state.studentData.name}
					 </td>
					 {this.grayAndYellowStat('Class', this.state.classroomName)}
					 <td className='csv-link'><CSVLink data={this.state.reportData} target="_blank"><button className='btn button-green'>Download Report</button></CSVLink></td>
				 </tr>
				 <tr className='bottom'>
					 {this.grayAndYellowStat('Overall Score:', countAndAverage.average || '--')}
					 {this.grayAndYellowStat('Activities Completed:', countAndAverage.count || '--')}
					 {this.grayAndYellowStat('Last Active:', this.state.studentData.last_active || '--', 'last-active' )}
				 </tr>
			 </tbody>
		</table>)
	}

	render() {
    let errors<commit_msg>show last active date on student overview<commit_after>import React from 'react'
import request from 'request'
import {CSVDownload, CSVLink} from 'react-csv'
import getParameterByName from '../modules/get_parameter_by_name'
import LoadingSpinner from '../shared/loading_indicator.jsx'
import StudentOveriewTable from './student_overview_table.jsx'
import moment from 'moment'

export default class extends React.Component {

	constructor(){
		super()
    this.state = {
      loading: true,
      errors: false,
    }
		this.calculateCountAndAverage = this.calculateCountAndAverage.bind(this)
	}

  componentDidMount(){
    const that = this;
		const classroomId = getParameterByName('classroom_id', window.location.href)
		const studentId = getParameterByName('student_id', window.location.href)
    request.get({
      url: `${process.env.DEFAULT_URL}/api/v1/progress_reports/student_overview_data/${studentId}/${classroomId}`,
    },
    (e, r, body) => {
      const data = JSON.parse(body)
      that.setState({loading: false, errors: body.errors, studentData: data.student_data, reportData: data.report_data, classroomName: data.classroom_name});
    });
  }

	grayAndYellowStat(grayContent,yellowContent, optionalClassName){
		return (<td className={optionalClassName}>
			<div className='gray-text'>{grayContent}</div>
			<div className='yellow-text'>{yellowContent}</div>
		</td>)
	}

	calculateCountAndAverage(){
		let count = 0;
		let cumulativeScore = 0;
		this.state.reportData.forEach((row) => {
			if (row.percentage) {
				count += 1;
				cumulativeScore += parseFloat(row.percentage);
			}
		})
		let average = Math.round((cumulativeScore / count) * 100) + '%'
		return {count, average}
	}

	studentOverviewSection(){
		let countAndAverage, lastActive
		if (this.state.reportData) {
			countAndAverage = this.calculateCountAndAverage()
		}
		if (this.state.studentData.last_active) {
			lastActive = moment(this.state.studentData.last_active).format("MM/DD/YYYY")
		}
		return (
		 <table className='overview-header-table'>
			 <tbody>
				 <tr className='top'>
					 <td className='student-name'>
						 {this.state.studentData.name}
					 </td>
					 {this.grayAndYellowStat('Class', this.state.classroomName)}
					 <td className='csv-link'><CSVLink data={this.state.reportData} target="_blank"><button className='btn button-green'>Download Report</button></CSVLink></td>
				 </tr>
				 <tr className='bottom'>
					 {this.grayAndYellowStat('Overall Score:', countAndAverage.average || '--')}
					 {this.grayAndYellowStat('Activities Completed:', countAndAverage.count || '--')}
					 {this.grayAndYellowStat('Last Active:', lastActive || '--', 'last-active' )}
				 </tr>
			 </tbody>
		</table>)
	}

	render() {
    let errors
{'fraction_non_alphanumeric': 0.14563106796116504, 'fraction_numerical': 0.0026138909634055266, 'mean_word_length': 4.2009708737864075, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1466780', 'n_tokens_mistral': 1884, 'n_tokens_neox': 1625, 'n_words': 312}