add Home

src/containers/Home/Home.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import {
+  Container,
+  Row,
+  Col
+} from 'reactstrap';
+
+import OpenTicketCard from './OpenTicketCard';
+import ViewTicketCard from './ViewTicketCard';
+
+import './Home.css';
+
+
+class Home extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <Container>
+          <Row>
+            <Col className="col" xs="12" sm="6">
+              <OpenTicketCard />
+            </Col>
+            <Col className="col" xs="12" sm="6">
+              <ViewTicketCard />
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default Home;

src/containers/Home/OpenTicketCard.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from 'reactstrap';
+
+import Card from '../../components/Card';
+import Logo from '../../components/Logo';
+
+import logoSVG from '../../assets/assistance.svg';
+
+const style={
+  height: '160px',
+  margin: '30px'
+};
+
+const LogoOpenTicket = () => {
+  return (
+    <Logo
+      style={style}
+      src={logoSVG}
+      alt="open ticket" />
+  );
+}
+const ButtonPrimary = () => {
+  return (
+    <Button 
+      tag={Link}
+      to="/open"
+      color="primary"
+    >Open Ticket</Button>
+  )
+}
+
+class OpenTicketCard extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+
+    return (
+      <div>
+        <Card
+          align="center"
+          title="Open Ticket"
+          message="Open new ticket"
+          body={<LogoOpenTicket />} 
+          footer={<ButtonPrimary />} />
+      </div>
+    );
+  }
+}
+
+export default OpenTicketCard;

src/containers/Home/ViewTicketCard.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
+import Card from '../../components/Card';
+import SearchForm from '../../components/SearchForm';
+
+import logoSVG from '../../assets/ticket.svg';
+import Logo from '../../components/Logo';
+
+const style={
+  height: '150px',
+  margin: '30px'
+};
+
+const LogoViewTicket = () => {
+  return (
+    <Logo
+      style={style}
+      src={logoSVG}
+      alt="open ticket" />
+  );
+}
+
+class ViewTicketCard extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ticketId: '',
+      submitted: false
+    };
+
+    // binding
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChangeInput = this.handleChangeInput.bind(this);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.setState({
+      submitted: true
+    });
+  }
+
+  handleChangeInput(e) {
+    this.setState({
+      ticketId: e.target.value
+    });
+  }
+
+  render() {
+
+    if (this.state.submitted) {
+      return (<Redirect to={`/ticket/${this.state.ticketId}`} />);
+    }
+    
+    let Search = (
+      <SearchForm
+        name="search"
+        id="search"
+        placeholder="ticket ID"
+        onChange={this.handleChangeInput}
+        onSubmit={this.handleSubmit}
+        value={this.state.ticketId}
+        buttonName="View"
+      />);
+
+    return (
+      <div>
+        <Card
+          align="center"
+          title="View Ticket"
+          message="View the ticket status"
+          body={<LogoViewTicket />}
+          footer={Search} />
+      </div>
+    );
+  }
+}
+
+export default ViewTicketCard;