franjsco/tick3t
1
0
Fork 0
mirror of https://github.com/franjsco/tick3t synced 2025-06-05 22:19:18 +02:00
Code Issues Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
frab1t
2019-05-10 16:20:51 +02:00
parent dc447c023e
commit ce72ab56fd
15 changed files with 341 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Card.js
View File

@ -18,7 +18,7 @@ class Card extends Component {
let bodyAlign; let bodyAlign;
let headAlign; let headAlign;
if (this.props.align) { if (this.props.bodyAlign) {
bodyAlign = `text-${this.props.bodyAlign}`; bodyAlign = `text-${this.props.bodyAlign}`;
} }

2
src/components/DropDown.js
View File

@ -18,7 +18,7 @@ class DropDown extends Component {
return( return(
<Input <Input
name = "type" name = {this.props.name}
type = "select" type = "select"
value = { this.props.value } value = { this.props.value }
onChange = { this.props.onChange } onChange = { this.props.onChange }

1
src/components/Logo.js
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
class Logo extends Component { class Logo extends Component {
constructor(props) { constructor(props) {
super(props); super(props);

0
src/containers/NavBar.css → src/components/NavBar.css
View File

107
src/components/NavBar.js Normal file
View File

@ -0,0 +1,107 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
Container,
Collapse,
Navbar,
NavbarBrand,
NavbarToggler,
Nav,
NavItem,
NavLink,
Button
} from 'reactstrap';
import './NavBar.css';
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 (
<Navbar
fixed="top"
color="light"
light
expand="sm"
className="shadow-sm p-3 mb-5 bg-white"
>
<Container>
<NavbarBrand
onClick={this.closeNavbar}
tag={Link}
to="/"
>
tick3t
</NavbarBrand>
<NavbarToggler
className="custom-toggler"
onClick={this.toggle}
/>
<Collapse
isOpen={this.state.isOpen}
navbar
>
<Nav
className="mr-auto"
navbar
>
<NavItem>
<NavLink
onClick={this.closeNavbar}
tag={Link}
to="/credits"
>
Credits
</NavLink>
</NavItem>
</Nav>
<Nav className="ml-auto">
<NavItem>
<Button
color="primary"
onClick={this.closeNavbar}
tag={Link}
to="/login"
>
Admin
</Button>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
);
}
}
export default NavBar;

4
src/components/Table.js
View File

@ -60,6 +60,10 @@ class Table extends Component {
<td className="font-weight-bold text-right td-key">message</td> <td className="font-weight-bold text-right td-key">message</td>
<td className="td-value text-left">{data.message}</td> <td className="td-value text-left">{data.message}</td>
</tr> </tr>
<tr>
<td className="font-weight-bold text-right td-key">note</td>
<td className="td-value text-left">{data.note}</td>
</tr>
</tbody> </tbody>
</TableBootstrap> </TableBootstrap>
</Col> </Col>

84
src/containers/Admin/Login.js
View File

@ -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 (
<Card title="Error">
<p>{this.state.err}</p>
</Card>
);
}
return (
<Card
align="left"
title="Login"
>
<Row>
<Col sm={12} md={{ size:8, offset: 2}}>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label className="font-weight-bold" for="email">Email</Label>
<Input onChange={this.handleInputChange} type="email" name="email" id="email" />
</FormGroup>
<FormGroup>
<Label className="font-weight-bold" for="password">Password</Label>
<Input onChange={this.handleInputChange} type="password" name="password" id="password" />
</FormGroup>
<FormGroup>
<Button type="submit" color="primary">Login</Button>
</FormGroup>
</Form>
</Col>
</Row>
</Card>
);
}
}
export default Login;

106
src/containers/Administration/Login.js Normal file
View File

@ -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 (
<Card title="Error">
<p>{this.state.err}</p>
</Card>
);
}
return (
<Card
align="left"
title="Login"
>
<Row>
<Col
sm={12}
md={{ size: 8, offset: 2 }}
>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label
className="font-weight-bold"
for="email"
>
Email
</Label>
<Input
type="email"
name="email"
id="email"
onChange={this.handleInputChange}
placeholder="email@email.com"
/>
</FormGroup>
<FormGroup>
<Label
className="font-weight-bold"
for="password"
>
Password
</Label>
<Input
onChange={this.handleInputChange}
type="password"
name="password"
id="password"
placeholder="your password"
/>
</FormGroup>
<FormGroup>
<Button type="submit" color="primary">Login</Button>
</FormGroup>
</Form>
</Col>
</Row>
</Card>
);
}
}
export default Login;

58
src/containers/OpenTicket/OpenTicket.js → src/containers/CreateTicket/CreateTicket.js
View File

@ -12,7 +12,8 @@ import {
import Card from '../../components/Card'; import Card from '../../components/Card';
import DropDown from '../../components/DropDown'; import DropDown from '../../components/DropDown';
class OpenTicket extends Component {
class CreateTicket extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -32,14 +33,13 @@ class OpenTicket extends Component {
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
} }
componentDidMount() { componentDidMount() {
fetch("http://localhost:3001/categories", { fetch("http://localhost:3001/categories?type=ticketType", {
method: 'GET', method: 'GET',
headers: { 'Content-Type': 'application/json' } headers: { 'Content-Type': 'application/json' }
}) })
.then((res) => { .then(res => res.json())
return res.json();
})
.then((json) => { .then((json) => {
this.setState({ this.setState({
categories: json categories: json
@ -47,11 +47,12 @@ class OpenTicket extends Component {
}) })
.catch((err) => { .catch((err) => {
this.setState({ this.setState({
ticketErr: err.message error: err.message
}); });
}); });
} }
handleInputChange(event) { handleInputChange(event) {
const target = event.target; const target = event.target;
const name = target.name; const name = target.name;
@ -62,16 +63,16 @@ class OpenTicket extends Component {
}); });
} }
handleSubmit(event) { handleSubmit(event) {
event.preventDefault(); event.preventDefault();
const { ticketId, ticketErr, ...rest } = this.state; const { ticketId, error, categories, ...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'); alert('Form is invalid');
return; return;
} }
fetch("http://localhost:3001/tickets", { fetch("http://localhost:3001/tickets", {
@ -79,9 +80,7 @@ class OpenTicket extends Component {
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(rest) body: JSON.stringify(rest)
}) })
.then((res) => { .then(res => res.json())
return res.json();
})
.then((json) => { .then((json) => {
this.setState({ this.setState({
ticketId: json.id ticketId: json.id
@ -89,34 +88,32 @@ class OpenTicket extends Component {
}) })
.catch((err) => { .catch((err) => {
this.setState({ this.setState({
ticketErr: err.message error: err.message
}); });
}); });
} }
render() { render() {
if (this.state.ticketId) { if (this.state.ticketId) {
return ( return (
<Card title="Ticket Created"> <Card title="Ticket Created">
<p>{`Ticket ID: ${this.state.ticketId}`}</p> <p>
{`Ticket ID: ${this.state.ticketId}`}
</p>
</Card> </Card>
); );
} else if (this.state.ticketErr) { } else if (this.state.error) {
return ( return (
<Card title="Error"> <Card title="Error">
<p>{this.state.ticketErr}</p> <p>{this.state.error}</p>
</Card> </Card>
); );
} }
return ( return (
<Card <Card
align="left" title="Create Ticket"
title="Open Ticket"
> >
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<Row form> <Row form>
@ -127,7 +124,7 @@ class OpenTicket extends Component {
for="firstName" for="firstName"
> >
First Name First Name
</Label> </Label>
<Input <Input
name="firstName" name="firstName"
@ -146,7 +143,7 @@ class OpenTicket extends Component {
for="lastName" for="lastName"
> >
Last Name Last Name
</Label> </Label>
<Input <Input
name="lastName" name="lastName"
@ -166,7 +163,7 @@ class OpenTicket extends Component {
for="email" for="email"
> >
Email Email
</Label> </Label>
<Input name="email" <Input name="email"
type="email" type="email"
@ -185,13 +182,14 @@ class OpenTicket extends Component {
for="type" for="type"
> >
Type Type
</Label> </Label>
<DropDown <DropDown
name="type"
options={this.state.categories} options={this.state.categories}
value={this.state.type} value={this.state.type}
onChange={this.handleInputChange} onChange={this.handleInputChange}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
@ -204,7 +202,7 @@ class OpenTicket extends Component {
for="subject" for="subject"
> >
Subject Subject
</Label> </Label>
<Input <Input
name="subject" name="subject"
@ -224,7 +222,7 @@ class OpenTicket extends Component {
for="message" for="message"
> >
Message Message
</Label> </Label>
<Input <Input
name="message" name="message"
@ -249,4 +247,4 @@ class OpenTicket extends Component {
} }
} }
export default OpenTicket; export default CreateTicket;

32
src/containers/Home/Home.js
View File

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

57
src/containers/Home/OpenTicketCard.js
View File

@ -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 (
<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"
subtitle="Open new ticket"
>
<LogoOpenTicket />
<ButtonPrimary />
</Card>
</div>
);
}
}
export default OpenTicketCard;

47
src/containers/HomePage/CreateTicketCard.js Normal file
View File

@ -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 (
<Card
headAlign="center"
title="Create Ticket"
subtitle="Create a new ticket"
bodyAlign="center"
>
<Logo
style={style}
src={logoSVG}
alt="Create Ticket"
/>
<Button
tag={Link}
to="/create"
color="primary"
>
Create Ticket
</Button>
</Card>
);
}
}
export default CreateTicketCard;

65
src/containers/Home/ViewTicketCard.js → src/containers/HomePage/SearchTicketCard.js
View File

@ -1,26 +1,19 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import Card from '../../components/Card'; import Card from '../../components/Card';
import SearchForm from '../../components/SearchForm'; import SearchForm from '../../components/SearchForm';
import logoSVG from '../../assets/ticket.svg';
import Logo from '../../components/Logo'; import Logo from '../../components/Logo';
const style={ import logoSVG from '../../assets/ticket.svg';
const style = {
height: '150px', height: '150px',
margin: '30px' margin: '30px'
}; };
const LogoViewTicket = () => { class SearchTicketCard extends Component {
return (
<Logo
style={style}
src={logoSVG}
alt="open ticket" />
);
}
class ViewTicketCard extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -36,6 +29,7 @@ class ViewTicketCard extends Component {
handleSubmit(e) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
this.setState({ this.setState({
submitted: true submitted: true
}); });
@ -48,32 +42,35 @@ class ViewTicketCard extends Component {
} }
render() { render() {
if (this.state.submitted) { if (this.state.submitted) {
return (<Redirect to={`/ticket/${this.state.ticketId}`} />); return (<Redirect to={`/ticket/${this.state.ticketId}`} />);
} }
return ( return (
<div> <Card
<Card headAlign="center"
align="center" title="Search Ticket"
title="View Ticket" subtitle="Search the ticket to view your status"
subtitle="View the ticket status" bodyAlign="center"
> >
<LogoViewTicket /> <Logo
<SearchForm style={style}
name="search" src={logoSVG}
id="search" alt="Search Ticket"
placeholder="ticket ID" />
onChange={this.handleChangeInput}
onSubmit={this.handleSubmit} <SearchForm
value={this.state.ticketId} name="search"
buttonName="View" id="search"
/> placeholder="Insert ticket ID"
</Card> onChange={this.handleChangeInput}
</div> onSubmit={this.handleSubmit}
value={this.state.ticketId}
buttonName="Search"
/>
</Card>
); );
} }
} }
export default ViewTicketCard; export default SearchTicketCard;

81
src/containers/NavBar.js
View File

@ -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 (
<div>
<Navbar fixed="top" color="light" light expand="sm" className="shadow-sm p-3 mb-5 bg-white">
<Container>
<NavbarBrand onClick={this.closeNavbar} tag={Link} to="/">tick3t</NavbarBrand>
<NavbarToggler className="custom-toggler" onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink onClick={this.closeNavbar} tag={Link} to="/stats">Stats</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={this.closeNavbar} tag={Link} to="/stats">Credits</NavLink>
</NavItem>
</Nav>
<Nav className="ml-auto">
<NavItem>
<Button color="primary" onClick={this.closeNavbar} tag={Link} to="/login">Admin</Button>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
</div>
)
}
}
export default NavBar;

25
src/containers/ViewTicket/ViewTicket.js
View File

@ -22,18 +22,22 @@ class ViewTicket extends Component {
fetch(`http://localhost:3001/tickets?id=${params.ticketId}`) fetch(`http://localhost:3001/tickets?id=${params.ticketId}`)
.then(response => { .then(response => {
if (response.ok) { if (!response.ok) {
return response.json();
} else {
throw new Error('Error API'); throw new Error('Error API');
} }
return response.json();
}) })
.then(json => { .then(json => {
if (json.length) {
this.setState({ data: json[0], isLoading: false }) if (!json.length) {
} else {
throw new Error('Ticket Not found'); throw new Error('Ticket Not found');
} }
this.setState({
data: json[0],
isLoading: false
})
}) })
.catch(error => this.setState({ error, isLoading: false })); .catch(error => this.setState({ error, isLoading: false }));
} }
@ -55,11 +59,14 @@ class ViewTicket extends Component {
return ( return (
<Card <Card
align="center"
title="View Ticket" title="View Ticket"
headAlign="left"
bodyAlign="center"
> >
<Table data={data} /> <Table data={data} />
<Link to="/">Go to home</Link> <Link to="/">
Go to home
</Link>
</Card> </Card>
); );
} }