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 headAlign;
if (this.props.align) {
if (this.props.bodyAlign) {
bodyAlign = `text-${this.props.bodyAlign}`;
}

2
src/components/DropDown.js
View File

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

1
src/components/Logo.js
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react';
class Logo extends Component {
constructor(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="td-value text-left">{data.message}</td>
</tr>
<tr>
<td className="font-weight-bold text-right td-key">note</td>
<td className="td-value text-left">{data.note}</td>
</tr>
</tbody>
</TableBootstrap>
</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 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 (
<Card title="Ticket Created">
<p>{`Ticket ID: ${this.state.ticketId}`}</p>
<p>
{`Ticket ID: ${this.state.ticketId}`}
</p>
</Card>
);
} else if (this.state.ticketErr) {
} else if (this.state.error) {
return (
<Card title="Error">
<p>{this.state.ticketErr}</p>
<p>{this.state.error}</p>
</Card>
);
}
return (
<Card
align="left"
title="Open Ticket"
title="Create Ticket"
>
<Form onSubmit={this.handleSubmit}>
<Row form>
@ -127,7 +124,7 @@ class OpenTicket extends Component {
for="firstName"
>
First Name
</Label>
</Label>
<Input
name="firstName"
@ -146,7 +143,7 @@ class OpenTicket extends Component {
for="lastName"
>
Last Name
</Label>
</Label>
<Input
name="lastName"
@ -166,7 +163,7 @@ class OpenTicket extends Component {
for="email"
>
Email
</Label>
</Label>
<Input name="email"
type="email"
@ -185,13 +182,14 @@ class OpenTicket extends Component {
for="type"
>
Type
</Label>
</Label>
<DropDown
<DropDown
name="type"
options={this.state.categories}
value={this.state.type}
onChange={this.handleInputChange}
/>
/>
</FormGroup>
</Col>
</Row>
@ -204,7 +202,7 @@ class OpenTicket extends Component {
for="subject"
>
Subject
</Label>
</Label>
<Input
name="subject"
@ -224,7 +222,7 @@ class OpenTicket extends Component {
for="message"
>
Message
</Label>
</Label>
<Input
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 { 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 (
<Logo
style={style}
src={logoSVG}
alt="open ticket" />
);
}
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 (<Redirect to={`/ticket/${this.state.ticketId}`} />);
}
return (
<div>
<Card
align="center"
title="View Ticket"
subtitle="View the ticket status"
>
<LogoViewTicket />
<SearchForm
name="search"
id="search"
placeholder="ticket ID"
onChange={this.handleChangeInput}
onSubmit={this.handleSubmit}
value={this.state.ticketId}
buttonName="View"
/>
</Card>
</div>
<Card
headAlign="center"
title="Search Ticket"
subtitle="Search the ticket to view your status"
bodyAlign="center"
>
<Logo
style={style}
src={logoSVG}
alt="Search Ticket"
/>
<SearchForm
name="search"
id="search"
placeholder="Insert ticket ID"
onChange={this.handleChangeInput}
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}`)
.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 (
<Card
align="center"
title="View Ticket"
headAlign="left"
bodyAlign="center"
>
<Table data={data} />
<Link to="/">Go to home</Link>
<Link to="/">
Go to home
</Link>
</Card>
);
}