Skip to content
This repository was archived by the owner on Jun 30, 2022. It is now read-only.

Allow setGuestName and setGuestEmail to update inputs #627

Open
hanoii wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Allow setGuestName and setGuestEmail to update inputs #627

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
707606f
Return state so that the component can be updated
hanoii Aug 7, 2021
294505c
better approach for handling prop->state on Register
hanoii Aug 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 74 additions & 28 deletions src/routes/Register/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,38 +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 } };
}
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,
Expand Down Expand Up @@ -199,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 }) {
Expand Down