better approach for handling prop->state on Register

RocketChat · Aug 9, 2021 · 79aefde · 79aefde
1 parent e6c05b6
commit 79aefde
Showing 1 changed file with 74 additions and 29 deletions.
diff --git 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 }) {