From 74298762d902dd6cc2319d55fb2efadf5dd0b658 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 15 May 2018 12:54:28 +0100 Subject: [PATCH 01/24] Add simple form for editing/creating a Classroom --- .../components/ClassroomForm.jsx | 88 +++++++++++++++++++ .../containers/WildCamClassrooms.jsx | 14 ++- src/modules/wildcam-classrooms/ducks/index.js | 4 +- src/modules/wildcam-map/ducks/index.js | 4 +- src/styles/components/wildcam-classrooms.styl | 2 +- 5 files changed, 105 insertions(+), 7 deletions(-) create mode 100644 src/modules/wildcam-classrooms/components/ClassroomForm.jsx diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx new file mode 100644 index 00000000..b497b5da --- /dev/null +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -0,0 +1,88 @@ +/* +ClassroomForm +------------- + +Component for viewing or editing a single classroom. + +-------------------------------------------------------------------------------- + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { Actions } from 'jumpstate'; + +import Heading from 'grommet/components/Heading'; +import Footer from 'grommet/components/Footer'; +import Form from 'grommet/components/Form'; +import FormField from 'grommet/components/FormField'; +import TextInput from 'grommet/components/TextInput'; +import Button from 'grommet/components/Button'; + +import { config } from '../../../lib/config'; + +import { + WILDCAMCLASSROOMS_DATA_STATUS, + WILDCAMCLASSROOMS_INITIAL_STATE, + WILDCAMCLASSROOMS_PROPTYPES, +} from '../ducks/index.js'; + +class ClassroomForm extends React.Component { + constructor() { + super(); + + this.state = { + name: '', + }; + } + + updateForm() { + + } + + render() { + const props = this.props; + const joinURL = props.selectedClassroom + ? `${config.origin}/#/${props.selectedProgram.slug}/students/classrooms/${props.selectedClassroom.id}/join?token=${props.selectedClassroom.joinToken}` + : ''; + + // Get students and assignments only for this classroom. + const students = (props.selectedClassroom && props.selectedClassroom.students) ? props.selectedClassroom.students : []; + const assignments = (props.selectedClassroom && props.assignments && props.assignments[props.selectedClassroom.id]) + ? props.assignments[props.selectedClassroom.id] + : []; + + return ( +
{}} + pad="medium" + > + TEST... + +
+ + + +
+ +
+
+
+ ); + } +}; + +ClassroomForm.defaultProps = { + ...WILDCAMCLASSROOMS_INITIAL_STATE, +}; + +ClassroomForm.propTypes = { + ...WILDCAMCLASSROOMS_PROPTYPES, +}; + +export default ClassroomForm; diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 75c8c2f5..86c0a619 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -1,9 +1,21 @@ +/* +WildCam Classrooms +------------------ + +The primary component for viewing and managing classrooms and assignments for +WildCam-type programs/projects. + +-------------------------------------------------------------------------------- + */ + import React from 'react'; import { connect } from 'react-redux'; import { Actions } from 'jumpstate'; import Box from 'grommet/components/Box'; +import ClassroomForm from '../components/ClassroomForm'; + import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; import { WILDCAMCLASSROOMS_DATA_STATUS, @@ -48,7 +60,7 @@ class WildCamClassroom extends React.Component { }))} - + ); } diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index 1c3aadd3..37e081d4 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -27,8 +27,6 @@ const WILDCAMCLASSROOMS_DATA_STATUS = { ERROR: 'error', //Something effed up. }; -const LOG_PREFIX = 'ducks/wildcam-classrooms'; - /* -------------------------------------------------------------------------------- */ @@ -136,7 +134,7 @@ const setToast = (state, message, status) => { // Jumpstate Effects // ----------------- // Effects are for async actions and get automatically to the global Actions -// list. +// list. NOTE: Effects can only have one argument. /* Fetch all the Classrooms for the selected Program from the Education API. Implicit: the list of Classrooms is limited to what's available to the diff --git a/src/modules/wildcam-map/ducks/index.js b/src/modules/wildcam-map/ducks/index.js index d07003f0..c4e9c653 100644 --- a/src/modules/wildcam-map/ducks/index.js +++ b/src/modules/wildcam-map/ducks/index.js @@ -45,7 +45,6 @@ const WILDCAMMAP_CAMERA_STATUS = { // Initial State / Default Values // ------------------------------ - /* WILDCAMMAP_INITIAL_STATE defines the default/starting values of the Redux store. To use this in your Redux-connected React components, try... Usage: @@ -217,7 +216,8 @@ const setFilterSelectionItem = (state, key, value) => { // Jumpstate Effects // ----------------- -// Effects are for async actions and get automatically to the global Actions list +// Effects are for async actions and get automatically to the global Actions +// list. NOTE: Effects can only have one argument. Effect('wcm_getMapMarkers', (payload = {}) => { const mapConfig = payload.mapConfig; diff --git a/src/styles/components/wildcam-classrooms.styl b/src/styles/components/wildcam-classrooms.styl index 67a19108..4581dfca 100644 --- a/src/styles/components/wildcam-classrooms.styl +++ b/src/styles/components/wildcam-classrooms.styl @@ -1,2 +1,2 @@ .wildcam-classrooms - background: #fcf \ No newline at end of file + background: #ffe \ No newline at end of file From b193d9235c2b51d7b99a80cc977968067aa6c371 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 15 May 2018 15:42:10 +0100 Subject: [PATCH 02/24] Classroom Form can now be edited --- .../components/ClassroomForm.jsx | 60 ++++++++++++++++++- 1 file changed, 57 insertions(+), 3 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index b497b5da..d34eb83e 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -32,12 +32,35 @@ class ClassroomForm extends React.Component { this.state = { name: '', + subject: '', + school: '', + description: '', }; + + this.loadSelectedClassroomDetails(this.props); + } + + /* Update the form details. + */ + updateForm(e) { + console.log('+++ ', { [e.target.id]: e.target.value }); + this.setState({ + [e.target.id]: e.target.value + //Apparently [square_brackets] a superconvenient way of specifying an + //object key name that's variable. Sweet. + }); + } - updateForm() { + loadSelectedClassroomDetails(props) { + } + + componentWillReceiveProps(nextProps) { + + this.loadSelectedClassroomDetails(nextProps); } + render() { const props = this.props; @@ -60,11 +83,42 @@ class ClassroomForm extends React.Component { TEST...
- + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
From 585692423d3253c46b62b3d43b8d88f2ec22d756 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 15 May 2018 16:57:48 +0100 Subject: [PATCH 03/24] Prepared modes for Create and Edit --- .../components/ClassroomForm.jsx | 100 +++++++++++++----- 1 file changed, 73 insertions(+), 27 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index d34eb83e..079f0fa4 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -2,7 +2,7 @@ ClassroomForm ------------- -Component for viewing or editing a single classroom. +Component for viewing, editing, or deleting a single classroom. -------------------------------------------------------------------------------- */ @@ -26,49 +26,84 @@ import { WILDCAMCLASSROOMS_PROPTYPES, } from '../ducks/index.js'; +const INITIAL_FORM_DATA = { + name: '', + subject: '', + school: '', + description: '', +} + +const MODES = { + INIT: 'init', //Invalid state. + CREATE: 'create', + EDIT: 'edit', +}; + class ClassroomForm extends React.Component { constructor() { super(); - this.state = { - name: '', - subject: '', - school: '', - description: '', + mode: MODES.INIT, + form: INITIAL_FORM_DATA, }; - - this.loadSelectedClassroomDetails(this.props); } - /* Update the form details. - */ + // ---------------------------------------------------------------- + updateForm(e) { - console.log('+++ ', { [e.target.id]: e.target.value }); this.setState({ - [e.target.id]: e.target.value - //Apparently [square_brackets] a superconvenient way of specifying an - //object key name that's variable. Sweet. + form: { + ...this.state.form, + [e.target.id]: e.target.value + } }); + //Apparently [square_brackets] a superconvenient way of specifying an + //object key name that's variable. Sweet. + + } + + /* Initialises the classroom form. Two paths: + - If there's a classroom selected, we want to EDIT/VIEW it. + - If there's NO classroom selected, we want to CREATE one. + */ + initialiseForm(selectedClassroom) { + if (!selectedClassroom) { + this.setState({ + mode: MODES.CREATE, + form: INITIAL_FORM_DATA + }); + } else { + this.setState({ + ...this.state, + mode: MODES.EDIT, + //TODO: Specify Selected Classroom details here + }); + } } - loadSelectedClassroomDetails(props) { + // ---------------------------------------------------------------- + + componentDidMount() { + this.initialiseForm(this.props.selectedClassroom); } componentWillReceiveProps(nextProps) { - - - this.loadSelectedClassroomDetails(nextProps); + if (this.props.selectedClassroom !== nextProps.selectedClassroom) { + this.initialiseForm(nextProps.selectedClassroom); + } } - + + // ---------------------------------------------------------------- render() { const props = this.props; + const state = this.state; const joinURL = props.selectedClassroom ? `${config.origin}/#/${props.selectedProgram.slug}/students/classrooms/${props.selectedClassroom.id}/join?token=${props.selectedClassroom.joinToken}` : ''; - // Get students and assignments only for this classroom. + //Get students and assignments only for this classroom. const students = (props.selectedClassroom && props.selectedClassroom.students) ? props.selectedClassroom.students : []; const assignments = (props.selectedClassroom && props.assignments && props.assignments[props.selectedClassroom.id]) ? props.assignments[props.selectedClassroom.id] @@ -80,14 +115,25 @@ class ClassroomForm extends React.Component { onSubmit={()=>{}} pad="medium" > - TEST... + + {(()=>{ + switch (state.mode) { + case MODES.CREATE: + return 'Create new classroom'; + case MODES.EDIT: + return 'Edit classroom'; + default: + return '???'; + } + })()} +
@@ -97,7 +143,7 @@ class ClassroomForm extends React.Component { @@ -107,7 +153,7 @@ class ClassroomForm extends React.Component { @@ -117,7 +163,7 @@ class ClassroomForm extends React.Component { @@ -132,11 +178,11 @@ class ClassroomForm extends React.Component { }; ClassroomForm.defaultProps = { - ...WILDCAMCLASSROOMS_INITIAL_STATE, + ...WILDCAMCLASSROOMS_INITIAL_STATE.selectedClassroom, }; ClassroomForm.propTypes = { - ...WILDCAMCLASSROOMS_PROPTYPES, + ...WILDCAMCLASSROOMS_PROPTYPES.selectedClassroom, }; export default ClassroomForm; From c6ca47fe16e92f41857573be98489e52f26b27dd Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 15 May 2018 18:01:50 +0100 Subject: [PATCH 04/24] Submission in process... --- .../components/ClassroomForm.jsx | 82 +++++++++++++------ .../containers/WildCamClassrooms.jsx | 18 ++-- src/modules/wildcam-classrooms/ducks/index.js | 12 +++ 3 files changed, 81 insertions(+), 31 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index 079f0fa4..f0d07d11 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -12,6 +12,7 @@ import PropTypes from 'prop-types'; import { Actions } from 'jumpstate'; import Heading from 'grommet/components/Heading'; +import Box from 'grommet/components/Box'; import Footer from 'grommet/components/Footer'; import Form from 'grommet/components/Form'; import FormField from 'grommet/components/FormField'; @@ -31,7 +32,7 @@ const INITIAL_FORM_DATA = { subject: '', school: '', description: '', -} +}; const MODES = { INIT: 'init', //Invalid state. @@ -50,19 +51,6 @@ class ClassroomForm extends React.Component { // ---------------------------------------------------------------- - updateForm(e) { - this.setState({ - form: { - ...this.state.form, - [e.target.id]: e.target.value - } - }); - - //Apparently [square_brackets] a superconvenient way of specifying an - //object key name that's variable. Sweet. - - } - /* Initialises the classroom form. Two paths: - If there's a classroom selected, we want to EDIT/VIEW it. - If there's NO classroom selected, we want to CREATE one. @@ -82,6 +70,27 @@ class ClassroomForm extends React.Component { } } + updateForm(e) { + this.setState({ + form: { + ...this.state.form, + [e.target.id]: e.target.value + } + }); + + //Apparently [square_brackets] a superconvenient way of specifying an + //object key name that's variable. Sweet. + + } + + submitForm(e) { + e.preventDefault(); + + if (this.state.mode === MODES.CREATE) { + Actions.wcc_teachers_createClassroom(this.state.form); + } + } + // ---------------------------------------------------------------- componentDidMount() { @@ -98,21 +107,34 @@ class ClassroomForm extends React.Component { render() { const props = this.props; - const state = this.state; - const joinURL = props.selectedClassroom - ? `${config.origin}/#/${props.selectedProgram.slug}/students/classrooms/${props.selectedClassroom.id}/join?token=${props.selectedClassroom.joinToken}` - : ''; + //const state = this.state; + //const joinURL = props.selectedClassroom + // ? `${config.origin}/#/${props.selectedProgram.slug}/students/classrooms/${props.selectedClassroom.id}/join?token=${props.selectedClassroom.joinToken}` + // : ''; //Get students and assignments only for this classroom. - const students = (props.selectedClassroom && props.selectedClassroom.students) ? props.selectedClassroom.students : []; - const assignments = (props.selectedClassroom && props.assignments && props.assignments[props.selectedClassroom.id]) - ? props.assignments[props.selectedClassroom.id] - : []; - + //const students = (props.selectedClassroom && props.selectedClassroom.students) ? props.selectedClassroom.students : []; + //const assignments = (props.selectedClassroom && props.assignments && props.assignments[props.selectedClassroom.id]) + // ? props.assignments[props.selectedClassroom.id] + // : []; + + if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SUCCESS) { + return this.render_readyState(); + } else if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SENDING) { + return this.render_sendingState(); + } + + return null; + } + + render_readyState() { + const props = this.props; + const state = this.state; + return (
{}} + onSubmit={this.submitForm.bind(this)} pad="medium" > @@ -170,11 +192,21 @@ class ClassroomForm extends React.Component {
-
); } + + render_sendingState() { + const props = this.props; + + return ( + + Sending... + + ); + } }; ClassroomForm.defaultProps = { diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 86c0a619..1c29b7f3 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -42,7 +42,10 @@ class WildCamClassroom extends React.Component { } render() { - if (!this.props.selectedProgram) return null; + const props = this.props; + + //Sanity check + if (!props.selectedProgram) return null; return ( - Classrooms Status: [{this.props.classroomsStatus}]
- Classrooms Count: [{this.props.classroomsList && this.props.classroomsList.length}] + Classrooms Status: [{props.classroomsStatus}]
+ Classrooms Count: [{props.classroomsList && props.classroomsList.length}] - {(this.props.classroomsList && this.props.classroomsList.map((item) => { - return 'aaa'; + {(props.classroomsList && props.classroomsList.map((item) => { + return '???'; }))} - + ); } diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index 37e081d4..faed9748 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -170,6 +170,18 @@ Effect('wcc_teachers_fetchClassrooms', (program) => { }); }); +Effect('wcc_teachers_createClassroom', (classroomData) => { + Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING); +}); + +Effect('wcc_teachers_editClassroom', (classroomData) => { + Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING); +}); + +Effect('wcc_teachers_deleteClassroom', (classroomData) => { + Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING); +}); + /* -------------------------------------------------------------------------------- */ From 8abb29928c15fcc6147402f675ca539a01e06bdb Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 15 May 2018 19:08:16 +0100 Subject: [PATCH 05/24] Debugging Create Classroom --- .../components/ClassroomForm.jsx | 24 ++++++++-- .../containers/WildCamClassrooms.jsx | 3 ++ src/modules/wildcam-classrooms/ducks/index.js | 47 ++++++++++++++++++- 3 files changed, 70 insertions(+), 4 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index f0d07d11..c823a521 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -21,6 +21,7 @@ import Button from 'grommet/components/Button'; import { config } from '../../../lib/config'; +import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; import { WILDCAMCLASSROOMS_DATA_STATUS, WILDCAMCLASSROOMS_INITIAL_STATE, @@ -86,8 +87,19 @@ class ClassroomForm extends React.Component { submitForm(e) { e.preventDefault(); + //Sanity check + if (!this.props.selectedProgram) return; + if (this.state.mode === MODES.CREATE) { - Actions.wcc_teachers_createClassroom(this.state.form); + return Actions.wcc_teachers_createClassroom({ + attributes: this.state.form, + relationships: { + program: { + data: String(this.props.selectedProgram.id), + type: "programs" + } + } + }); } } @@ -210,11 +222,17 @@ class ClassroomForm extends React.Component { }; ClassroomForm.defaultProps = { - ...WILDCAMCLASSROOMS_INITIAL_STATE.selectedClassroom, + selectedProgram: PROGRAMS_INITIAL_STATE.selectedProgram, + // ---------------- + classroomsStatus: WILDCAMCLASSROOMS_INITIAL_STATE.classroomsStatus, + selectedClassroom: WILDCAMCLASSROOMS_INITIAL_STATE.selectedClassroom, }; ClassroomForm.propTypes = { - ...WILDCAMCLASSROOMS_PROPTYPES.selectedClassroom, + selectedProgram: PROGRAMS_PROPTYPES.selectedProgram, + // ---------------- + classroomsStatus: WILDCAMCLASSROOMS_PROPTYPES.classroomsStatus, + selectedClassroom: WILDCAMCLASSROOMS_PROPTYPES.selectedClassroom, }; export default ClassroomForm; diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 1c29b7f3..8dcc9a9f 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -64,6 +64,7 @@ class WildCamClassroom extends React.Component { @@ -74,11 +75,13 @@ class WildCamClassroom extends React.Component { WildCamClassroom.defaultProps = { selectedProgram: PROGRAMS_INITIAL_STATE.selectedProgram, //Passed from parent. + // ---------------- ...WILDCAMCLASSROOMS_INITIAL_STATE, }; WildCamClassroom.propTypes = { selectedProgram: PROGRAMS_PROPTYPES.selectedProgram, + // ---------------- ...WILDCAMCLASSROOMS_PROPTYPES, }; diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index faed9748..0b7093ee 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -72,7 +72,11 @@ const WILDCAMCLASSROOMS_INITIAL_STATE = { }; */ const WILDCAMCLASSROOMS_PROPTYPES = { - + classroomsStatus: PropTypes.string, + classroomsStatusDetails: PropTypes.object, + classroomsList: PropTypes.array, + selectedClassroom: PropTypes.object, + toast: PropTypes.object, }; /* WILDCAMCLASSROOMS_MAP_STATE is used as a convenience feature in @@ -170,8 +174,49 @@ Effect('wcc_teachers_fetchClassrooms', (program) => { }); }); + +/* Creates a classroom. + + API notes: + POST /teachers/classrooms/ accepts the following payload structure: + { + data: { + attributes: { + name: 'Example 101', + subject: 'Exampleology', + school: 'University of Example', + description: 'An example classroom', + }, + relationships: { + program: { + data: "1", + type: "programs" + } + } + } + } + */ Effect('wcc_teachers_createClassroom', (classroomData) => { Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING); + + console.log('+++ wcc_teachers_createClassroom ', classroomData); + + return post('/teachers/classrooms/', { data: classroomData }) + .then((response) => { + console.log('+++ wcc_teachers_createClassroom response', response); + + if (!response) { throw 'ERROR (ducks/wildcam-classrooms/ducks/wcc_teachers_createClassrooms): No response'; } + if (response.ok && + response.body && response.body.data) { + Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SUCCESS); + return response.body.data; + } + throw 'ERROR (ducks/wildcam-classrooms/ducks/wcc_teachers_createClassrooms): Invalid response'; + }) + .catch((err) => { + setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.ERROR, err); + showErrorMessage(err); + }); }); Effect('wcc_teachers_editClassroom', (classroomData) => { From 46a6de33148f2f00dd0eec9096d4a3d537682bd2 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 16 May 2018 12:07:41 +0100 Subject: [PATCH 06/24] Can now Create Classroom, but need work on the listing --- src/modules/wildcam-classrooms/components/ClassroomForm.jsx | 6 ++++-- src/modules/wildcam-classrooms/ducks/index.js | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index c823a521..17000685 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -95,8 +95,10 @@ class ClassroomForm extends React.Component { attributes: this.state.form, relationships: { program: { - data: String(this.props.selectedProgram.id), - type: "programs" + data: { + id: String(this.props.selectedProgram.id), + type: "programs" + } } } }); diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index 0b7093ee..3dd5dac2 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -189,8 +189,10 @@ Effect('wcc_teachers_fetchClassrooms', (program) => { }, relationships: { program: { - data: "1", - type: "programs" + data: { + id: "1", + type: "programs" + } } } } From c6b9b651a2e4e3d97216e435cc4f59a76d0449c6 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 16 May 2018 14:22:31 +0100 Subject: [PATCH 07/24] Fixed fetch Classrooms --- .../containers/WildCamClassrooms.jsx | 2 ++ src/modules/wildcam-classrooms/ducks/index.js | 10 +++------- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 8dcc9a9f..1612986e 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -47,6 +47,8 @@ class WildCamClassroom extends React.Component { //Sanity check if (!props.selectedProgram) return null; + console.log('+++ ', props); + return ( { - return { ...state, setClassroomsList }; +const setClassroomsList = (state, classroomsList) => { + return { ...state, classroomsList }; }; const setSelectedClassroom = (state, selectedClassroom) => { @@ -200,13 +200,9 @@ Effect('wcc_teachers_fetchClassrooms', (program) => { */ Effect('wcc_teachers_createClassroom', (classroomData) => { Actions.wildcamClassrooms.setClassroomsStatus(WILDCAMCLASSROOMS_DATA_STATUS.SENDING); - - console.log('+++ wcc_teachers_createClassroom ', classroomData); - + return post('/teachers/classrooms/', { data: classroomData }) .then((response) => { - console.log('+++ wcc_teachers_createClassroom response', response); - if (!response) { throw 'ERROR (ducks/wildcam-classrooms/ducks/wcc_teachers_createClassrooms): No response'; } if (response.ok && response.body && response.body.data) { From 34012a10b1c6745f1ebecd4de28600ce575ec6ff Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 16 May 2018 14:59:32 +0100 Subject: [PATCH 08/24] Add list of classrooms --- .../components/ClassroomForm.jsx | 2 +- .../components/ClassroomsList.jsx | 67 +++++++++++++++++++ .../containers/WildCamClassrooms.jsx | 17 ++--- 3 files changed, 75 insertions(+), 11 deletions(-) create mode 100644 src/modules/wildcam-classrooms/components/ClassroomsList.jsx diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index 17000685..997ae2e6 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -19,7 +19,7 @@ import FormField from 'grommet/components/FormField'; import TextInput from 'grommet/components/TextInput'; import Button from 'grommet/components/Button'; -import { config } from '../../../lib/config'; +//import { config } from '../../../lib/config'; import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; import { diff --git a/src/modules/wildcam-classrooms/components/ClassroomsList.jsx b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx new file mode 100644 index 00000000..7818dcea --- /dev/null +++ b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx @@ -0,0 +1,67 @@ +/* +ClassroomsList +-------------- + +Component for listing all classrooms. + +-------------------------------------------------------------------------------- + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { Actions } from 'jumpstate'; + +import Box from 'grommet/components/Box'; +import Button from 'grommet/components/Button'; +import Heading from 'grommet/components/Heading'; + +import { + WILDCAMCLASSROOMS_DATA_STATUS, + WILDCAMCLASSROOMS_INITIAL_STATE, + WILDCAMCLASSROOMS_PROPTYPES, +} from '../ducks/index.js'; + +class ClassroomsList extends React.Component { + constructor() { + super(); + } + + // ---------------------------------------------------------------- + + render() { + const props = this.props; + + //Sanity check + if (!props.classroomsList) return null; + + return ( + + List of Classrooms + + {props.classroomsList.map((classroom, index) => { + return ( +
+ {classroom.name} +
+ ); + })} + + ); + } +}; + +ClassroomsList.defaultProps = { + classroomsList: WILDCAMCLASSROOMS_INITIAL_STATE.classroomsList, +}; + +ClassroomsList.propTypes = { + classroomsList: WILDCAMCLASSROOMS_PROPTYPES.classroomsList, +}; + +export default ClassroomsList; diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 1612986e..d2ba3635 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -14,6 +14,7 @@ import { Actions } from 'jumpstate'; import Box from 'grommet/components/Box'; +import ClassroomsList from '../components/ClassroomsList'; import ClassroomForm from '../components/ClassroomForm'; import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; @@ -43,27 +44,23 @@ class WildCamClassroom extends React.Component { render() { const props = this.props; - + //Sanity check if (!props.selectedProgram) return null; - - console.log('+++ ', props); - + return ( - + Classrooms Status: [{props.classroomsStatus}]
Classrooms Count: [{props.classroomsList && props.classroomsList.length}] - - {(props.classroomsList && props.classroomsList.map((item) => { - return '???'; - }))} - + Date: Wed, 16 May 2018 15:43:04 +0100 Subject: [PATCH 09/24] Improved styles --- .../components/ClassroomForm.jsx | 124 +++++++++--------- .../components/ClassroomsList.jsx | 1 + src/programs/darien/pages/DarienEducators.jsx | 15 +-- src/styles/components/wildcam-classrooms.styl | 7 +- 4 files changed, 74 insertions(+), 73 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index 997ae2e6..059c920c 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -146,69 +146,73 @@ class ClassroomForm extends React.Component { const state = this.state; return ( -
- - {(()=>{ - switch (state.mode) { - case MODES.CREATE: - return 'Create new classroom'; - case MODES.EDIT: - return 'Edit classroom'; - default: - return '???'; - } - })()} - - -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
-
-
+
+ + {(()=>{ + switch (state.mode) { + case MODES.CREATE: + return 'Create new classroom'; + case MODES.EDIT: + return 'Edit classroom'; + default: + return '???'; + } + })()} + + +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+
+
+ ); } diff --git a/src/modules/wildcam-classrooms/components/ClassroomsList.jsx b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx index 7818dcea..5ccad65c 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomsList.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx @@ -37,6 +37,7 @@ class ClassroomsList extends React.Component { return ( List of Classrooms diff --git a/src/programs/darien/pages/DarienEducators.jsx b/src/programs/darien/pages/DarienEducators.jsx index 1dc02c76..5325c6e0 100644 --- a/src/programs/darien/pages/DarienEducators.jsx +++ b/src/programs/darien/pages/DarienEducators.jsx @@ -16,18 +16,9 @@ class DarienEducators extends React.Component { } return ( -
-
- -
-
+ ); } }; diff --git a/src/styles/components/wildcam-classrooms.styl b/src/styles/components/wildcam-classrooms.styl index 4581dfca..1df4e46d 100644 --- a/src/styles/components/wildcam-classrooms.styl +++ b/src/styles/components/wildcam-classrooms.styl @@ -1,2 +1,7 @@ .wildcam-classrooms - background: #ffe \ No newline at end of file + + .classrooms-list + border: 1px solid TEAL_MID + + .classroom-form + border: 1px solid TEAL_MID From 795b00c7b9ded829a8b909640f5728c532bdce90 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 16 May 2018 17:04:21 +0100 Subject: [PATCH 10/24] Add modes to the WildCam Classrooms component --- .../containers/WildCamClassrooms.jsx | 69 +++++++++++++++---- src/modules/wildcam-classrooms/ducks/index.js | 9 +++ src/styles/components/wildcam-classrooms.styl | 6 +- 3 files changed, 69 insertions(+), 15 deletions(-) diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index d2ba3635..62f2d426 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -13,6 +13,7 @@ import { connect } from 'react-redux'; import { Actions } from 'jumpstate'; import Box from 'grommet/components/Box'; +import Spinning from 'grommet/components/icons/Spinning'; import ClassroomsList from '../components/ClassroomsList'; import ClassroomForm from '../components/ClassroomForm'; @@ -25,25 +26,45 @@ import { WILDCAMCLASSROOMS_MAP_STATE, } from '../ducks/index.js'; +const MODES = { + INIT: 'init', + VIEW_ALL_CLASSROOMS: 'view all classrooms', + VIEW_ONE_CLASSROOM: 'view one classroom', + CREATE_NEW_CLASSROOM: 'create new classroom', +}; + class WildCamClassroom extends React.Component { constructor() { super(); + this.state = { + mode: MODES.INIT, + }; } componentDidMount() { //Get the list of Classrooms and Assignments. - if (this.props.selectedProgram) Actions.wcc_teachers_fetchClassrooms(this.props.selectedProgram); + this.initialiseList(this.props); } componentWillReceiveProps(nextProps) { //Get the list of Classrooms and Assignments. - if (nextProps.selectedProgram && this.props.selectedProgram !== nextProps.selectedProgram) { - Actions.wcc_teachers_fetchClassrooms(nextProps.selectedProgram); - } + if (this.props.selectedProgram !== nextProps.selectedProgram) this.initialiseList(nextProps); + } + + initialiseList(props = this.props) { + //Sanity check + if (!props.selectedProgram) return; + + Actions.wcc_teachers_fetchClassrooms(props.selectedProgram) + .then(() => { + Actions.wildcamClassrooms.resetSelectedClassroom(); + this.setState({ mode: MODES.VIEW_ALL_CLASSROOMS }); + }); } render() { const props = this.props; + const state = this.state; //Sanity check if (!props.selectedProgram) return null; @@ -55,18 +76,40 @@ class WildCamClassroom extends React.Component { > Classrooms Status: [{props.classroomsStatus}]
- Classrooms Count: [{props.classroomsList && props.classroomsList.length}] + Classrooms Count: [{props.classroomsList && props.classroomsList.length}]
+ Mode: {this.state.mode} - + {state.mode === MODES.INIT && ( + + + + )} + + {state.mode === MODES.VIEW_ALL_CLASSROOMS && ( + + )} + + {state.mode === MODES.VIEW_ONE_CLASSROOM && ( + + )} + + {state.mode === MODES.CREATE_NEW_CLASSROOM && ( + + )} + + - ); } diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index 68217ce1..4117dd6f 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -124,6 +124,14 @@ const setSelectedClassroom = (state, selectedClassroom) => { return { ...state, selectedClassroom }; }; +const resetSelectedClassroom = (state) => { + return { + ...state, + selectedClassroom: null, + //TODO: reset selected assignment as well. + }; +}; + const setToast = (state, message, status) => { return { ...state, @@ -246,6 +254,7 @@ const wildcamClassrooms = State('wildcamClassrooms', { setClassroomsStatus, setClassroomsList, setSelectedClassroom, + resetSelectedClassroom, setToast, }); diff --git a/src/styles/components/wildcam-classrooms.styl b/src/styles/components/wildcam-classrooms.styl index 1df4e46d..90652c94 100644 --- a/src/styles/components/wildcam-classrooms.styl +++ b/src/styles/components/wildcam-classrooms.styl @@ -1,7 +1,9 @@ +BORDER_SIZE = 0.25rem + .wildcam-classrooms .classrooms-list - border: 1px solid TEAL_MID + border: BORDER_SIZE solid TEAL_MID .classroom-form - border: 1px solid TEAL_MID + border: BORDER_SIZE solid TEAL_MID From bf2110836c01a4a1fa51773de3fcf22a3246bbf2 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 16 May 2018 17:46:55 +0100 Subject: [PATCH 11/24] Classroom component mode added to track component state --- .../components/ClassroomsList.jsx | 34 +++++++++++++------ .../containers/WildCamClassrooms.jsx | 25 +++++++------- src/modules/wildcam-classrooms/ducks/index.js | 32 ++++++++++++----- 3 files changed, 60 insertions(+), 31 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomsList.jsx b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx index 5ccad65c..90cb203b 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomsList.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx @@ -14,6 +14,9 @@ import { Actions } from 'jumpstate'; import Box from 'grommet/components/Box'; import Button from 'grommet/components/Button'; import Heading from 'grommet/components/Heading'; +import Table from 'grommet/components/Table'; +import TableRow from 'grommet/components/TableRow'; +import Edit from 'grommet/components/icons/base/Edit'; import { WILDCAMCLASSROOMS_DATA_STATUS, @@ -42,16 +45,27 @@ class ClassroomsList extends React.Component { > List of Classrooms - {props.classroomsList.map((classroom, index) => { - return ( -
- {classroom.name} -
- ); - })} + + + {props.classroomsList.map((classroom, index) => { + return ( + + + + + ); + })} + +
{classroom.name} + +
); } diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 62f2d426..9cfc0cb9 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -13,6 +13,7 @@ import { connect } from 'react-redux'; import { Actions } from 'jumpstate'; import Box from 'grommet/components/Box'; +import Button from 'grommet/components/Button'; import Spinning from 'grommet/components/icons/Spinning'; import ClassroomsList from '../components/ClassroomsList'; @@ -20,6 +21,7 @@ import ClassroomForm from '../components/ClassroomForm'; import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; import { + WILDCAMCLASSROOMS_COMPONENT_MODE as MODE, WILDCAMCLASSROOMS_DATA_STATUS, WILDCAMCLASSROOMS_INITIAL_STATE, WILDCAMCLASSROOMS_PROPTYPES, @@ -36,9 +38,6 @@ const MODES = { class WildCamClassroom extends React.Component { constructor() { super(); - this.state = { - mode: MODES.INIT, - }; } componentDidMount() { @@ -58,13 +57,13 @@ class WildCamClassroom extends React.Component { Actions.wcc_teachers_fetchClassrooms(props.selectedProgram) .then(() => { Actions.wildcamClassrooms.resetSelectedClassroom(); + Actions.wildcamClassrooms.setComponentMode(MODES.VIEW_ALL_CLASSROOMS); this.setState({ mode: MODES.VIEW_ALL_CLASSROOMS }); }); } render() { const props = this.props; - const state = this.state; //Sanity check if (!props.selectedProgram) return null; @@ -77,22 +76,26 @@ class WildCamClassroom extends React.Component { Classrooms Status: [{props.classroomsStatus}]
Classrooms Count: [{props.classroomsList && props.classroomsList.length}]
- Mode: {this.state.mode} + Mode: {props.componentMode} - {state.mode === MODES.INIT && ( + + + + + {props.componentMode === MODES.INIT && ( )} - {state.mode === MODES.VIEW_ALL_CLASSROOMS && ( + {props.componentMode === MODES.VIEW_ALL_CLASSROOMS && ( )} - {state.mode === MODES.VIEW_ONE_CLASSROOM && ( + {props.componentMode === MODES.VIEW_ONE_CLASSROOM && props.selectedClassroom && ( )} - {state.mode === MODES.CREATE_NEW_CLASSROOM && ( + {props.componentMode === MODES.CREATE_NEW_CLASSROOM && !props.selectedClassroom && ( )} - - - + ); } diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index 4117dd6f..7b350bb3 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -19,6 +19,13 @@ import { get, post, put, httpDelete } from '../../../lib/edu-api'; // Constants // --------- +const WILDCAMCLASSROOMS_COMPONENT_MODES = { + IDLE: 'idle', //Initial state. + VIEW_ALL_CLASSROOMS: 'view all classrooms', + VIEW_ONE_CLASSROOM: 'view all classrooms', + CREATE_NEW_CLASSROOM: 'view all classrooms', +}; + const WILDCAMCLASSROOMS_DATA_STATUS = { IDLE: 'idle', //Initial state. FETCHING: 'fetching', //Fetching classrooms/assignments... @@ -43,7 +50,9 @@ const WILDCAMCLASSROOMS_DATA_STATUS = { }; */ const WILDCAMCLASSROOMS_INITIAL_STATE = { - classroomsStatus: WILDCAMCLASSROOMS_DATA_STATUS.IDLE, + componentMode: WILDCAMCLASSROOMS_COMPONENT_MODES.IDLE, //The mode of the component, e.g. user is editing a classroom. + + classroomsStatus: WILDCAMCLASSROOMS_DATA_STATUS.IDLE, //The status of the data fetch/send. classroomsStatusDetails: null, classroomsList: [], @@ -72,6 +81,7 @@ const WILDCAMCLASSROOMS_INITIAL_STATE = { }; */ const WILDCAMCLASSROOMS_PROPTYPES = { + componentMode: PropTypes.string, classroomsStatus: PropTypes.string, classroomsStatusDetails: PropTypes.object, classroomsList: PropTypes.array, @@ -106,10 +116,12 @@ const WILDCAMCLASSROOMS_MAP_STATE = (state, prefix = '') => { // Jumpstate Synchronous Actions // ----------------------------- -const resetClassrooms = (state, classroomsStatus) => { - return { - ...WILDCAMCLASSROOMS_INITIAL_STATE, - }; +const setComponentMode = (state, componentMode) => { + return { ...state, componentMode }; +}; + +const resetClassrooms = (state) => { + return { ...WILDCAMCLASSROOMS_INITIAL_STATE }; }; const setClassroomsStatus = (state, classroomsStatus, classroomsStatusDetails = null) => { @@ -120,10 +132,6 @@ const setClassroomsList = (state, classroomsList) => { return { ...state, classroomsList }; }; -const setSelectedClassroom = (state, selectedClassroom) => { - return { ...state, selectedClassroom }; -}; - const resetSelectedClassroom = (state) => { return { ...state, @@ -132,6 +140,10 @@ const resetSelectedClassroom = (state) => { }; }; +const setSelectedClassroom = (state, selectedClassroom) => { + return { ...state, selectedClassroom }; +}; + const setToast = (state, message, status) => { return { ...state, @@ -250,6 +262,7 @@ const wildcamClassrooms = State('wildcamClassrooms', { // Initial state initial: WILDCAMCLASSROOMS_INITIAL_STATE, // Actions + setComponentMode, resetClassrooms, setClassroomsStatus, setClassroomsList, @@ -260,6 +273,7 @@ const wildcamClassrooms = State('wildcamClassrooms', { export default wildcamClassrooms; export { + WILDCAMCLASSROOMS_COMPONENT_MODES, WILDCAMCLASSROOMS_DATA_STATUS, WILDCAMCLASSROOMS_INITIAL_STATE, WILDCAMCLASSROOMS_PROPTYPES, From afd93569e2de8268e05ceab9bfb534767d574d9f Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 16 May 2018 18:06:31 +0100 Subject: [PATCH 12/24] Can switch component modes very finely now --- .../components/ClassroomForm.jsx | 147 +++++++++--------- .../components/ClassroomsList.jsx | 18 ++- .../containers/WildCamClassrooms.jsx | 6 +- src/modules/wildcam-classrooms/ducks/index.js | 4 +- 4 files changed, 96 insertions(+), 79 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index 059c920c..5766515d 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -132,11 +132,21 @@ class ClassroomForm extends React.Component { // ? props.assignments[props.selectedClassroom.id] // : []; - if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SUCCESS) { - return this.render_readyState(); - } else if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SENDING) { - return this.render_sendingState(); - } + return ( + + {(() => { + if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SUCCESS) { + return this.render_readyState(); + } else if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SENDING) { + return this.render_sendingState(); + } + })()} + + ); return null; } @@ -146,73 +156,68 @@ class ClassroomForm extends React.Component { const state = this.state; return ( - -
- - {(()=>{ - switch (state.mode) { - case MODES.CREATE: - return 'Create new classroom'; - case MODES.EDIT: - return 'Edit classroom'; - default: - return '???'; - } - })()} - - -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
-
-
- + + {(()=>{ + switch (state.mode) { + case MODES.CREATE: + return 'Create new classroom'; + case MODES.EDIT: + return 'Edit classroom'; + default: + return '???'; + } + })()} + + +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+
+ ); } diff --git a/src/modules/wildcam-classrooms/components/ClassroomsList.jsx b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx index 90cb203b..c57e45d8 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomsList.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomsList.jsx @@ -19,6 +19,7 @@ import TableRow from 'grommet/components/TableRow'; import Edit from 'grommet/components/icons/base/Edit'; import { + WILDCAMCLASSROOMS_COMPONENT_MODES as MODES, WILDCAMCLASSROOMS_DATA_STATUS, WILDCAMCLASSROOMS_INITIAL_STATE, WILDCAMCLASSROOMS_PROPTYPES, @@ -45,6 +46,15 @@ class ClassroomsList extends React.Component { > List of Classrooms + + + + {props.classroomsList.map((classroom, index) => { @@ -56,9 +66,13 @@ class ClassroomsList extends React.Component { diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 9cfc0cb9..603c4d51 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -51,6 +51,8 @@ class WildCamClassroom extends React.Component { } initialiseList(props = this.props) { + console.log('=== initialiseList'); + //Sanity check if (!props.selectedProgram) return; @@ -79,10 +81,6 @@ class WildCamClassroom extends React.Component { Mode: {props.componentMode} - - - - {props.componentMode === MODES.INIT && ( diff --git a/src/modules/wildcam-classrooms/ducks/index.js b/src/modules/wildcam-classrooms/ducks/index.js index 7b350bb3..188d6efb 100644 --- a/src/modules/wildcam-classrooms/ducks/index.js +++ b/src/modules/wildcam-classrooms/ducks/index.js @@ -22,8 +22,8 @@ import { get, post, put, httpDelete } from '../../../lib/edu-api'; const WILDCAMCLASSROOMS_COMPONENT_MODES = { IDLE: 'idle', //Initial state. VIEW_ALL_CLASSROOMS: 'view all classrooms', - VIEW_ONE_CLASSROOM: 'view all classrooms', - CREATE_NEW_CLASSROOM: 'view all classrooms', + VIEW_ONE_CLASSROOM: 'view one classroom', + CREATE_NEW_CLASSROOM: 'create new classroom', }; const WILDCAMCLASSROOMS_DATA_STATUS = { From 949870e6d56b2ae389354c99752817acaa54a531 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 16 May 2018 18:38:25 +0100 Subject: [PATCH 13/24] Classroom edit form --- .../components/ClassroomForm.jsx | 52 ++++++++++--------- .../containers/WildCamClassrooms.jsx | 6 ++- 2 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index 5766515d..70b026aa 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -11,16 +11,21 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Actions } from 'jumpstate'; -import Heading from 'grommet/components/Heading'; import Box from 'grommet/components/Box'; +import Button from 'grommet/components/Button'; import Footer from 'grommet/components/Footer'; import Form from 'grommet/components/Form'; import FormField from 'grommet/components/FormField'; +import Heading from 'grommet/components/Heading'; import TextInput from 'grommet/components/TextInput'; -import Button from 'grommet/components/Button'; //import { config } from '../../../lib/config'; +const MODES = { + CREATE: 'create', + EDIT: 'edit', +} + import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; import { WILDCAMCLASSROOMS_DATA_STATUS, @@ -35,39 +40,33 @@ const INITIAL_FORM_DATA = { description: '', }; -const MODES = { - INIT: 'init', //Invalid state. - CREATE: 'create', - EDIT: 'edit', -}; - class ClassroomForm extends React.Component { constructor() { super(); this.state = { - mode: MODES.INIT, form: INITIAL_FORM_DATA, + //Note: the reason this object structure is one level deep is because + //the state previously had other things stored here, e.g. state.mode. }; } // ---------------------------------------------------------------- - /* Initialises the classroom form. Two paths: - - If there's a classroom selected, we want to EDIT/VIEW it. - - If there's NO classroom selected, we want to CREATE one. + /* Initialises the classroom form. */ initialiseForm(selectedClassroom) { - if (!selectedClassroom) { - this.setState({ - mode: MODES.CREATE, - form: INITIAL_FORM_DATA - }); + if (this.props.mode === MODES.CREATE) { + this.setState({ form: INITIAL_FORM_DATA }); } else { - this.setState({ - ...this.state, - mode: MODES.EDIT, - //TODO: Specify Selected Classroom details here + const originalForm = INITIAL_FORM_DATA; + const updatedForm = {}; + Object.keys(originalForm).map((key) => { + updatedForm[key] = (selectedClassroom[key]) + ? selectedClassroom[key] + : originalForm[key]; }); + console.log('+++ ', updatedForm); + this.setState({ form: updatedForm }); } } @@ -90,7 +89,7 @@ class ClassroomForm extends React.Component { //Sanity check if (!this.props.selectedProgram) return; - if (this.state.mode === MODES.CREATE) { + if (this.props.mode === MODES.CREATE) { return Actions.wcc_teachers_createClassroom({ attributes: this.state.form, relationships: { @@ -162,7 +161,7 @@ class ClassroomForm extends React.Component { > {(()=>{ - switch (state.mode) { + switch (props.mode) { case MODES.CREATE: return 'Create new classroom'; case MODES.EDIT: @@ -222,8 +221,6 @@ class ClassroomForm extends React.Component { } render_sendingState() { - const props = this.props; - return ( Sending... @@ -232,7 +229,10 @@ class ClassroomForm extends React.Component { } }; +ClassroomForm.MODES = MODES; ClassroomForm.defaultProps = { + mode: MODES.CREATE, + // ---------------- selectedProgram: PROGRAMS_INITIAL_STATE.selectedProgram, // ---------------- classroomsStatus: WILDCAMCLASSROOMS_INITIAL_STATE.classroomsStatus, @@ -240,6 +240,8 @@ ClassroomForm.defaultProps = { }; ClassroomForm.propTypes = { + mode: PropTypes.string, + // ---------------- selectedProgram: PROGRAMS_PROPTYPES.selectedProgram, // ---------------- classroomsStatus: WILDCAMCLASSROOMS_PROPTYPES.classroomsStatus, diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 603c4d51..d932f7be 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -93,16 +93,18 @@ class WildCamClassroom extends React.Component { /> )} - {props.componentMode === MODES.VIEW_ONE_CLASSROOM && props.selectedClassroom && ( + {props.componentMode === MODES.VIEW_ONE_CLASSROOM && ( )} - {props.componentMode === MODES.CREATE_NEW_CLASSROOM && !props.selectedClassroom && ( + {props.componentMode === MODES.CREATE_NEW_CLASSROOM && ( Date: Wed, 16 May 2018 19:18:59 +0100 Subject: [PATCH 14/24] We can now access the Create and Edit Classroom forms --- .../components/ClassroomForm.jsx | 13 +++++++++++++ .../components/ClassroomsList.jsx | 18 ++++++++++++------ .../containers/WildCamClassrooms.jsx | 1 - 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index 70b026aa..8d810d6a 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -19,6 +19,8 @@ import FormField from 'grommet/components/FormField'; import Heading from 'grommet/components/Heading'; import TextInput from 'grommet/components/TextInput'; +import LinkPreviousIcon from 'grommet/components/icons/base/LinkPrevious'; + //import { config } from '../../../lib/config'; const MODES = { @@ -28,6 +30,7 @@ const MODES = { import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; import { + WILDCAMCLASSROOMS_COMPONENT_MODES, WILDCAMCLASSROOMS_DATA_STATUS, WILDCAMCLASSROOMS_INITIAL_STATE, WILDCAMCLASSROOMS_PROPTYPES, @@ -171,6 +174,16 @@ class ClassroomForm extends React.Component { } })()} + + + @@ -66,13 +71,14 @@ class ClassroomsList extends React.Component { diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index d932f7be..9ab0e575 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -60,7 +60,6 @@ class WildCamClassroom extends React.Component { .then(() => { Actions.wildcamClassrooms.resetSelectedClassroom(); Actions.wildcamClassrooms.setComponentMode(MODES.VIEW_ALL_CLASSROOMS); - this.setState({ mode: MODES.VIEW_ALL_CLASSROOMS }); }); } From 75a94ae2654edc50426f665ec84446617e8a8abe Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Thu, 17 May 2018 14:19:57 +0100 Subject: [PATCH 15/24] Added TEXT placeholder and improved styles --- .../components/ClassroomForm.jsx | 70 +++++++++++++------ .../components/ClassroomsList.jsx | 54 ++++++++++++-- .../containers/WildCamClassrooms.jsx | 16 ++--- src/styles/components/wildcam-classrooms.styl | 3 + 4 files changed, 104 insertions(+), 39 deletions(-) diff --git a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx index 8d810d6a..b1d364c3 100644 --- a/src/modules/wildcam-classrooms/components/ClassroomForm.jsx +++ b/src/modules/wildcam-classrooms/components/ClassroomForm.jsx @@ -17,9 +17,11 @@ import Footer from 'grommet/components/Footer'; import Form from 'grommet/components/Form'; import FormField from 'grommet/components/FormField'; import Heading from 'grommet/components/Heading'; +import Label from 'grommet/components/Label'; import TextInput from 'grommet/components/TextInput'; import LinkPreviousIcon from 'grommet/components/icons/base/LinkPrevious'; +import SpinningIcon from 'grommet/components/icons/Spinning'; //import { config } from '../../../lib/config'; @@ -28,6 +30,20 @@ const MODES = { EDIT: 'edit', } +const TEXT = { + BACK: 'Back', + SUBMIT: 'Submit', + WORKING: 'Working...', + CREATE_NEW_CLASSROOM: 'Create new classroom', + EDIT_CLASSROOM: 'Edit classroom', + CLASSROOM_FORM: { + NAME: 'Classroom name', + SUBJECT: 'Classroom subject', + SCHOOL: 'School', + DESCRIPTION: 'Description', + } +}; + import { PROGRAMS_PROPTYPES, PROGRAMS_INITIAL_STATE } from '../../../ducks/programs'; import { WILDCAMCLASSROOMS_COMPONENT_MODES, @@ -68,7 +84,6 @@ class ClassroomForm extends React.Component { ? selectedClassroom[key] : originalForm[key]; }); - console.log('+++ ', updatedForm); this.setState({ form: updatedForm }); } } @@ -144,7 +159,7 @@ class ClassroomForm extends React.Component { if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SUCCESS) { return this.render_readyState(); } else if (props.classroomsStatus === WILDCAMCLASSROOMS_DATA_STATUS.SENDING) { - return this.render_sendingState(); + return this.render_workingState(); } })()} @@ -158,35 +173,25 @@ class ClassroomForm extends React.Component { const state = this.state; return ( -
{(()=>{ switch (props.mode) { case MODES.CREATE: - return 'Create new classroom'; + return TEXT.CREATE_NEW_CLASSROOM; case MODES.EDIT: - return 'Edit classroom'; + return TEXT.EDIT_CLASSROOM default: return '???'; } })()} - - - + />
{classroom.name} {classroom.name}
@@ -72,14 +95,12 @@ class ClassroomsList extends React.Component { ); @@ -89,14 +110,33 @@ class ClassroomsList extends React.Component { ); } + + render_workingState() { + return ( + + + + + ); + } + + }; ClassroomsList.defaultProps = { classroomsList: WILDCAMCLASSROOMS_INITIAL_STATE.classroomsList, + classroomsStatus: WILDCAMCLASSROOMS_INITIAL_STATE.classroomsStatus, }; ClassroomsList.propTypes = { classroomsList: WILDCAMCLASSROOMS_PROPTYPES.classroomsList, + classroomsStatus: WILDCAMCLASSROOMS_PROPTYPES.classroomsStatus, }; export default ClassroomsList; diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 9ab0e575..4e644183 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -14,7 +14,6 @@ import { Actions } from 'jumpstate'; import Box from 'grommet/components/Box'; import Button from 'grommet/components/Button'; -import Spinning from 'grommet/components/icons/Spinning'; import ClassroomsList from '../components/ClassroomsList'; import ClassroomForm from '../components/ClassroomForm'; @@ -35,6 +34,10 @@ const MODES = { CREATE_NEW_CLASSROOM: 'create new classroom', }; +const TEXT = { + +}; + class WildCamClassroom extends React.Component { constructor() { super(); @@ -79,19 +82,14 @@ class WildCamClassroom extends React.Component { Classrooms Count: [{props.classroomsList && props.classroomsList.length}]
Mode: {props.componentMode} - - {props.componentMode === MODES.INIT && ( - - - - )} - + {props.componentMode === MODES.VIEW_ALL_CLASSROOMS && ( )} - + {props.componentMode === MODES.VIEW_ONE_CLASSROOM && ( Date: Thu, 17 May 2018 14:57:07 +0100 Subject: [PATCH 16/24] Added toasts --- .../containers/WildCamClassrooms.jsx | 33 +++++++++++++++---- src/modules/wildcam-classrooms/ducks/index.js | 16 ++++++--- src/styles/components/wildcam-classrooms.styl | 3 +- 3 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx index 4e644183..06291c34 100644 --- a/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx +++ b/src/modules/wildcam-classrooms/containers/WildCamClassrooms.jsx @@ -14,6 +14,7 @@ import { Actions } from 'jumpstate'; import Box from 'grommet/components/Box'; import Button from 'grommet/components/Button'; +import Toast from 'grommet/components/Toast'; import ClassroomsList from '../components/ClassroomsList'; import ClassroomForm from '../components/ClassroomForm'; @@ -77,12 +78,15 @@ class WildCamClassroom extends React.Component { colorIndex="grey-5" className="wildcam-classrooms" > - - Classrooms Status: [{props.classroomsStatus}]
- Classrooms Count: [{props.classroomsList && props.classroomsList.length}]
- Mode: {props.componentMode} - - + {props.toast && props.toast.message && ( + { Actions.wildcamClassrooms.resetToast() }} + > + {props.toast.message} + + )} + {props.componentMode === MODES.VIEW_ALL_CLASSROOMS && ( )} + + +

Debug Panel

+ + Classrooms Status: [{props.classroomsStatus}]
+ Classrooms Count: [{props.classroomsList && props.classroomsList.length}]
+ Mode: {props.componentMode} + + + -
+ /> {classroom.name} +