Progress tab: Initial work #19881
Progress tab: Initial work #19881
Conversation
| import React, { Component, PropTypes } from 'react'; | ||
| 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.
| * 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.
| @@ -4,90 +4,92 @@ theme: none | |||
| content-type: text/ng-template | |||
| --- | |||
|
|
|||
| %link(rel='stylesheet' type='text/css' href='/shared/css/teacher-announcement.css') | |||
There was a problem hiding this comment.
most of the changes here are whitespace only
|
There's still more cleanup to be done here (evidenced in part by some remaining TODOs), but this felt like an okay stopping point to get some of this committed at least. |
|
👀 |
| return; | ||
| } | ||
|
|
||
| // The below is not run if our experiment is not enabled |
There was a problem hiding this comment.
Let's be more specific about the experiment here. There are a few going at a time in teacher dashboard.
| scriptId={scriptId} | ||
| onChange={this.onChangeScript} | ||
| /> | ||
| {!levelDataInitialized && <div>Loading...</div>} |
There was a problem hiding this comment.
todo: this is the spinner we normally use
<FontAwesome icon="spinner" className="fa-pulse fa-3x"/>
| students: PropTypes.arrayOf(PropTypes.shape({ | ||
| id: PropTypes.number.isRequired, | ||
| name: PropTypes.string.isRequired, | ||
| })).isRequired |
There was a problem hiding this comment.
it's possible this array is empty - will that still satisfy isRequired?
| "icon": "fa-check-square-o", | ||
| "is_concept_level": false, | ||
| "title": 1, | ||
| "url": "http://localhost-studio.code.org:3000/s/csp1/lockable/1/puzzle/1/page/1", |
There was a problem hiding this comment.
does it make sense to do a relative or prod url here?
There was a problem hiding this comment.
I don't think it really matters. It's not really designed for clicking through in storybook. Mostly I just wanted the story so that we have at least some test coverage.
| %link(rel='stylesheet' type='text/css' href='/shared/css/teacher-announcement.css') | ||
| #section-progress-react{'ng-init' => '$emit("section-progress-rendered");', 'ng-show' => 'react_progress'} | ||
| #section-progress-angular{'ng-hide' => 'react_progress'} | ||
| %link{:rel => 'stylesheet', :type => 'text/css', :href => '/shared/css/teacher-announcement.css'} |
There was a problem hiding this comment.
are links meant to be nested like this?
There was a problem hiding this comment.
Good question. It appeared to work for me, but it might be safer to leave the stylesheet outside of the div.
| @@ -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
This is some initial work towards getting the progress tab using React
It is behind the flag
sectionProgressRedesignand should result in no changes if you don't have the flag enabled.