validate memeber name, before adding to group

This commit is contained in:
Sebastian Sdorra
2018-08-08 13:42:36 +02:00
parent 72dab98c49
commit b5c609f110

View File

@@ -4,7 +4,7 @@ import React from "react";
import { translate } from "react-i18next"; import { translate } from "react-i18next";
import AddButton from "../../components/buttons/AddButton"; import AddButton from "../../components/buttons/AddButton";
import InputField from "../../components/forms/InputField"; import InputField from "../../components/forms/InputField";
import { isMemberNameValid } from "./groupValidation" import { isMemberNameValid } from "./groupValidation";
type Props = { type Props = {
t: string => string, t: string => string,
@@ -33,32 +33,38 @@ class AddMemberField extends React.Component<Props, State> {
label={t("add-member-textfield.label")} label={t("add-member-textfield.label")}
errorMessage={t("add-member-textfield.error")} errorMessage={t("add-member-textfield.error")}
onChange={this.handleAddMemberChange} onChange={this.handleAddMemberChange}
validationError={this.state.validationError} //TODO: validate member name validationError={this.state.validationError}
value={this.state.memberToAdd} value={this.state.memberToAdd}
onReturnPressed={this.appendMember} onReturnPressed={this.appendMember}
/> />
<AddButton <AddButton
label={t("add-member-button.label")} label={t("add-member-button.label")}
action={this.addButtonClicked} action={this.addButtonClicked}
disabled={!isMemberNameValid(this.state.memberToAdd)}
/> />
</div> </div>
); );
} }
addButtonClicked = (event: Event) => { addButtonClicked = (event: Event) => {
event.preventDefault(); event.preventDefault();
this.appendMember(); this.appendMember();
}; };
appendMember = () => { appendMember = () => {
this.props.addMember(this.state.memberToAdd); const { memberToAdd } = this.state;
if (isMemberNameValid(memberToAdd)) {
this.props.addMember(memberToAdd);
this.setState({ ...this.state, memberToAdd: "" }); this.setState({ ...this.state, memberToAdd: "" });
}
}; };
handleAddMemberChange = (membername: string) => { handleAddMemberChange = (membername: string) => {
this.setState({ ...this.state, memberToAdd: membername, validationError: !isMemberNameValid(membername) }); this.setState({
...this.state,
memberToAdd: membername,
validationError: membername.length > 0 && !isMemberNameValid(membername)
});
}; };
} }