diff --git a/src/containers/ViewTicket/ViewTicket.css b/src/containers/ViewTicket/ViewTicket.css new file mode 100644 index 0000000..dbec9ab --- /dev/null +++ b/src/containers/ViewTicket/ViewTicket.css @@ -0,0 +1,4 @@ +#table-ticket-info { + + +} \ No newline at end of file diff --git a/src/containers/ViewTicket/ViewTicket.js b/src/containers/ViewTicket/ViewTicket.js new file mode 100644 index 0000000..1017d50 --- /dev/null +++ b/src/containers/ViewTicket/ViewTicket.js @@ -0,0 +1,110 @@ +import React, { Component } from 'react'; +import { + Card, + CardBody, + CardTitle, + CardText, + Col, + Row, + Table +} from 'reactstrap'; + +import './ViewTicket.css'; + +class ViewTicket extends Component { + constructor(props) { + super(props); + + this.state = { + data: {}, + isLoading: false, + }; + } + + componentDidMount() { + this.setState({ isLoading: true }); + + const { match: {params}} = this.props; + + fetch(`http://localhost:3001/tickets?id=${params.ticketId}`) + .then(response => { + if (response.ok) { + return response.json(); + } else { + throw new Error('Error API'); + } + }) + .then(json => { + if(json.length){ + this.setState({ data: json[0], isLoading: false }) + } else { + throw new Error('Ticket Not found'); + } + }) + .catch(error => this.setState({ error, isLoading: false})); + } + + render() { + const {data, isLoading, error} = this.state; + + if (error) { + return

{error.message}

+ } + + if (isLoading) { + return '' // add spinner + } + + return ( +
+ + +
View Ticket
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ticket-ID: {data.id }
Status{data.status}
Creation Date{data.createdAt}
Update Date{data.updateAt}
Created By{`${data.firstName} ${data.lastName}`}
Type{ data.type }
Subject{ data.subject }
+ + + + + + +
+ ); + } +} + +export default ViewTicket; \ No newline at end of file