Skip to content

Commit 26ec2f5

Browse files
hcuellar-coderhcuellar-coder
committed
refactored code
1 parent d4eda12 commit 26ec2f5

File tree

4 files changed

+68
-61
lines changed

4 files changed

+68
-61
lines changed

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
work correctly both with client-side routing and a non-root public URL.
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
25-
<title>React App</title>
25+
<title>Expense Tracker</title>
2626
</head>
2727

2828
<body>

‎src/App.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ table {
3636
min-width: 100px;
3737
}
3838

39-
#expense-description{
39+
#expense-description{
4040
min-width: 280px;
4141
}
4242

‎src/App.js

+57-6
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,29 @@ import ExpenseTable from './components/ExpenseTable';
66
import 'bootstrap/dist/css/bootstrap.min.css';
77

88
class App extends React.Component {
9-
constructor(props) {
10-
super(props);
11-
this.handleExpenseSubmit = this.handleExpenseSubmit.bind(this);
12-
this.handleRemove = this.handleRemove.bind(this);
9+
constructor() {
10+
super();
1311
this.state = {
12+
date: '',
13+
expense: '',
14+
location: '',
15+
cost: '',
16+
validated: false,
1417
expenseList: [],
1518
visible: false
1619
};
20+
this.handleChange = this.handleChange.bind(this)
21+
this.handleSubmit = this.handleSubmit.bind(this)
22+
this.handleExpenseSubmit = this.handleExpenseSubmit.bind(this);
23+
this.handleRemove = this.handleRemove.bind(this);
24+
}
25+
26+
handleChange(event) {
27+
event.preventDefault();
28+
const { name, value } = event.target
29+
this.setState({
30+
[name]: value
31+
})
1732
}
1833

1934
componentDidMount() {
@@ -26,6 +41,28 @@ class App extends React.Component {
2641
});
2742
}
2843

44+
handleSubmit(event) {
45+
event.preventDefault();
46+
47+
const form = event.currentTarget;
48+
if (form.checkValidity() === false) {
49+
this.setState({ validated: true });
50+
} else {
51+
const randomID = Math.floor(Math.random() * 100);
52+
this.handleExpenseSubmit(randomID,
53+
this.state.date, this.state.location,
54+
this.state.expense, this.state.cost);
55+
56+
this.setState({
57+
'date': '',
58+
'expense': '',
59+
'location': '',
60+
'cost': '',
61+
'validated': false
62+
});
63+
}
64+
}
65+
2966
handleExpenseSubmit = (id, date, location, expense, cost) => {
3067
const expenseList = this.state.expenseList;
3168
if (expenseList) {
@@ -58,8 +95,22 @@ class App extends React.Component {
5895
return (
5996
<div className="App" >
6097
<Header />
61-
<ExpenseForm handleExpenseSubmit={this.handleExpenseSubmit} />
62-
{this.state.visible ? <ExpenseTable expenseListProp={this.state.expenseList} handleRemove={this.handleRemove} /> : <div />}
98+
<ExpenseForm
99+
handleSubmit={this.handleSubmit}
100+
handleChange={this.handleChange}
101+
validated={this.state.validated}
102+
date={this.state.date}
103+
location={this.state.location}
104+
expense={this.state.expense}
105+
cost={this.state.cost}
106+
/>
107+
{this.state.visible ?
108+
<ExpenseTable
109+
expenseListProp={this.state.expenseList}
110+
handleRemove={this.handleRemove}
111+
/> : (
112+
<div />
113+
)}
63114
</div>
64115
);
65116
}

‎src/components/ExpenseForm.js

+9-53
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,10 @@ import React from 'react';
22
import { Container, Form, Button, Col } from 'react-bootstrap';
33

44
class ExpenseForm extends React.Component {
5-
constructor(props) {
6-
super(props);
7-
this.state = {
8-
date: '',
9-
expense: '',
10-
location: '',
11-
cost: '',
12-
validated: false
13-
}
14-
this.handleChange = this.handleChange.bind(this)
15-
this.handleSubmit = this.handleSubmit.bind(this)
16-
}
17-
18-
handleChange(event) {
19-
event.preventDefault();
20-
const { name, value } = event.target
21-
this.setState({
22-
[name]: value
23-
})
24-
25-
}
26-
27-
handleSubmit(event) {
28-
event.preventDefault();
29-
30-
const form = event.currentTarget;
31-
if (form.checkValidity() === false) {
32-
this.setState({ validated: true });
33-
} else {
34-
const randomID = Math.floor(Math.random() * 100);
35-
this.props.handleExpenseSubmit(randomID,
36-
this.state.date, this.state.location,
37-
this.state.expense, this.state.cost);
38-
39-
this.setState({
40-
'date': '',
41-
'expense': '',
42-
'location': '',
43-
'cost': '',
44-
'validated': false
45-
});
46-
}
47-
}
48-
495
render() {
506
return (
517
<Container className="expense-form">
52-
<Form noValidate validated={this.state.validated} onSubmit={this.handleSubmit} autoComplete="off">
8+
<Form noValidate validated={this.props.validated} onSubmit={this.props.handleSubmit} autoComplete="off">
539
<Form.Row className="align-items-center">
5410
<Form.Group>
5511
<Col>
@@ -58,8 +14,8 @@ class ExpenseForm extends React.Component {
5814
id="expense-date"
5915
type="date"
6016
name="date"
61-
value={this.state.date}
62-
onChange={this.handleChange} />
17+
value={this.props.date}
18+
onChange={this.props.handleChange} />
6319
<Form.Control.Feedback type="invalid">Please provide a date!</Form.Control.Feedback>
6420
</Col>
6521
</Form.Group>
@@ -71,8 +27,8 @@ class ExpenseForm extends React.Component {
7127
type="text"
7228
placeholder="Location"
7329
name="location"
74-
value={this.state.location}
75-
onChange={this.handleChange} />
30+
value={this.props.location}
31+
onChange={this.props.handleChange} />
7632
<Form.Control.Feedback type="invalid">Please provide a location!</Form.Control.Feedback>
7733
</Col>
7834
</Form.Group>
@@ -86,8 +42,8 @@ class ExpenseForm extends React.Component {
8642
type="text"
8743
placeholder="Expense Description"
8844
name="expense"
89-
value={this.state.expense}
90-
onChange={this.handleChange} />
45+
value={this.props.expense}
46+
onChange={this.props.handleChange} />
9147
<Form.Control.Feedback type="invalid">Please provide a description!</Form.Control.Feedback>
9248
</Col>
9349
</Form.Group>
@@ -101,8 +57,8 @@ class ExpenseForm extends React.Component {
10157
min="0.01"
10258
placeholder="$000.00"
10359
name="cost"
104-
value={this.state.cost}
105-
onChange={this.handleChange} />
60+
value={this.props.cost}
61+
onChange={this.props.handleChange} />
10662
<Form.Control.Feedback type="invalid">Please provide a cost greater than 0!</Form.Control.Feedback>
10763
</Col>
10864
</Form.Group>

0 commit comments

Comments
 (0)