add form

src/containers/OpenTicket/OpenTicket.js

@@ -1,9 +1,16 @@
 import React, { Component } from 'react';
+import {
+  Row,
+  Col,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  Button
+} from 'reactstrap';
 
 import Card from '../../components/Card';
-import InsertForm from '../../components/InsertForm';
+import DropDown from '../../components/DropDown';
-import MessageCard from '../MessageCard';
-
 
 class OpenTicket extends Component {
   constructor(props) {
@@ -17,13 +24,35 @@ class OpenTicket extends Component {
       email: '',
       type: '',
       subject: '',
-      message: ''
+      message: '',
+      categories: [],
+      categoriesLoaded: false
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
+  componentDidMount() {
+    fetch("http://localhost:3001/categories", {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' }
+    })
+      .then((res) => {
+        return res.json();
+      })
+      .then((json) => {
+        this.setState({
+          categories: json
+        });
+      })
+      .catch((err) => {
+        this.setState({
+          ticketErr: err.message
+        });
+      });
+  }
+
   handleInputChange(event) {
     const target = event.target;
     const name = target.name;
@@ -39,8 +68,8 @@ class OpenTicket extends Component {
 
     const { ticketId, ticketErr, ...rest } = this.state;
 
-    if(!rest.firstName || !rest.lastName || !rest.email || !rest.message 
+    if (!rest.firstName || !rest.lastName || !rest.email || !rest.message
-      || rest.type === '---' || !rest.subject ) {
+      || rest.type === '---' || !rest.subject) {
       alert('Form is invalid');
       return;
 
@@ -68,41 +97,151 @@ class OpenTicket extends Component {
 
   render() {
 
+
+
     if (this.state.ticketId) {
       return (
-        <MessageCard 
+        <Card title="Ticket Created">
-          title="Ticket Created"
+          <p>{`Ticket ID: ${this.state.ticketId}`}</p>
-          message={`Ticket ID: ${this.state.ticketId}`} />
+        </Card>
       );
-    } else if(this.state.ticketErr) {
+    } else if (this.state.ticketErr) {
       return (
-        <MessageCard 
+        <Card title="Error">
-        title="Error"
+          <p>{this.state.ticketErr}</p>
-        message={this.state.ticketErr} />
+        </Card>
       );
     }
 
 
     return (
-      <div>
       <Card
         align="left"
         title="Open Ticket"
-          body={
+      >
-            <InsertForm 
+        <Form onSubmit={this.handleSubmit}>
-              handleInputChange={this.handleInputChange} 
+          <Row form>
-              handleSubmit={this.handleSubmit}
+            <Col md={6}>
-              firstName={this.state.firstName}
+              <FormGroup>
-              lastName={this.state.lastName}
+                <Label
-              email={this.state.email}
+                  className="font-weight-bold"
-              type={this.state.type}
+                  for="firstName"
-              subject={this.state.subject}
+                >
-              message={this.state.message}
+                  First Name
-            />
+                      </Label>
-          }
-        />
 
-      </div>
+                <Input
+                  name="firstName"
+                  type="text"
+                  value={this.state.firstName}
+                  onChange={this.handleInputChange}
+                  placeholder="Jon"
+                />
+              </FormGroup>
+            </Col>
+
+            <Col md={6}>
+              <FormGroup>
+                <Label
+                  className="font-weight-bold"
+                  for="lastName"
+                >
+                  Last Name
+                      </Label>
+
+                <Input
+                  name="lastName"
+                  type="text"
+                  value={this.state.lastName}
+                  onChange={this.handleInputChange}
+                  placeholder="Snow"
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row form>
+            <Col md={12}>
+              <FormGroup>
+                <Label
+                  className="font-weight-bold"
+                  for="email"
+                >
+                  Email
+                      </Label>
+
+                <Input name="email"
+                  type="email"
+                  value={this.state.email}
+                  onChange={this.handleInputChange}
+                  placeholder="example@mail.com"
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row form>
+            <Col md={12}>
+              <FormGroup>
+                <Label
+                  className="font-weight-bold"
+                  for="type"
+                >
+                  Type
+                      </Label>
+
+                <DropDown options={this.state.categories} />
+              </FormGroup>
+            </Col>
+          </Row>
+
+          <Row form>
+            <Col sm={12}>
+              <FormGroup>
+                <Label
+                  className="font-weight-bold"
+                  for="subject"
+                >
+                  Subject
+                      </Label>
+
+                <Input
+                  name="subject"
+                  type="text"
+                  value={this.state.subject}
+                  onChange={this.handleInputChange}
+                  placeholder="Subject"
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row form>
+            <Col sm={12}>
+              <FormGroup>
+                <Label
+                  className="font-weight-bold"
+                  for="message"
+                >
+                  Message
+                      </Label>
+
+                <Input
+                  name="message"
+                  type="textarea"
+                  value={this.state.message}
+                  onChange={this.handleInputChange}
+                  placeholder="Message"
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row form>
+            <Col align="center" md={{ size: 8, offset: 2 }}>
+              <FormGroup>
+                <Button type="submit" color="primary">Open Ticket</Button>
+              </FormGroup>
+            </Col>
+          </Row>
+        </Form>
+      </Card>
     );
   }
 }