import React, { Component } from 'react'; import { Row, Col, Form, FormGroup, Label, Input } from 'reactstrap'; import { config } from '../../config'; import Card from '../../components/Card'; import DropDown from '../../components/DropDown'; import Button from '../../components/Button'; // TODO: improve form validation class CreateTicket extends Component { constructor(props) { super(props); this.state = { ticketId: '', ticketErr: '', firstName: '', lastName: '', email: '', type: '', subject: '', message: '', categories: [] }; this.handleInputChange = this.handleInputChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } componentDidMount() { fetch(`${config.baseURL}categories?type=TicketType`, { method: 'GET', headers: { 'Content-Type': 'application/json' } }) .then(res => res.json()) .then((json) => { this.setState({ categories: json.data }); }) .catch((err) => { }); } handleInputChange(event) { const target = event.target; const name = target.name; const value = target.type === 'checkbox' ? target.checked : target.value; this.setState({ [name]: value }); } handleSubmit(event) { event.preventDefault(); // const { ticketId, error, categories, ...rest } = this.state; const { state } = this; if (!state.firstName || !state.lastName || !state.email || !state.message || state.type === '---' || !state.subject) { alert('Form is invalid'); return; } const body = { firstName: state.firstName, lastName: state.lastName, email: state.email, type: state.type, subject: state.subject, message: state.message } fetch(`${config.baseURL}tickets`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }) .then(res => res.json()) .then((json) => { this.setState({ ticketId: json.data.ticketId }); }) .catch((err) => { this.setState({ error: err.message }); }); } render() { if (this.state.ticketId) { return ( {`Ticket ID: ${this.state.ticketId}`} ); } else if (this.state.error) { return ( {this.state.error} ); } return ( First Name Last Name Email Type Subject Message Open Ticket ); } } export default CreateTicket;
{`Ticket ID: ${this.state.ticketId}`}
{this.state.error}