diff --git a/src/components/Card.js b/src/components/Card.js index 36948ec..77ec85f 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -18,7 +18,7 @@ class Card extends Component { let bodyAlign; let headAlign; - if (this.props.align) { + if (this.props.bodyAlign) { bodyAlign = `text-${this.props.bodyAlign}`; } diff --git a/src/components/DropDown.js b/src/components/DropDown.js index 414b573..05b16b0 100644 --- a/src/components/DropDown.js +++ b/src/components/DropDown.js @@ -18,7 +18,7 @@ class DropDown extends Component { return( + + + tick3t + + + + + + + + + + + + ); + } +} + +export default NavBar; \ No newline at end of file diff --git a/src/components/Table.js b/src/components/Table.js index 1ea23bb..8ef166a 100644 --- a/src/components/Table.js +++ b/src/components/Table.js @@ -60,6 +60,10 @@ class Table extends Component { message {data.message} + + note + {data.note} + diff --git a/src/containers/Admin/Login.js b/src/containers/Admin/Login.js deleted file mode 100644 index 5d93e1f..0000000 --- a/src/containers/Admin/Login.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Component } from 'react'; -import { - Row, - Col, - Form, - FormGroup, - Label, - Input, - Button -} from 'reactstrap'; - -import Card from '../../components/Card'; - -class Login extends Component { - constructor(props) { - super(props); - - this.state = { - email: '', - password: '', - err: '' - }; - - this.handleInputChange = this.handleInputChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - } - - componentDidMount() { - - } - - 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(); - } - - render() { - - if (this.state.err) { - return ( - -

{this.state.err}

- - ); - } - - return ( - - - -
- - - - - - - - - - - -
- - - - - ); - } -} - -export default Login; \ No newline at end of file diff --git a/src/containers/Administration/Login.js b/src/containers/Administration/Login.js new file mode 100644 index 0000000..7beaa03 --- /dev/null +++ b/src/containers/Administration/Login.js @@ -0,0 +1,106 @@ +import React, { Component } from 'react'; +import { + Row, + Col, + Form, + FormGroup, + Label, + Input, + Button +} from 'reactstrap'; + +import Card from '../../components/Card'; + +class Login extends Component { + constructor(props) { + super(props); + + this.state = { + email: '', + password: '', + err: '' + }; + + this.handleInputChange = this.handleInputChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + 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(); + } + + render() { + + if (this.state.err) { + return ( + +

{this.state.err}

+ + ); + } + + return ( + + + +
+ + + + + + + + + + + + + +
+ + + + ); + } +} + +export default Login; \ No newline at end of file diff --git a/src/containers/OpenTicket/OpenTicket.js b/src/containers/CreateTicket/CreateTicket.js similarity index 87% rename from src/containers/OpenTicket/OpenTicket.js rename to src/containers/CreateTicket/CreateTicket.js index 7c68bcd..6f5367c 100644 --- a/src/containers/OpenTicket/OpenTicket.js +++ b/src/containers/CreateTicket/CreateTicket.js @@ -12,7 +12,8 @@ import { import Card from '../../components/Card'; import DropDown from '../../components/DropDown'; -class OpenTicket extends Component { + +class CreateTicket extends Component { constructor(props) { super(props); @@ -32,14 +33,13 @@ class OpenTicket extends Component { this.handleSubmit = this.handleSubmit.bind(this); } + componentDidMount() { - fetch("http://localhost:3001/categories", { + fetch("http://localhost:3001/categories?type=ticketType", { method: 'GET', headers: { 'Content-Type': 'application/json' } }) - .then((res) => { - return res.json(); - }) + .then(res => res.json()) .then((json) => { this.setState({ categories: json @@ -47,11 +47,12 @@ class OpenTicket extends Component { }) .catch((err) => { this.setState({ - ticketErr: err.message + error: err.message }); }); } + handleInputChange(event) { const target = event.target; const name = target.name; @@ -62,16 +63,16 @@ class OpenTicket extends Component { }); } + handleSubmit(event) { event.preventDefault(); - const { ticketId, ticketErr, ...rest } = this.state; + const { ticketId, error, categories, ...rest } = this.state; if (!rest.firstName || !rest.lastName || !rest.email || !rest.message || rest.type === '---' || !rest.subject) { alert('Form is invalid'); return; - } fetch("http://localhost:3001/tickets", { @@ -79,9 +80,7 @@ class OpenTicket extends Component { headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(rest) }) - .then((res) => { - return res.json(); - }) + .then(res => res.json()) .then((json) => { this.setState({ ticketId: json.id @@ -89,34 +88,32 @@ class OpenTicket extends Component { }) .catch((err) => { this.setState({ - ticketErr: err.message + error: err.message }); }); } + render() { - - - if (this.state.ticketId) { return ( -

{`Ticket ID: ${this.state.ticketId}`}

+

+ {`Ticket ID: ${this.state.ticketId}`} +

); - } else if (this.state.ticketErr) { + } else if (this.state.error) { return ( -

{this.state.ticketErr}

+

{this.state.error}

 ); } - return (
@@ -127,7 +124,7 @@ class OpenTicket extends Component { for="firstName" > First Name - + Last Name - + Email - + Type - + - + /> @@ -204,7 +202,7 @@ class OpenTicket extends Component { for="subject" > Subject - + Message - + - - - - - - - - ); - } -} - -export default Home; \ No newline at end of file diff --git a/src/containers/Home/OpenTicketCard.js b/src/containers/Home/OpenTicketCard.js deleted file mode 100644 index a51b059..0000000 --- a/src/containers/Home/OpenTicketCard.js +++ /dev/null @@ -1,57 +0,0 @@ -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 ( - - ); -} -const ButtonPrimary = () => { - return ( - - ) -} - -class OpenTicketCard extends Component { - constructor(props) { - super(props); - - this.state = {}; - } - - render() { - - return ( -
- - - - -
- ); - } -} - -export default OpenTicketCard; \ No newline at end of file diff --git a/src/containers/HomePage/CreateTicketCard.js b/src/containers/HomePage/CreateTicketCard.js new file mode 100644 index 0000000..6c575dc --- /dev/null +++ b/src/containers/HomePage/CreateTicketCard.js @@ -0,0 +1,47 @@ +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' +}; + +class CreateTicketCard extends Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( + + + + + + ); + } +} + +export default CreateTicketCard; \ No newline at end of file diff --git a/src/containers/Home/ViewTicketCard.js b/src/containers/HomePage/SearchTicketCard.js similarity index 55% rename from src/containers/Home/ViewTicketCard.js rename to src/containers/HomePage/SearchTicketCard.js index 585670a..1fbc485 100644 --- a/src/containers/Home/ViewTicketCard.js +++ b/src/containers/HomePage/SearchTicketCard.js @@ -1,26 +1,19 @@ 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={ +import logoSVG from '../../assets/ticket.svg'; + + +const style = { height: '150px', margin: '30px' }; -const LogoViewTicket = () => { - return ( - - ); -} - -class ViewTicketCard extends Component { +class SearchTicketCard extends Component { constructor(props) { super(props); @@ -36,6 +29,7 @@ class ViewTicketCard extends Component { handleSubmit(e) { e.preventDefault(); + this.setState({ submitted: true }); @@ -48,32 +42,35 @@ class ViewTicketCard extends Component { } render() { - if (this.state.submitted) { return (); } - + return ( -
- - - - -
+ + + + + ); } } -export default ViewTicketCard; \ No newline at end of file +export default SearchTicketCard; \ No newline at end of file diff --git a/src/containers/NavBar.js b/src/containers/NavBar.js deleted file mode 100644 index 7970831..0000000 --- a/src/containers/NavBar.js +++ /dev/null @@ -1,81 +0,0 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; - -import './NavBar.css'; - -import { - Container, - Collapse, - Navbar, - NavbarBrand, - NavbarToggler, - Nav, - NavItem, - NavLink, - Button -} from 'reactstrap'; - -class NavBar extends Component { - constructor(props) { - super(props); - - this.state = { - isOpen: false - }; - - // binding - this.toggle = this.toggle.bind(this); - this.closeNavbar = this.closeNavbar.bind(this); - } - - toggle() { - this.setState({ - isOpen: !this.state.isOpen - }); - } - - closeNavbar() { - this.setState({ - isOpen: false - }); - } - - render() { - return ( -
- - - - tick3t - - - - - - - - - - - - -
- ) - } -} - -export default NavBar; \ No newline at end of file diff --git a/src/containers/ViewTicket/ViewTicket.js b/src/containers/ViewTicket/ViewTicket.js index 16accfc..33ddac6 100644 --- a/src/containers/ViewTicket/ViewTicket.js +++ b/src/containers/ViewTicket/ViewTicket.js @@ -22,18 +22,22 @@ class ViewTicket extends Component { fetch(`http://localhost:3001/tickets?id=${params.ticketId}`) .then(response => { - if (response.ok) { - return response.json(); - } else { + if (!response.ok) { throw new Error('Error API'); } + + return response.json(); }) .then(json => { - if (json.length) { - this.setState({ data: json[0], isLoading: false }) - } else { + + if (!json.length) { throw new Error('Ticket Not found'); - } + } + + this.setState({ + data: json[0], + isLoading: false + }) }) .catch(error => this.setState({ error, isLoading: false })); } @@ -55,11 +59,14 @@ class ViewTicket extends Component { return ( - Go to home + + Go to home + ); }