Skip to content

Commit

Permalink
WildCam Lab Classrooms - 2018 Rebuild - part 4 (#125)
Browse files Browse the repository at this point in the history 
* IMPORTANT - EduAPI's put() command now requires a different data structure

* Fix issue where Edit Assignment didn't show edited values

* Clasifications Count is now a number input, Map shows 'Select Subjects' button more clearly now

* AssignmentForm data is saved between subject selection steps

* Changed position of '' 'get Selected Subjects' code

* Fixed minor issue where React kept complaining that DarienProgram was trying to setState in a render (it wasn't, but a refactor removed the error message anyway.)

* Assignment filters are remembered when choosing new Subjects

* SubjectList now renders the filters in a better format
  • Loading branch information
@shaunanoordin
shaunanoordin authored Jun 6, 2018
1 parent 51a4d88 commit 7543c2e
Show file tree
Hide file tree
Showing 12 changed files with 163 additions and 70 deletions.
2 changes: 1 addition & 1 deletion src/ducks/classrooms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ Effect('createClassroom', (data) => {
// Hmm.... Effects can only take one argument?
Effect('updateClassroom', (data) => {
Actions.classrooms.setStatus(CLASSROOMS_STATUS.UPDATING);
return put(`/teachers/classrooms/${data.id}`, data.payload)
return put(`/teachers/classrooms/${data.id}`, { data: { attributes: data.payload } } )
.then((response) => {
if (!response) { throw 'ERROR (ducks/classrooms/updateClassroom): No response'; }
if (response.ok) {
Expand Down
2 changes: 1 addition & 1 deletion src/ducks/programs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ Effect('createProgram', (data) => {

Effect('updateProgram', (data) => {
Actions.programs.setStatus(PROGRAMS_STATUS.UPDATING);
return put(`/programs/${data.id}`, data.payload)
return put(`/programs/${data.id}`, { data: { attributes: data.payload } })
.then((response) => {
if (!response) { throw 'ERROR (ducks/programs/updateProgram): No response'; }
if (response.ok) {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/edu-api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function put(endpoint, data) {
return superagent.put(`${config.root}${endpoint}`)
.set('Content-Type', 'application/json')
.set('Authorization', apiClient.headers.Authorization)
.send({ data: { attributes: data } })
.send(data)
.then(response => response);
}

Expand Down
106 changes: 84 additions & 22 deletions src/modules/wildcam-classrooms/components/AssignmentForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import Label from 'grommet/components/Label';
import List from 'grommet/components/List';
import ListItem from 'grommet/components/ListItem';
import TextInput from 'grommet/components/TextInput';
import NumberInput from 'grommet/components/NumberInput';

import LinkPreviousIcon from 'grommet/components/icons/base/LinkPrevious';
import LinkNextIcon from 'grommet/components/icons/base/LinkNext';
Expand Down Expand Up @@ -76,7 +77,12 @@ const TEXT = {
},
ASSIGNMENT_FORM: {
NAME: 'Assignment name',
DESCRIPTION: 'Instructions for Students',
DESCRIPTION: 'Instructions for students',
CLASSIFICATIONS_TARGET: 'Number of subjects each student needs to classify',
DUEDATE: 'Due date',
},
ASSIGNMENT_FORM_PLACEHOLDERS: {
DUEDATE: 'e.g. 2020-12-31',
},
ERROR: {
GENERAL: 'Something went wrong',
Expand All @@ -91,6 +97,8 @@ const TEXT = {
const INITIAL_FORM_DATA = {
name: '',
description: '',
classifications_target: '',
duedate: '',
};

/*
Expand All @@ -103,6 +111,7 @@ class AssignmentForm extends React.Component {
this.state = {
view: VIEWS.CREATE_NEW,
form: INITIAL_FORM_DATA, //Contains basic Assignment data: name, description, etc.
formInitialised: false, //Has initialiseForm() already been run?
filters: {},
subjects: [],
students: [],
Expand All @@ -127,7 +136,6 @@ class AssignmentForm extends React.Component {
.../classrooms/123/assignments/456 - edit assignment 456 (i.e. assignment_id=456 supplied.)
*/
initialise(props = this.props) {
console.log('+++ initialise: ');
const state = this.state;

const classroom_id = (props.match && props.match.params)
Expand All @@ -145,6 +153,7 @@ class AssignmentForm extends React.Component {

//Data store update + Redundancy Check (prevent infinite loop, only trigger once)
if (props.selectedClassroom !== selectedClassroom) {
//this.setState({ formInitialised: false });
Actions.wildcamClassrooms.setSelectedClassroom(selectedClassroom);
}

Expand All @@ -155,24 +164,13 @@ class AssignmentForm extends React.Component {
} else {
this.initialise_partTwo(props, classroom_id, assignment_id, props.assignmentsList);
}

//Check the connection to WildCam Maps: if the user recently selected
//Subjects for the Assignment, respect it.
console.log('+++ props.wccwcmSelectedSubjects: ', props.wccwcmSelectedSubjects);
if (props.wccwcmSelectedSubjects) {
this.setState({
subjects: props.wccwcmSelectedSubjects,
filters: props.wccwcmSelectedFilters,
});
Actions.wildcamMap.resetWccWcmAssignmentData();
}
}

initialise_partTwo(props, classroom_id, assignment_id, assignmentsList) {
//Create a new assignment
if (!assignment_id) { //Note: there should never be assignment_id === 0 or ''
this.setState({ view: VIEWS.CREATE_NEW });
this.initialiseForm(null);
this.initialiseForm(props, null);

//Edit an existing assignment... if we can find it.
} else {
Expand All @@ -188,7 +186,6 @@ class AssignmentForm extends React.Component {

//Also extract initial subjects and filters used by the Assignment
if (!this.state.subjects || this.state.subjects.length === 0) {
console.log('+++ selectedAssignment: ', selectedAssignment);
const newSubjects = (selectedAssignment.metadata && selectedAssignment.metadata.subjects)
? selectedAssignment.metadata.subjects.map((subject) => {
return {
Expand All @@ -208,7 +205,7 @@ class AssignmentForm extends React.Component {

//View update
this.setState({ view: VIEWS.EDIT_EXISTING });
this.initialiseForm(selectedAssignment);
this.initialiseForm(props, selectedAssignment);

//Otherwise, uh oh.
} else {
Expand All @@ -223,28 +220,65 @@ class AssignmentForm extends React.Component {

/* Initialises the classroom form.
*/
initialiseForm(selectedAssignment) {
initialiseForm(props, selectedAssignment) {
//Only run this once per page load, thank you.
if (this.state.formInitialised) return;
this.setState({ formInitialised: true });

if (!selectedAssignment) {
this.setState({ form: INITIAL_FORM_DATA });
} else {
const originalForm = INITIAL_FORM_DATA;
const updatedForm = {};
Object.keys(originalForm).map((key) => {
updatedForm[key] = (selectedAssignment && selectedAssignment[key])
? selectedAssignment[key]
: originalForm[key];
//The structure for Assignments is weird.
if (selectedAssignment && selectedAssignment.metadata && selectedAssignment.metadata[key]) {
updatedForm[key] = selectedAssignment.metadata[key];
} else if (selectedAssignment && selectedAssignment.attributes && selectedAssignment.attributes[key]) {
updatedForm[key] = selectedAssignment.attributes[key];
} else {
updatedForm[key] = originalForm[key];
}
});
this.setState({ form: updatedForm });
}

//WildCam Map Selected Subjects:
//Check the connection to WildCam Maps to see if the user recently selected
//Subjects for the Assignment.
if (props.wccwcmSelectedSubjects && props.wccwcmSavedAssignmentState) {
this.setState({
subjects: props.wccwcmSelectedSubjects,
filters: props.wccwcmSelectedFilters,
form: {
...this.state.form,
...props.wccwcmSavedAssignmentState,
classifications_target: props.wccwcmSelectedSubjects.length,
}
});
Actions.wildcamMap.resetWccWcmAssignmentData();
}
}

// ----------------------------------------------------------------

updateForm(e) {
let val = e.target.value;

//Special case: classificatons_target
//The number of Classfications a Student needs to do cannot exceed the amount of Subjects selected.
if (e.target.id === 'classifications_target') {
let maxVal = (this.state.subjects) ? this.state.subjects.length : 0;
val = parseInt(val);
if (isNaN(val)) val = 0;
val = Math.min(maxVal, val);
val = Math.max(0, val);
}

this.setState({
form: {
...this.state.form,
[e.target.id]: e.target.value
[e.target.id]: val,
}
});

Expand Down Expand Up @@ -305,7 +339,7 @@ class AssignmentForm extends React.Component {
assignmentData: state.form,
filters,
subjects,
students: state.students,
students: state.students,
}).then(() => {
//Message
Actions.wildcamClassrooms.setToast({ message: TEXT.SUCCESS.ASSIGNMENT_EDITED, status: 'ok' });
Expand Down Expand Up @@ -428,6 +462,21 @@ class AssignmentForm extends React.Component {
</FormField>
</fieldset>

<fieldset>
<FormField htmlFor="name" label={TEXT.ASSIGNMENT_FORM.DUEDATE}>
<TextInput
id="duedate"
value={this.state.form.duedate}
onDOMChange={this.updateForm.bind(this)}
placeHolder={TEXT.ASSIGNMENT_FORM_PLACEHOLDERS.DUEDATE}
/>
</FormField>
</fieldset>

{
//TODO: add (optional) Assignment link for students?
}

<SubjectsList
history={props.history}
location={props.location}
Expand All @@ -437,8 +486,21 @@ class AssignmentForm extends React.Component {
filters={state.filters}
subjects={state.subjects}
wccwcmMapPath={props.wccwcmMapPath}
assignmentStateForSaving={state.form}
/>

{(state.subjects && state.subjects.length > 0) && (
<fieldset>
<FormField htmlFor="name" label={TEXT.ASSIGNMENT_FORM.CLASSIFICATIONS_TARGET}>
<NumberInput
id="classifications_target"
value={this.state.form.classifications_target || 0}
onChange={this.updateForm.bind(this)}
/>
</FormField>
</fieldset>
)}

<StudentsList
selectedClassroom={props.selectedClassroom}
selectedAssignment={props.selectedAssignment}
Expand Down
2 changes: 1 addition & 1 deletion src/modules/wildcam-classrooms/components/StudentsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ class StudentsList extends React.Component {
return (
<Box
className="students-list"
margin="small"
margin={{ horizontal: "none", vertical: "small" }}
pad="small"
>
<Heading tag="h3">{TEXT.HEADINGS.STUDENTS}</Heading>
Expand Down
20 changes: 17 additions & 3 deletions src/modules/wildcam-classrooms/components/SubjectsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ class SubjectsList extends React.Component {
return (
<Box
className="subjects-list"
margin="small"
margin={{ horizontal: "none", vertical: "small" }}
pad="small"
>
<Heading tag="h3">{TEXT.HEADINGS.SUBJECTS}</Heading>
Expand All @@ -124,8 +124,10 @@ class SubjectsList extends React.Component {
className="button"
label={TEXT.ACTIONS.SELECT_SUBJECTS}
onClick={() => {
//Save the return path
//Save the return path, assignment state, and the initial filters to be used by the map.
Actions.wildcamMap.setWccWcmAssignmentPath(props.location.pathname);
Actions.wildcamMap.setWccWcmSavedAssignmentState(props.assignmentStateForSaving);
if (props.filters) Actions.wildcamMap.setFilters(props.filters);

//Transition to: WildCam Map
props.history.push(props.wccwcmMapPath);
Expand All @@ -152,7 +154,17 @@ class SubjectsList extends React.Component {
return Object.keys(props.filters).map((key, index) => {
const val = props.filters[key];
return (
<div key={`subjects-list-filter_${index}`}>{key} : {val}</div>
<div key={`subjects-list-filter_${index}`}>{key} : {(()=>{
if (Array.isArray(val, index)) {
let output = '';
val.map((v) => {
output += ((output !== '') ? ', ' : '' ) + v;
});
return output;
} else {
return val;
}
})()}</div>
);
});
})()}
Expand Down Expand Up @@ -198,6 +210,7 @@ class SubjectsList extends React.Component {
SubjectsList.defaultProps = {
filters: null,
subjects: [],
assignmentStateForSaving: null,
// ----------------
...WILDCAMCLASSROOMS_INITIAL_STATE,
...WILDCAMMAP_INITIAL_STATE,
Expand All @@ -206,6 +219,7 @@ SubjectsList.defaultProps = {
SubjectsList.propTypes = {
filters: PropTypes.object,
subjects: PropTypes.array,
assignmentStateForSaving: PropTypes.object,
// ----------------
...WILDCAMCLASSROOMS_PROPTYPES,
...WILDCAMMAP_PROPTYPES,
Expand Down
10 changes: 0 additions & 10 deletions src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,16 +106,6 @@ class WildCamClassroom extends React.Component {
/>
<Route path="*" component={Status404} />
</Switch>

<Box pad="medium">
<h4>Debug Panel</h4>
<Box>
Classrooms Status: [{props.classroomsStatus}] <br/>
Classrooms Count: [{props.classroomsList && props.classroomsList.length}] <br/>
Assignments Status: [{props.assignmentsStatus}] <br/>
Assignments Count: [{props.assignmentsList && props.assignmentsList.length}] <br/>
</Box>
</Box>

</Box>
);
Expand Down
4 changes: 2 additions & 2 deletions src/modules/wildcam-classrooms/ducks/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ Effect('wcc_teachers_editClassroom', ({ selectedClassroom, classroomData }) => {

Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING);

return put(`/teachers/classrooms/${selectedClassroom.id}`, classroomData) //NOTE: the put() function requires a different argument format than post().
return put(`/teachers/classrooms/${selectedClassroom.id}`, { data: { attributes: classroomData } })
.then((response) => {
if (!response) { throw 'ERROR (ducks/wildcam-classrooms/ducks/wcc_teachers_editClassrooms): No response'; }
if (response.ok) {
Expand Down Expand Up @@ -676,7 +676,7 @@ Effect('wcc_editAssignment', ({ selectedAssignment, assignmentData, students = [
}
};

return put(`/assignments/${selectedAssignment.id}`, assignmentData) //NOTE: the put() function requires a different argument format than post().
return put(`/assignments/${selectedAssignment.id}`, requestBody)
.then((response) => {
if (!response) { throw 'ERROR (ducks/wildcam-classrooms/ducks/wcc_teachers_editClassrooms): No response'; }
if (response.ok) {
Expand Down
9 changes: 6 additions & 3 deletions src/modules/wildcam-map/containers/MapControls.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,10 @@ class MapControls extends React.Component {

return (
<Box className="map-controls">
<Accordion openMulti={true}>
<Accordion
openMulti={true}
active={(this.props.wccwcmAssignmentPath) ? [0] : null}
>
<AccordionPanel heading={statusMessage} className="map-controls-status">
<SuperDownloadButton
fileNameBase="wildcam-"
Expand All @@ -87,7 +90,7 @@ class MapControls extends React.Component {
direction="row"
pad="small"
colorIndex="light-2"
margin="small"
margin={{ horizontal: "small", vertical: "none" }}
align="center"
alignContent="between"
separator="horizontal"
Expand All @@ -110,7 +113,7 @@ class MapControls extends React.Component {
className="wccwcm-connector"
direction="column"
pad="small"
margin="small"
margin={{ horizontal: "small", vertical: "none" }}
align="center"
alignContent="between"
>
Expand Down
Loading

0 comments on commit 7543c2e

Please sign in to comment.