Skip to content

Commit

Permalink
Dashboard SIS groups issue with rerendering resolved.
Browse files Browse the repository at this point in the history
  • Loading branch information
Martin Krulis committed Nov 16, 2017
1 parent 786227b commit 3ec60d3
Show file tree
Hide file tree
Showing 11 changed files with 335 additions and 223 deletions.
10 changes: 9 additions & 1 deletion src/components/forms/Fields/SelectField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ const SelectField = ({
meta: { touched, error },
label,
options,
addEmptyOption = false,
emptyOptionCaption = '...',
...props
}) =>
<FormGroup
Expand All @@ -24,6 +26,10 @@ const SelectField = ({
{label}
</ControlLabel>
<FormControl {...input} {...props} componentClass="select">
{addEmptyOption &&
<option value={''} key={'-1'}>
{emptyOptionCaption}
</option>}
{options.map(({ key, name }, i) =>
<option value={key} key={i}>
{name}
Expand Down Expand Up @@ -51,7 +57,9 @@ SelectField.propTypes = {
PropTypes.string,
PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage]) })
]).isRequired,
options: PropTypes.array.isRequired
options: PropTypes.array.isRequired,
addEmptyOption: PropTypes.bool,
emptyOptionCaption: PropTypes.string
};

export default SelectField;
8 changes: 4 additions & 4 deletions src/components/forms/SisBindGroupForm/SisBindGroupForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ const SisBindGroupForm = ({
defaultMessage="Bind existing ReCodEx group to SIS"
/>
}
type={hasSucceeded ? 'success' : undefined}
succeeded={hasSucceeded}
dirty={anyTouched}
footer={
<div className="text-center">
<SubmitButton
Expand Down Expand Up @@ -78,9 +79,8 @@ const SisBindGroupForm = ({
defaultMessage="Group:"
/>
}
options={[{ key: '', name: '...' }].concat(
groups.map(group => ({ key: group.id, name: group.name }))
)}
options={groups}
addEmptyOption
/>
</FormBox>;

Expand Down
156 changes: 83 additions & 73 deletions src/components/forms/SisCreateGroupForm/SisCreateGroupForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { reduxForm, Field } from 'redux-form';
import { FormattedMessage } from 'react-intl';
Expand All @@ -9,80 +9,90 @@ import { SelectField } from '../Fields';
import { Alert } from 'react-bootstrap';
import SubmitButton from '../SubmitButton';

const SisCreateGroupForm = ({
invalid,
anyTouched,
handleSubmit,
submitFailed: hasFailed,
submitting,
hasSucceeded,
groups
}) =>
<FormBox
title={
<FormattedMessage
id="app.sisCreateGroupForm.title"
defaultMessage="Create ReCodEx group from SIS"
/>
}
type={hasSucceeded ? 'success' : undefined}
footer={
<div className="text-center">
<SubmitButton
id="sisCreateGroup"
invalid={invalid}
submitting={submitting}
dirty={anyTouched}
hasSucceeded={hasSucceeded}
hasFailed={hasFailed}
handleSubmit={handleSubmit}
messages={{
submit: (
<FormattedMessage
id="app.sisCreateGroupForm.submit"
defaultMessage="Create"
/>
),
submitting: (
<FormattedMessage
id="app.sisCreateGroupForm.submitting"
defaultMessage="Creating ..."
/>
),
success: (
<FormattedMessage
id="app.sisCreateGroupForm.success"
defaultMessage="The group was created."
/>
)
}}
/>
</div>
}
>
{hasFailed &&
<Alert bsStyle="danger">
<FormattedMessage
id="app.sisCreateGroupForm.failed"
defaultMessage="Creating group failed. Please try again later."
/>
</Alert>}
class SisCreateGroupForm extends Component {
render() {
const {
invalid,
anyTouched,
handleSubmit,
submitFailed: hasFailed,
submitting,
hasSucceeded,
groups
} = this.props;

<Field
name="parentGroupId"
required
component={SelectField}
label={
<FormattedMessage
id="app.sisCreateGroupForm.parentGroup"
defaultMessage="Parent group:"
return (
<FormBox
title={
<FormattedMessage
id="app.sisCreateGroupForm.title"
defaultMessage="Create ReCodEx group from SIS"
/>
}
succeeded={hasSucceeded}
dirty={anyTouched}
footer={
<div className="text-center">
<SubmitButton
id="sisCreateGroup"
invalid={invalid}
submitting={submitting}
dirty={anyTouched}
hasSucceeded={hasSucceeded}
hasFailed={hasFailed}
handleSubmit={handleSubmit}
messages={{
submit: (
<FormattedMessage
id="app.sisCreateGroupForm.submit"
defaultMessage="Create"
/>
),
submitting: (
<FormattedMessage
id="app.sisCreateGroupForm.submitting"
defaultMessage="Creating ..."
/>
),
success: (
<FormattedMessage
id="app.sisCreateGroupForm.success"
defaultMessage="The group was created."
/>
)
}}
/>
</div>
}
>
{hasFailed &&
<Alert bsStyle="danger">
<FormattedMessage
id="app.sisCreateGroupForm.failed"
defaultMessage="Creating group failed. Please try again later."
/>
</Alert>}

<Field
name="parentGroupId"
required
component={SelectField}
label={
<FormattedMessage
id="app.sisCreateGroupForm.parentGroup"
defaultMessage="Parent group:"
/>
}
options={groups.map(group => ({
key: group.id,
name: group.name
}))}
addEmptyOption
/>
}
options={[{ key: '', name: '...' }].concat(
groups.map(group => ({ key: group.id, name: group.name }))
)}
/>
</FormBox>;
</FormBox>
);
}
}

SisCreateGroupForm.propTypes = {
onSubmit: PropTypes.func.isRequired,
Expand Down
32 changes: 24 additions & 8 deletions src/containers/SisSupervisorGroupsContainer/SisSupervisorGroupsContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { FormattedMessage, injectIntl } from 'react-intl';
import Box from '../../components/widgets/Box';
Expand Down Expand Up @@ -36,6 +37,8 @@ const oddEven = {
en: ['odd', 'even']
};

const EMPTY_ARRAY = [];

const getLocalizedData = (obj, locale) => {
if (obj && obj[locale]) {
return obj[locale];
Expand All @@ -47,6 +50,15 @@ const getLocalizedData = (obj, locale) => {
};

class SisSupervisorGroupsContainer extends Component {
componentDidUpdate(prevProps) {
console.log('SisSupervisorGroupsContainer');
Object.keys(this.props).forEach(key => {
if (this.props[key] !== prevProps[key]) {
console.log(key, 'changed from', prevProps[key], 'to', this.props[key]);
}
});
}

componentDidMount() {
this.props.loadData(this.props.currentUserId);
}
Expand Down Expand Up @@ -81,6 +93,7 @@ class SisSupervisorGroupsContainer extends Component {
links: { GROUP_URI_FACTORY },
intl: { locale }
} = this.props;

return (
<Box
title={
Expand Down Expand Up @@ -115,7 +128,7 @@ class SisSupervisorGroupsContainer extends Component {
{`${term.year}-${term.term}`}
</h4>
<ResourceRenderer
resource={sisCourses(term.year, term.term)}
resource={sisCourses.get(`${term.year}-${term.term}`)}
>
{courses =>
<div>
Expand Down Expand Up @@ -232,7 +245,7 @@ class SisSupervisorGroupsContainer extends Component {
<Row>
<Col xs={6}>
<ResourceRenderer
resource={sisPossibleParents(
resource={sisPossibleParents.get(
course.course.code
)}
>
Expand Down Expand Up @@ -269,7 +282,12 @@ class SisSupervisorGroupsContainer extends Component {
term.term
)}
groups={
groups !== null ? groups : []
groups !== null
? groups.map(group => ({
key: group.id,
name: group.name
}))
: EMPTY_ARRAY
}
/>
</Col>
Expand Down Expand Up @@ -301,7 +319,7 @@ SisSupervisorGroupsContainer.propTypes = {
currentUserId: PropTypes.string,
groups: PropTypes.array,
loadData: PropTypes.func.isRequired,
sisCourses: PropTypes.func.isRequired,
sisCourses: ImmutablePropTypes.map,
createGroup: PropTypes.func.isRequired,
bindGroup: PropTypes.func.isRequired,
links: PropTypes.object,
Expand All @@ -317,10 +335,8 @@ export default injectIntl(
return {
sisStatus: sisStateSelector(state),
currentUserId,
sisCourses: (year, term) =>
sisSupervisedCoursesSelector(currentUserId, year, term)(state),
sisPossibleParents: courseId =>
sisPossibleParentsSelector(courseId)(state)
sisCourses: sisSupervisedCoursesSelector(state),
sisPossibleParents: sisPossibleParentsSelector(state)
};
},
dispatch => ({
Expand Down
Loading

0 comments on commit 3ec60d3

Please sign in to comment.