Progress tab: Initial work #19881
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React, { Component, PropTypes } from 'react'; | ||
|
There was a problem hiding this comment. I just noticed this is a js file not jsx, on purpose? There was a problem hiding this comment. either is fine. I think I usually use .js |
||
| import _ from 'lodash'; | ||
|
|
||
| // TODO: Can/should we share any logic with AssignmentSelector? | ||
|
There was a problem hiding this comment. The answer might be that they're just different. This is a little confusing in that they use slightly difference sources of data for their list of scripts. AssignmentSelector uses a set of assignments that have been slightly processed, to be able to differentiate scripts and courses. In part this involves giving each one an "assignment id". That said, both have the same set of fields used for grouping I believe. |
||
|
|
||
| /** | ||
| * Group our assignments into categories for our dropdown | ||
| */ | ||
| const groupedAssignments = assignments => ( | ||
| _(assignments) | ||
| .values() | ||
| .orderBy(['category_priority', 'category', 'position', 'name']) | ||
| .groupBy('category') | ||
| .value() | ||
| ); | ||
|
|
||
| export default class ScriptSelector extends Component { | ||
| static propTypes = { | ||
| validScripts: PropTypes.arrayOf(PropTypes.shape({ | ||
| // This shape is similar to that used by AssignmentSelector, but in that | ||
| // case they've been semi-processed and given assignIds to diferentiate | ||
| // courses and scripts | ||
| category: PropTypes.string.isRequired, | ||
| category_priority: PropTypes.number.isRequired, | ||
| id: PropTypes.number.isRequired, | ||
| name: PropTypes.string.isRequired, | ||
| position: PropTypes.number, | ||
| })).isRequired, | ||
| scriptId: PropTypes.string, | ||
| onChange: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| render() { | ||
| const { validScripts, scriptId, onChange } = this.props; | ||
|
|
||
| const grouped = groupedAssignments(validScripts); | ||
|
|
||
| return ( | ||
| <div> | ||
| <select | ||
| value={scriptId} | ||
| onChange={event => onChange(event.target.value)} | ||
| > | ||
| <option key="default" value={''}/> | ||
| {Object.keys(grouped).map((groupName, index) => ( | ||
| <optgroup key={index} label={groupName}> | ||
| {grouped[groupName].map((assignment) => ( | ||
| (assignment !== undefined) && | ||
| <option | ||
| key={assignment.id} | ||
| value={assignment.id} | ||
| > | ||
| {assignment.name} | ||
| </option> | ||
| ))} | ||
| </optgroup> | ||
| ))} | ||
| </select> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import React, { PropTypes, Component } from 'react'; | ||
| import ScriptSelector from './ScriptSelector'; | ||
| import { getLevelResult } from '@cdo/apps/code-studio/progressRedux'; | ||
| import SectionScriptProgress from './SectionScriptProgress'; | ||
| import _ from 'lodash'; | ||
|
|
||
| /** | ||
| * Given a particular section, this component owns figuring out which script to | ||
| * show progress for (selected via a dropdown), and querying the server for | ||
| * student progress. Child components then have the responsibility for displaying | ||
| * that progress. | ||
| */ | ||
|
There was a problem hiding this comment. Decided to separate the data gathering component from the UI component for the most part. That said, this component does still include the dropdown. |
||
| export default class SectionProgress extends Component { | ||
| static propTypes = { | ||
| // The section we get directly from angular right now. This gives us a | ||
| // different shape than some other places we use sections. For now, I'm just | ||
| // going to document the parts of section that we use here | ||
| section: PropTypes.shape({ | ||
| id: PropTypes.number.isRequired, | ||
| students: PropTypes.arrayOf(PropTypes.shape({ | ||
| id: PropTypes.number.isRequired, | ||
| name: PropTypes.string.isRequired, | ||
| })).isRequired | ||
| }).isRequired, | ||
| validScripts: PropTypes.arrayOf(PropTypes.shape({ | ||
| category: PropTypes.string.isRequired, | ||
| category_priority: PropTypes.number.isRequired, | ||
| id: PropTypes.number.isRequired, | ||
| name: PropTypes.string.isRequired, | ||
| position: PropTypes.number, | ||
| })).isRequired, | ||
| }; | ||
|
|
||
| state = { | ||
| // TODO: default to what is assigned to section, or at least come up with | ||
| // some heuristic so that we have a default | ||
| scriptId: "112", | ||
| scriptData: null, | ||
| studentLevelProgress: null, | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.loadScript(this.state.scriptId); | ||
| } | ||
|
|
||
| onChangeScript = scriptId => { | ||
| this.setState({ | ||
| scriptId, | ||
| scriptData: null, | ||
| studentLevelProgress: null, | ||
| }); | ||
| this.loadScript(scriptId); | ||
| } | ||
|
|
||
| /** | ||
| * Query the server for script data (info about the levels in the script) and | ||
| * also for user progress on that script | ||
| */ | ||
| loadScript(scriptId) { | ||
| $.getJSON(`/dashboardapi/script_structure/${scriptId}`, scriptData => { | ||
| this.setState({ | ||
| scriptData | ||
| }); | ||
| }); | ||
|
|
||
| $.getJSON(`/dashboardapi/section_level_progress/${this.props.section.id}?script_id=${scriptId}`, dataByStudent => { | ||
| // dataByStudent is an object where the keys are student.id and the values | ||
| // are a map of levelId to status | ||
| let studentLevelProgress = {}; | ||
| Object.keys(dataByStudent).forEach(studentId => { | ||
| studentLevelProgress[studentId] = _.mapValues(dataByStudent[studentId], getLevelResult); | ||
| }); | ||
|
|
||
| this.setState({ | ||
| studentLevelProgress: studentLevelProgress | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| const { section, validScripts } = this.props; | ||
| const { scriptId, scriptData, studentLevelProgress } = this.state; | ||
|
|
||
| let levelDataInitialized = scriptData && studentLevelProgress; | ||
|
|
||
| return ( | ||
| <div> | ||
| <ScriptSelector | ||
| validScripts={validScripts} | ||
| scriptId={scriptId} | ||
| onChange={this.onChangeScript} | ||
| /> | ||
| {!levelDataInitialized && <div>Loading...</div>} | ||
|
There was a problem hiding this comment. todo: this is the spinner we normally use |
||
| {levelDataInitialized && | ||
| <SectionScriptProgress | ||
| section={section} | ||
| scriptData={scriptData} | ||
| studentLevelProgress={studentLevelProgress} | ||
| /> | ||
| } | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's be more specific about the experiment here. There are a few going at a time in teacher dashboard.