From fb7da3aff524abde015cbb67f022057a2cfd657a Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 5 Jun 2018 15:56:54 +0100 Subject: [PATCH 1/8] IMPORTANT - EduAPI's put() command now requires a different data structure --- src/ducks/classrooms.js | 2 +- src/ducks/programs.js | 2 +- src/lib/edu-api.js | 2 +- .../components/AssignmentForm.jsx | 11 +++++++---- src/modules/wildcam-classrooms/ducks/index.js | 16 ++++++++++++++-- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/ducks/classrooms.js b/src/ducks/classrooms.js index 2ef9ebf7..97d69c35 100644 --- a/src/ducks/classrooms.js +++ b/src/ducks/classrooms.js @@ -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) { diff --git a/src/ducks/programs.js b/src/ducks/programs.js index e22d7b6a..6bd3cbcf 100644 --- a/src/ducks/programs.js +++ b/src/ducks/programs.js @@ -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) { diff --git a/src/lib/edu-api.js b/src/lib/edu-api.js index 32b14630..c4318e0c 100644 --- a/src/lib/edu-api.js +++ b/src/lib/edu-api.js @@ -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); } diff --git a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx index 8c00facd..2572b4d0 100644 --- a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx +++ b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx @@ -127,7 +127,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) @@ -158,7 +157,6 @@ class AssignmentForm extends React.Component { //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, @@ -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 { @@ -254,6 +251,8 @@ class AssignmentForm extends React.Component { } submitForm(e) { + console.log('+++ AssignmentForm.submitForm() ', this.props); + const props = this.props; const state = this.state; @@ -264,6 +263,8 @@ class AssignmentForm extends React.Component { if (!props.selectedProgram) return; if (!props.selectedClassroom) return; + console.log('+++ AssignmentForm.submitForm() A'); + //Submit Form: create new assignment if (state.view === VIEWS.CREATE_NEW) { const filters = (state.filters) ? state.filters : {}; @@ -295,6 +296,8 @@ class AssignmentForm extends React.Component { //Submit Form: update existing classroom } else if (state.view === VIEWS.EDIT_EXISTING) { + console.log('+++ AssignmentForm.submitForm() B'); + const filters = (state.filters) ? state.filters : {}; const subjects = (state.subjects) ? state.subjects.map(sub => sub.subject_id) @@ -305,7 +308,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' }); diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index ac96d45c..8e529556 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -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) { @@ -647,10 +647,18 @@ Effect('wcc_teachers_createAssignment', ({ selectedProgram, selectedClassroom, a */ Effect('wcc_editAssignment', ({ selectedAssignment, assignmentData, students = [], filters = {}, subjects = [] }) => { //Sanity check + console.log('+++ wcc_editAssignment A: ', selectedAssignment, assignmentData); + + console.log('+++ wcc_editAssignment B: ', (!selectedAssignment || !assignmentData)); + if (!selectedAssignment || !assignmentData) return; + console.log('+++ wcc_editAssignment C'); + Actions.wildcamClassrooms.setAssignmentsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING); + console.log('+++ wcc_editAssignment D'); + const requestBody = { data: { attributes: { @@ -676,8 +684,12 @@ Effect('wcc_editAssignment', ({ selectedAssignment, assignmentData, students = [ } }; - return put(`/assignments/${selectedAssignment.id}`, assignmentData) //NOTE: the put() function requires a different argument format than post(). + console.log('+++ wcc_editAssignment E'); + + return put(`/assignments/${selectedAssignment.id}`, requestBody) .then((response) => { + console.log('+++ wcc_editAssignment F: ', response); + if (!response) { throw 'ERROR (ducks/wildcam-classrooms/ducks/wcc_teachers_editClassrooms): No response'; } if (response.ok) { Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SUCCESS); From 1cfff29f0dae35901360d6de78bbda9797c91de1 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 6 Jun 2018 14:08:21 +0100 Subject: [PATCH 2/8] Fix issue where Edit Assignment didn't show edited values --- .../components/AssignmentForm.jsx | 40 +++++++++++++++++-- .../containers/WildCamClassrooms.jsx | 10 ----- src/modules/wildcam-classrooms/ducks/index.js | 12 ------ 3 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx index 2572b4d0..75a93f11 100644 --- a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx +++ b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx @@ -76,7 +76,9 @@ const TEXT = { }, ASSIGNMENT_FORM: { NAME: 'Assignment name', - DESCRIPTION: 'Instructions for Students', + DESCRIPTION: 'Instructions for students', + CLASSIFICATIONS_TARGET: 'Classifications target', + DUEDATE: 'Due date', }, ERROR: { GENERAL: 'Something went wrong', @@ -91,6 +93,8 @@ const TEXT = { const INITIAL_FORM_DATA = { name: '', description: '', + classifications_target: '', + duedate: '', }; /* @@ -227,9 +231,16 @@ class AssignmentForm extends React.Component { 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 }); } @@ -431,6 +442,27 @@ class AssignmentForm extends React.Component { +
+ + + +
+ +
+ + + +
+ - - -

Debug Panel

- - Classrooms Status: [{props.classroomsStatus}]
- Classrooms Count: [{props.classroomsList && props.classroomsList.length}]
- Assignments Status: [{props.assignmentsStatus}]
- Assignments Count: [{props.assignmentsList && props.assignmentsList.length}]
- - ); diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index 8e529556..c0014d21 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -647,18 +647,10 @@ Effect('wcc_teachers_createAssignment', ({ selectedProgram, selectedClassroom, a */ Effect('wcc_editAssignment', ({ selectedAssignment, assignmentData, students = [], filters = {}, subjects = [] }) => { //Sanity check - console.log('+++ wcc_editAssignment A: ', selectedAssignment, assignmentData); - - console.log('+++ wcc_editAssignment B: ', (!selectedAssignment || !assignmentData)); - if (!selectedAssignment || !assignmentData) return; - console.log('+++ wcc_editAssignment C'); - Actions.wildcamClassrooms.setAssignmentsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING); - console.log('+++ wcc_editAssignment D'); - const requestBody = { data: { attributes: { @@ -684,12 +676,8 @@ Effect('wcc_editAssignment', ({ selectedAssignment, assignmentData, students = [ } }; - console.log('+++ wcc_editAssignment E'); - return put(`/assignments/${selectedAssignment.id}`, requestBody) .then((response) => { - console.log('+++ wcc_editAssignment F: ', response); - if (!response) { throw 'ERROR (ducks/wildcam-classrooms/ducks/wcc_teachers_editClassrooms): No response'; } if (response.ok) { Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SUCCESS); From 3f624cb6a80e5efa954d202790ac775adf7c9daf Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 6 Jun 2018 15:20:26 +0100 Subject: [PATCH 3/8] Clasifications Count is now a number input, Map shows 'Select Subjects' button more clearly now --- .../components/AssignmentForm.jsx | 63 ++++++++++++++----- .../components/StudentsList.jsx | 2 +- .../components/SubjectsList.jsx | 2 +- .../wildcam-map/containers/MapControls.jsx | 9 ++- src/styles/components/wildcam-map.styl | 3 + 5 files changed, 57 insertions(+), 22 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx index 75a93f11..47c2e992 100644 --- a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx +++ b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx @@ -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'; @@ -77,9 +78,12 @@ const TEXT = { ASSIGNMENT_FORM: { NAME: 'Assignment name', DESCRIPTION: 'Instructions for students', - CLASSIFICATIONS_TARGET: 'Classifications target', + 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', }, @@ -159,12 +163,20 @@ class AssignmentForm extends React.Component { 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. + //WildCam Map Selected Subjects: + //Check the connection to WildCam Maps to see if the user recently selected + //Subjects for the Assignment. if (props.wccwcmSelectedSubjects) { + + console.log('+++ props.wccwcmSelectedSubjects: ', props.wccwcmSelectedSubjects.length, this.state); + this.setState({ subjects: props.wccwcmSelectedSubjects, filters: props.wccwcmSelectedFilters, + form: { + ...this.state.form, + classifications_target: props.wccwcmSelectedSubjects.length, + } }); Actions.wildcamMap.resetWccWcmAssignmentData(); } @@ -239,8 +251,6 @@ class AssignmentForm extends React.Component { } else { updatedForm[key] = originalForm[key]; } - - }); this.setState({ form: updatedForm }); } @@ -249,10 +259,23 @@ class AssignmentForm extends React.Component { // ---------------------------------------------------------------- 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') { + console.log('+++ classifications_target: ', val); + 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, } }); @@ -442,27 +465,21 @@ class AssignmentForm extends React.Component { -
- - - -
-
+ { + //TODO: add (optional) Assignment link for students? + } + + {(state.subjects && state.subjects.length > 0) && ( +
+ + + +
+ )} + {TEXT.HEADINGS.STUDENTS} diff --git a/src/modules/wildcam-classrooms/components/SubjectsList.jsx b/src/modules/wildcam-classrooms/components/SubjectsList.jsx index 2c1f407c..75405073 100644 --- a/src/modules/wildcam-classrooms/components/SubjectsList.jsx +++ b/src/modules/wildcam-classrooms/components/SubjectsList.jsx @@ -105,7 +105,7 @@ class SubjectsList extends React.Component { return ( {TEXT.HEADINGS.SUBJECTS} diff --git a/src/modules/wildcam-map/containers/MapControls.jsx b/src/modules/wildcam-map/containers/MapControls.jsx index 2ea0802a..42350f8d 100644 --- a/src/modules/wildcam-map/containers/MapControls.jsx +++ b/src/modules/wildcam-map/containers/MapControls.jsx @@ -74,7 +74,10 @@ class MapControls extends React.Component { return ( - + diff --git a/src/styles/components/wildcam-map.styl b/src/styles/components/wildcam-map.styl index a498960c..47f5e53e 100644 --- a/src/styles/components/wildcam-map.styl +++ b/src/styles/components/wildcam-map.styl @@ -40,6 +40,9 @@ &.selected background: TEAL_LIGHT + .wccwcm-connector + border: 1px solid GREY_5 + .zooniversal-translator .selected background: TEAL_LIGHT From 74390bebbbb642a769a86b5b469e84f5ea6a918d Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 6 Jun 2018 16:33:12 +0100 Subject: [PATCH 4/8] AssignmentForm data is saved between subject selection steps --- .../components/AssignmentForm.jsx | 14 ++++++++++++-- .../wildcam-classrooms/components/SubjectsList.jsx | 6 ++++++ src/modules/wildcam-map/ducks/index.js | 7 +++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx index 47c2e992..139c04c4 100644 --- a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx +++ b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx @@ -111,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: [], @@ -152,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); } @@ -166,15 +168,16 @@ class AssignmentForm extends React.Component { //WildCam Map Selected Subjects: //Check the connection to WildCam Maps to see if the user recently selected //Subjects for the Assignment. - if (props.wccwcmSelectedSubjects) { + if (props.wccwcmSelectedSubjects && props.wccwcmSavedAssignmentState) { - console.log('+++ props.wccwcmSelectedSubjects: ', props.wccwcmSelectedSubjects.length, this.state); + console.log('+++ RESTORING ASSIGNMENT: ', props.wccwcmSavedAssignmentState); this.setState({ subjects: props.wccwcmSelectedSubjects, filters: props.wccwcmSelectedFilters, form: { ...this.state.form, + ...props.wccwcmSavedAssignmentState, classifications_target: props.wccwcmSelectedSubjects.length, } }); @@ -237,6 +240,12 @@ class AssignmentForm extends React.Component { /* Initialises the classroom form. */ initialiseForm(selectedAssignment) { + //Only run this once per page load, thank you. + if (this.state.formInitialised) return; + this.setState({ formInitialised: true }); + + console.log('+++ INITIALISING FORM'); + if (!selectedAssignment) { this.setState({ form: INITIAL_FORM_DATA }); } else { @@ -489,6 +498,7 @@ class AssignmentForm extends React.Component { filters={state.filters} subjects={state.subjects} wccwcmMapPath={props.wccwcmMapPath} + assignmentStateForSaving={state.form} /> {(state.subjects && state.subjects.length > 0) && ( diff --git a/src/modules/wildcam-classrooms/components/SubjectsList.jsx b/src/modules/wildcam-classrooms/components/SubjectsList.jsx index 75405073..be120449 100644 --- a/src/modules/wildcam-classrooms/components/SubjectsList.jsx +++ b/src/modules/wildcam-classrooms/components/SubjectsList.jsx @@ -127,6 +127,10 @@ class SubjectsList extends React.Component { //Save the return path Actions.wildcamMap.setWccWcmAssignmentPath(props.location.pathname); + //Save the assignment state + console.log('+++ SAVING: ', props.assignmentStateForSaving); + Actions.wildcamMap.setWccWcmSavedAssignmentState(props.assignmentStateForSaving); + //Transition to: WildCam Map props.history.push(props.wccwcmMapPath); }} @@ -198,6 +202,7 @@ class SubjectsList extends React.Component { SubjectsList.defaultProps = { filters: null, subjects: [], + assignmentStateForSaving: null, // ---------------- ...WILDCAMCLASSROOMS_INITIAL_STATE, ...WILDCAMMAP_INITIAL_STATE, @@ -206,6 +211,7 @@ SubjectsList.defaultProps = { SubjectsList.propTypes = { filters: PropTypes.object, subjects: PropTypes.array, + assignmentStateForSaving: PropTypes.object, // ---------------- ...WILDCAMCLASSROOMS_PROPTYPES, ...WILDCAMMAP_PROPTYPES, diff --git a/src/modules/wildcam-map/ducks/index.js b/src/modules/wildcam-map/ducks/index.js index 5c93cba4..078ee16b 100644 --- a/src/modules/wildcam-map/ducks/index.js +++ b/src/modules/wildcam-map/ducks/index.js @@ -70,6 +70,7 @@ const WILDCAMMAP_INITIAL_STATE = { //Connection between WildCam Classroom and WildCam Map wccwcmMapPath: '', //The URL/path that the Teacher is taken to when they click on "Select subject" in the WildCam Classroom - Create Assignment stage. Must be registered early on in the Program. wccwcmAssignmentPath: '', //The URL/path that the Teacher is returned to when they finally finish selecting subjects on the WildCam Map. + wccwcmSavedAssignmentState: null, wccwcmSelectedSubjects: null, wccwcmSelectedFilters: null, }; @@ -105,6 +106,7 @@ const WILDCAMMAP_PROPTYPES = { wccwcmMapPath: PropTypes.string, wccwcmAssignmentPath: PropTypes.string, + wccwcmSavedAssignmentState: PropTypes.object, wccwcmSelectedSubjects: PropTypes.array, wccwcmSelectedFilters: PropTypes.object, }; @@ -229,6 +231,7 @@ const resetWccWcmAssignmentData = (state) => { ...state, //Maintain the Map Path, however wccwcmAssignmentPath: WILDCAMMAP_INITIAL_STATE.wccwcmAssignmentPath, + wccwcmSavedAssignmentState: WILDCAMMAP_INITIAL_STATE.wccwcmSavedAssignmentState, wccwcmSelectedSubjects: WILDCAMMAP_INITIAL_STATE.wccwcmSelectedSubjects, wccwcmSelectedFilters: WILDCAMMAP_INITIAL_STATE.wccwcmSelectedFilters, } @@ -239,6 +242,9 @@ const setWccWcmMapPath = (state, wccwcmMapPath) => { const setWccWcmAssignmentPath = (state, wccwcmAssignmentPath) => { return { ...state, wccwcmAssignmentPath }; } +const setWccWcmSavedAssignmentState = (state, wccwcmSavedAssignmentState) => { + return { ...state, wccwcmSavedAssignmentState }; +} const setWccWcmSelectedSubjects = (state, wccwcmSelectedSubjects) => { return { ...state, wccwcmSelectedSubjects }; } @@ -392,6 +398,7 @@ const wildcamMap = State('wildcamMap', { resetWccWcmAssignmentData, setWccWcmMapPath, setWccWcmAssignmentPath, + setWccWcmSavedAssignmentState, setWccWcmSelectedSubjects, setWccWcmSelectedFilters, }); From 3fc0d887880d07e9ad9b121fdda0ac6e557ba4d7 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 6 Jun 2018 16:42:52 +0100 Subject: [PATCH 5/8] Changed position of '' 'get Selected Subjects' code --- .../components/AssignmentForm.jsx | 50 +++++++------------ 1 file changed, 19 insertions(+), 31 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx index 139c04c4..57c4ff1e 100644 --- a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx +++ b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx @@ -164,32 +164,13 @@ class AssignmentForm extends React.Component { } else { this.initialise_partTwo(props, classroom_id, assignment_id, props.assignmentsList); } - - //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) { - - console.log('+++ RESTORING ASSIGNMENT: ', props.wccwcmSavedAssignmentState); - - this.setState({ - subjects: props.wccwcmSelectedSubjects, - filters: props.wccwcmSelectedFilters, - form: { - ...this.state.form, - ...props.wccwcmSavedAssignmentState, - classifications_target: props.wccwcmSelectedSubjects.length, - } - }); - 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 { @@ -224,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 { @@ -239,13 +220,11 @@ 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 }); - console.log('+++ INITIALISING FORM'); - if (!selectedAssignment) { this.setState({ form: INITIAL_FORM_DATA }); } else { @@ -263,6 +242,22 @@ class AssignmentForm extends React.Component { }); 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(); + } } // ---------------------------------------------------------------- @@ -273,7 +268,6 @@ class AssignmentForm extends React.Component { //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') { - console.log('+++ classifications_target: ', val); let maxVal = (this.state.subjects) ? this.state.subjects.length : 0; val = parseInt(val); if (isNaN(val)) val = 0; @@ -294,8 +288,6 @@ class AssignmentForm extends React.Component { } submitForm(e) { - console.log('+++ AssignmentForm.submitForm() ', this.props); - const props = this.props; const state = this.state; @@ -306,8 +298,6 @@ class AssignmentForm extends React.Component { if (!props.selectedProgram) return; if (!props.selectedClassroom) return; - console.log('+++ AssignmentForm.submitForm() A'); - //Submit Form: create new assignment if (state.view === VIEWS.CREATE_NEW) { const filters = (state.filters) ? state.filters : {}; @@ -339,8 +329,6 @@ class AssignmentForm extends React.Component { //Submit Form: update existing classroom } else if (state.view === VIEWS.EDIT_EXISTING) { - console.log('+++ AssignmentForm.submitForm() B'); - const filters = (state.filters) ? state.filters : {}; const subjects = (state.subjects) ? state.subjects.map(sub => sub.subject_id) From fa4f61af126d3081978a577279e40e759c3d94d5 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 6 Jun 2018 16:58:41 +0100 Subject: [PATCH 6/8] 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.) --- src/programs/darien/DarienProgram.jsx | 61 +++++++++++++++------------ 1 file changed, 35 insertions(+), 26 deletions(-) diff --git a/src/programs/darien/DarienProgram.jsx b/src/programs/darien/DarienProgram.jsx index f433a0c1..07c01f37 100644 --- a/src/programs/darien/DarienProgram.jsx +++ b/src/programs/darien/DarienProgram.jsx @@ -22,35 +22,44 @@ import Status401 from '../../components/common/Status401'; import Status404 from '../../components/common/Status404'; import GenericStatusPage from '../../components/common/GenericStatusPage'; -function DarienProgram(props) { - if (!props.initialised) { //User status unknown: wait. - return (); - } else if (!props.selectedProgram) { //Anomaly: program status not set. - //Users should _not_ see this, but might due to weird lifecycle/timing issues. - return (); - } else { - +class DarienProgram extends React.Component { + constructor() { + super(); + } + + componentWillReceiveProps(props = this.props) { //Register the connection between the WildCam Classrooms and the WildCam Maps. Actions.wildcamMap.setWccWcmMapPath(`${props.match.url}/map`); + } - if (props.user) { //User logged in: give access to all locations. - return ( - - - - - - - ); - } else { //User not logged in: give limited access. - return ( - - - - - - - ); + render() { + const props = this.props; + + if (!props.initialised) { //User status unknown: wait. + return (); + } else if (!props.selectedProgram) { //Anomaly: program status not set. + //Users should _not_ see this, but might due to weird lifecycle/timing issues. + return (); + } else { + if (props.user) { //User logged in: give access to all locations. + return ( + + + + + + + ); + } else { //User not logged in: give limited access. + return ( + + + + + + + ); + } } } } From ff80821c21526ff84782c21447d6f60063db47bb Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 6 Jun 2018 17:11:33 +0100 Subject: [PATCH 7/8] Assignment filters are remembered when choosing new Subjects --- src/modules/wildcam-classrooms/components/SubjectsList.jsx | 6 ++---- src/modules/wildcam-map/ducks/index.js | 5 +++++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/SubjectsList.jsx b/src/modules/wildcam-classrooms/components/SubjectsList.jsx index be120449..7c1d3400 100644 --- a/src/modules/wildcam-classrooms/components/SubjectsList.jsx +++ b/src/modules/wildcam-classrooms/components/SubjectsList.jsx @@ -124,12 +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); - - //Save the assignment state - console.log('+++ SAVING: ', props.assignmentStateForSaving); Actions.wildcamMap.setWccWcmSavedAssignmentState(props.assignmentStateForSaving); + if (props.filters) Actions.wildcamMap.setFilters(props.filters); //Transition to: WildCam Map props.history.push(props.wccwcmMapPath); diff --git a/src/modules/wildcam-map/ducks/index.js b/src/modules/wildcam-map/ducks/index.js index 078ee16b..a381298b 100644 --- a/src/modules/wildcam-map/ducks/index.js +++ b/src/modules/wildcam-map/ducks/index.js @@ -185,6 +185,10 @@ const setActiveCameraDataStatus = (state, activeCameraDataStatus) => { return { ...state, activeCameraDataStatus }; }; +const setFilters = (state, filters) => { + return { ...state, filters }; +}; + /* Adds to a multi-choice filter selection. */ const addFilterSelectionItem = (state, item) => { @@ -392,6 +396,7 @@ const wildcamMap = State('wildcamMap', { setActiveCameraMetadataStatus, setActiveCameraData, setActiveCameraDataStatus, + setFilters, addFilterSelectionItem, removeFilterSelectionItem, setFilterSelectionItem, From 9387bbbdf16f5c7965572c6e8426319699105f5f Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 6 Jun 2018 17:20:46 +0100 Subject: [PATCH 8/8] SubjectList now renders the filters in a better format --- .../wildcam-classrooms/components/SubjectsList.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/modules/wildcam-classrooms/components/SubjectsList.jsx b/src/modules/wildcam-classrooms/components/SubjectsList.jsx index 7c1d3400..9942ab6a 100644 --- a/src/modules/wildcam-classrooms/components/SubjectsList.jsx +++ b/src/modules/wildcam-classrooms/components/SubjectsList.jsx @@ -154,7 +154,17 @@ class SubjectsList extends React.Component { return Object.keys(props.filters).map((key, index) => { const val = props.filters[key]; return ( -
{key} : {val}
+
{key} : {(()=>{ + if (Array.isArray(val, index)) { + let output = ''; + val.map((v) => { + output += ((output !== '') ? ', ' : '' ) + v; + }); + return output; + } else { + return val; + } + })()}
); }); })()}