WildCam Lab Classrooms - 2018 Rebuild - part 4

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) {

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) {

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);
 }
 

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';
@@ -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',
@@ -91,6 +97,8 @@ const TEXT = {
 const INITIAL_FORM_DATA = {
   name: '',
   description: '',
+  classifications_target: '',
+  duedate: '',
 };
 
 /*
@@ -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: [],
@@ -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)
@@ -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);
     }
 
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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,
       }
     });
 
@@ -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' });
@@ -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}
@@ -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}

src/modules/wildcam-classrooms/components/StudentsList.jsx

@@ -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>

src/modules/wildcam-classrooms/components/SubjectsList.jsx

@@ -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>
@@ -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);
@@ -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>
             );
           });
         })()}
@@ -198,6 +210,7 @@ class SubjectsList extends React.Component {
 SubjectsList.defaultProps = {
   filters: null,
   subjects: [],
+  assignmentStateForSaving: null,
   // ----------------
   ...WILDCAMCLASSROOMS_INITIAL_STATE,
   ...WILDCAMMAP_INITIAL_STATE,
@@ -206,6 +219,7 @@ SubjectsList.defaultProps = {
 SubjectsList.propTypes = {
   filters: PropTypes.object,
   subjects: PropTypes.array,
+  assignmentStateForSaving: PropTypes.object,
   // ----------------
   ...WILDCAMCLASSROOMS_PROPTYPES,
   ...WILDCAMMAP_PROPTYPES,

src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx

@@ -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>
     );

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) {
@@ -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) {

src/modules/wildcam-map/containers/MapControls.jsx

@@ -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-"
@@ -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"
@@ -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"
               >