scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-09 00:49:07 +08:00
Code Issues Projects Releases Packages Wiki Activity

add flow and fix api request in updateTeamNameModal component

Browse source
This commit is contained in:
zmagod 2017-10-23 10:11:39 +02:00
parent 7cf43a299a
commit 7d6d95630d
1 changed files with 41 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
View file

@ -1,5 +1,6 @@
// @flow
import React, { Component } from "react"; import React, { Component } from "react";
import PropTypes, { bool, number, string, func } from "prop-types"; import type { Node } from "react";
import { import {
Modal, Modal,
Button, Button,
@ -11,37 +12,55 @@ import {
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import _ from "lodash"; import _ from "lodash";
import styled from "styled-components"; import styled from "styled-components";
import axios from "../../../../../config/axios"; import { updateTeam } from "../../../../../services/api/teams_api";
import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric"; import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric";
import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors"; import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`; const StyledHelpBlock = styled(HelpBlock)`
color: ${COLOR_APPLE_BLOSSOM};
`;
class UpdateTeamNameModal extends Component { type Team = {
constructor(props) { id: number,
name: string
};
type State = {
errorMessage: Node,
name: string
}
type Props = {
showModal: boolean,
hideModal: Function,
team: Team,
updateTeamCallback: Function
};
class UpdateTeamNameModal extends Component<Props, State> {
constructor(props: Props) {
super(props); super(props);
this.state = { errorMessage: "", name: props.team.name }; (this: any).state = { errorMessage: "", name: props.team.name };
this.onCloseModal = this.onCloseModal.bind(this); (this: any).onCloseModal = this.onCloseModal.bind(this);
this.updateName = this.updateName.bind(this); (this: any).updateName = this.updateName.bind(this);
this.handleName = this.handleName.bind(this); (this: any).handleName = this.handleName.bind(this);
this.getValidationState = this.getValidationState.bind(this); (this: any).getValidationState = this.getValidationState.bind(this);
} }
onCloseModal() { onCloseModal(): void {
this.setState({ errorMessage: "", name: "" }); (this: any).setState({ errorMessage: "", name: "" });
this.props.hideModal(); this.props.hideModal();
} }
getValidationState() { getValidationState(): string | null {
return this.state.errorMessage.length > 0 ? "error" : null; return String(this.state.errorMessage).length > 0 ? "error" : null;
} }
handleName(el) { handleName(el: SyntheticEvent<HTMLButtonElement>): void {
const { value } = el.target; const { value } = el.currentTarget;
if (value.length > NAME_MAX_LENGTH) { if (value.length > NAME_MAX_LENGTH) {
this.setState({ (this: any).setState({
errorMessage: ( errorMessage: (
<FormattedMessage <FormattedMessage
id="error_messages.text_too_long" id="error_messages.text_too_long"
@ -54,24 +73,16 @@ class UpdateTeamNameModal extends Component {
} }
} }
updateName() { updateName(): void {
axios({ updateTeam(this.props.team.id, { name: this.state.name })
method: "post",
url: TEAM_UPDATE_PATH,
withCredentials: true,
data: {
team_id: this.props.team.id,
team: { name: this.state.name }
}
})
.then(response => { .then(response => {
this.props.updateTeamCallback(response.data.team); this.props.updateTeamCallback(response);
this.onCloseModal(); this.onCloseModal();
}) })
.catch(error => this.setState({ errorMessage: error.message })); .catch(error => this.setState({ errorMessage: error.message }));
} }
render() { render(): Node {
return ( return (
<Modal show={this.props.showModal} onHide={this.onCloseModal}> <Modal show={this.props.showModal} onHide={this.onCloseModal}>
<Modal.Header closeButton> <Modal.Header closeButton>
@ -113,14 +124,4 @@ class UpdateTeamNameModal extends Component {
} }
} }
UpdateTeamNameModal.propTypes = {
showModal: bool.isRequired,
hideModal: func.isRequired,
team: PropTypes.shape({
id: number.isRequired,
name: string
}).isRequired,
updateTeamCallback: func.isRequired
};
export default UpdateTeamNameModal; export default UpdateTeamNameModal;