From 707606f491cdc0897ff901c5d3931bcd7eb74fef Mon Sep 17 00:00:00 2001 From: Ariel Barreiro Date: Sat, 7 Aug 2021 00:27:18 -0300 Subject: [PATCH 1/2] Return state so that the component can be updated --- src/routes/Register/component.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Register/component.js b/src/routes/Register/component.js index 2c3b51b1c..75018fb03 100644 --- a/src/routes/Register/component.js +++ b/src/routes/Register/component.js @@ -163,6 +163,7 @@ export default class Register extends Component { const error = validate(nextProps, { name, value, regexp }); state = { ...state, [name]: { ...state[name], value, error, showError: false } }; } + return state; } state = { From 294505c4019986974e95b6466d69ff6056d13b73 Mon Sep 17 00:00:00 2001 From: Ariel Barreiro Date: Mon, 9 Aug 2021 19:01:51 -0300 Subject: [PATCH 2/2] better approach for handling prop->state on Register --- src/routes/Register/component.js | 103 ++++++++++++++++++++++--------- 1 file changed, 74 insertions(+), 29 deletions(-) diff --git a/src/routes/Register/component.js b/src/routes/Register/component.js index 75018fb03..d3b1b2e7d 100644 --- a/src/routes/Register/component.js +++ b/src/routes/Register/component.js @@ -133,39 +133,48 @@ const getDefaultState = (props) => { return state; }; -export default class Register extends Component { - static getDerivedStateFromProps(nextProps, state) { - const { hasNameField, hasEmailField, hasDepartmentField, departmentDefault, departments, nameDefault, emailDefault } = nextProps; - - const nameValue = nameDefault || ''; - if (hasNameField && (!state.name || state.name !== nameValue)) { - state = { ...state, name: { ...state.name, value: nameValue } }; - } else if (!hasNameField) { - state = { ...state, name: null }; - } +const nameDefaultUpdated = (props, state) => { + const { hasNameField, nameDefault } = props; + + const nameValue = nameDefault || ''; + if (hasNameField && (!state.name || state.name !== nameValue)) { + state = { ...state, name: { ...state.name, value: nameValue } }; + } else if (!hasNameField) { + state = { ...state, name: null }; + } - const emailValue = emailDefault || ''; - if (hasEmailField && (!state.email || state.name !== emailValue)) { - state = { ...state, email: { ...state.email, value: emailValue } }; - } else if (!hasEmailField) { - state = { ...state, email: null }; - } + return state; +} - const departmentValue = departmentDefault || getDefaultDepartment(departments); - const showDepartmentField = hasDepartmentField && departments && departments.length > 1; - if (showDepartmentField && (!state.department || state.department !== departmentValue)) { - state = { ...state, department: { ...state.department, value: departmentValue } }; - } else if (!showDepartmentField) { - state = { ...state, department: null }; - } +const emailDefaultUpdated = (props, state) => { + const { hasEmailField, emailDefault } = props; - for (const { fieldName: name, value, regexp } of getValidableFields(state)) { - const error = validate(nextProps, { name, value, regexp }); - state = { ...state, [name]: { ...state[name], value, error, showError: false } }; - } - return state; + const emailValue = emailDefault || ''; + if (hasEmailField && (!state.email || state.name !== emailValue)) { + state = { ...state, email: { ...state.email, value: emailValue } }; + } else if (!hasEmailField) { + state = { ...state, email: null }; + } + + return state; +} + +const departmentDefaultUpdated = (props, state) => { + const { hasDepartmentField, departmentDefault, departments } = props; + + const departmentValue = departmentDefault || getDefaultDepartment(departments); + const showDepartmentField = hasDepartmentField && departments && departments.length > 1; + if (showDepartmentField && (!state.department || state.department !== departmentValue)) { + state = { ...state, department: { ...state.department, value: departmentValue } }; + } else if (!showDepartmentField) { + state = { ...state, department: null }; } + return state; +} + +export default class Register extends Component { + state = { name: null, email: null, @@ -200,7 +209,43 @@ export default class Register extends Component { constructor(props) { super(props); - this.state = getDefaultState(props); + const { hasNameField, hasEmailField, hasDepartmentField, departmentDefault, departments, nameDefault, emailDefault } = props; + let state = getDefaultState(props); + state = nameDefaultUpdated(props, state); + state = emailDefaultUpdated(props, state); + state = departmentDefaultUpdated(props, state); + + for (const { fieldName: name, value, regexp } of getValidableFields(state)) { + const error = validate(props, { name, value, regexp }); + state = { ...state, [name]: { ...state[name], value, error, showError: !!value } }; + } + + this.state = state; + } + + componentDidUpdate(prevProps) { + let state = this.state; + let update = false; + if (this.props.hasNameField !== prevProps.hasNameField || this.props.nameDefault !== prevProps.nameDefault) { + state = nameDefaultUpdated(this.props, state); + update = true; + } + if (this.props.hasEmailField !== prevProps.hasEmailField || this.props.emailDefault !== prevProps.emailDefault) { + state = emailDefaultUpdated(this.props, state); + update = true; + } + if (this.props.hasDepartmentField !== prevProps.hasDepartmentField || JSON.stringify(this.props.departments) !== JSON.stringify(prevProps.departments) || this.props.departmentDefault !== prevProps.departmentDefault) { + state = departmentDefaultUpdated(this.props, state); + update = true; + } + + if (update) { + for (const { fieldName: name, value, regexp } of getValidableFields(state)) { + const error = validate(this.props, { name, value, regexp }); + state = { ...state, [name]: { ...state[name], value, error, showError: !!value } }; + } + this.setState(state); + } } render({ title, color, message, loading, departments, customFields, ...props }, { name, email, department, ...state }) {