Skip to content

Commit 2206d2e

Browse files
bethesquebethesque
committed
style: convert 4 spaces to 2
1 parent 2ba2fd7 commit 2206d2e

File tree

10 files changed

+289
-290
lines changed

10 files changed

+289
-290
lines changed

‎public/index.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8"/>
5-
<meta content="width=device-width, initial-scale=1" name="viewport"/>
6-
<meta content="#000000" name="theme-color"/>
7-
<meta
8-
content="A website for Pact Workshop JS"
9-
name="description"
10-
/>
11-
<title>Pact Workshop JS</title>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, initial-scale=1" name="viewport"/>
6+
<meta content="#000000" name="theme-color"/>
7+
<meta
8+
content="A website for Pact Workshop JS"
9+
name="description"
10+
/>
11+
<title>Pact Workshop JS</title>
1212
</head>
1313
<body>
1414
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.js

+107-107
Original file line numberDiff line numberDiff line change
@@ -10,134 +10,134 @@ import API from "./api";
1010
import PropTypes from 'prop-types';
1111

1212
const productPropTypes = {
13-
product: PropTypes.shape({
14-
id: PropTypes.string.isRequired,
15-
name: PropTypes.string.isRequired,
16-
type: PropTypes.string.isRequired,
17-
}).isRequired
13+
product: PropTypes.shape({
14+
id: PropTypes.string.isRequired,
15+
name: PropTypes.string.isRequired,
16+
type: PropTypes.string.isRequired,
17+
}).isRequired
1818
};
1919

2020
function ProductTableRow(props) {
21-
return (
22-
<tr>
23-
<td>{props.product.name}</td>
24-
<td>{props.product.type}</td>
25-
<td>
26-
<Link className="btn btn-link" to={{
27-
pathname: "/products/" + props.product.id,
28-
state: {
29-
product: props.product
30-
}
31-
}}>See more!</Link>
32-
</td>
33-
</tr>
34-
);
21+
return (
22+
<tr>
23+
<td>{props.product.name}</td>
24+
<td>{props.product.type}</td>
25+
<td>
26+
<Link className="btn btn-link" to={{
27+
pathname: "/products/" + props.product.id,
28+
state: {
29+
product: props.product
30+
}
31+
}}>See more!</Link>
32+
</td>
33+
</tr>
34+
);
3535
}
3636
ProductTableRow.propTypes = productPropTypes;
3737

3838
function ProductTable(props) {
39-
const products = props.products.map(p => (
40-
<ProductTableRow key={p.id} product={p}/>
41-
));
42-
return (
43-
<table className="table table-striped table-hover">
44-
<thead>
45-
<tr>
46-
<th>Name</th>
47-
<th>Type</th>
48-
<th/>
49-
</tr>
50-
</thead>
51-
<tbody>
52-
{products}
53-
</tbody>
54-
</table>
55-
);
39+
const products = props.products.map(p => (
40+
<ProductTableRow key={p.id} product={p}/>
41+
));
42+
return (
43+
<table className="table table-striped table-hover">
44+
<thead>
45+
<tr>
46+
<th>Name</th>
47+
<th>Type</th>
48+
<th/>
49+
</tr>
50+
</thead>
51+
<tbody>
52+
{products}
53+
</tbody>
54+
</table>
55+
);
5656
}
5757

5858
ProductTable.propTypes = {
59-
products: PropTypes.arrayOf(productPropTypes.product)
59+
products: PropTypes.arrayOf(productPropTypes.product)
6060
};
6161

6262
class App extends React.Component {
63-
constructor(props) {
64-
super(props);
65-
66-
this.state = {
67-
loading: true,
68-
searchText: '',
69-
products: [],
70-
visibleProducts: []
71-
};
72-
this.onSearchTextChange = this.onSearchTextChange.bind(this);
73-
}
74-
75-
componentDidMount() {
76-
API.getAllProducts()
77-
.then(r => {
78-
this.setState({
79-
loading: false,
80-
products: r
81-
});
82-
this.determineVisibleProducts();
83-
})
84-
.catch(e => {
85-
this.props.history.push({
86-
pathname: "/error",
87-
state: {
88-
error: e.toString()
89-
}
90-
});
91-
});
92-
}
63+
constructor(props) {
64+
super(props);
9365

94-
determineVisibleProducts() {
95-
const findProducts = (search) => {
96-
search = search.toLowerCase();
97-
return this.state.products.filter(p =>
98-
p.id.toLowerCase().includes(search)
99-
|| p.name.toLowerCase().includes(search)
100-
|| p.type.toLowerCase().includes(search)
101-
)
102-
};
103-
this.setState((s) => {
104-
return {
105-
visibleProducts: s.searchText ? findProducts(s.searchText) : s.products
106-
}
107-
});
108-
}
66+
this.state = {
67+
loading: true,
68+
searchText: '',
69+
products: [],
70+
visibleProducts: []
71+
};
72+
this.onSearchTextChange = this.onSearchTextChange.bind(this);
73+
}
10974

110-
onSearchTextChange(e) {
75+
componentDidMount() {
76+
API.getAllProducts()
77+
.then(r => {
11178
this.setState({
112-
searchText: e.target.value
79+
loading: false,
80+
products: r
11381
});
114-
this.determineVisibleProducts()
115-
}
82+
this.determineVisibleProducts();
83+
})
84+
.catch(e => {
85+
this.props.history.push({
86+
pathname: "/error",
87+
state: {
88+
error: e.toString()
89+
}
90+
});
91+
});
92+
}
11693

117-
render() {
118-
return (
119-
<Layout>
120-
<Heading text="Products" href="/"/>
121-
<div className="form-group col-2">
122-
<label className="form-label" htmlFor="input-product-search">Search</label>
123-
<input id="input-product-search" className="form-input" type="text"
124-
value={this.state.searchText} onChange={this.onSearchTextChange}/>
125-
</div>
126-
{
127-
this.state.loading ?
128-
<div className="loading loading-lg centered"/> :
129-
<ProductTable products={this.state.visibleProducts}/>
130-
}
131-
</Layout>
132-
);
133-
}
94+
determineVisibleProducts() {
95+
const findProducts = (search) => {
96+
search = search.toLowerCase();
97+
return this.state.products.filter(p =>
98+
p.id.toLowerCase().includes(search)
99+
|| p.name.toLowerCase().includes(search)
100+
|| p.type.toLowerCase().includes(search)
101+
)
102+
};
103+
this.setState((s) => {
104+
return {
105+
visibleProducts: s.searchText ? findProducts(s.searchText) : s.products
106+
}
107+
});
108+
}
109+
110+
onSearchTextChange(e) {
111+
this.setState({
112+
searchText: e.target.value
113+
});
114+
this.determineVisibleProducts()
115+
}
116+
117+
render() {
118+
return (
119+
<Layout>
120+
<Heading text="Products" href="/"/>
121+
<div className="form-group col-2">
122+
<label className="form-label" htmlFor="input-product-search">Search</label>
123+
<input id="input-product-search" className="form-input" type="text"
124+
value={this.state.searchText} onChange={this.onSearchTextChange}/>
125+
</div>
126+
{
127+
this.state.loading ?
128+
<div className="loading loading-lg centered"/> :
129+
<ProductTable products={this.state.visibleProducts}/>
130+
}
131+
</Layout>
132+
);
133+
}
134134
}
135135

136136
App.propTypes = {
137-
history: PropTypes.shape({
138-
push: PropTypes.func.isRequired
139-
}
140-
).isRequired
137+
history: PropTypes.shape({
138+
push: PropTypes.func.isRequired
139+
}
140+
).isRequired
141141
};
142142

143143
export default withRouter(App);

‎src/ErrorPage.js

+23-23
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,33 @@ import {withRouter} from "react-router";
88
import PropTypes from 'prop-types';
99

1010
class ErrorPage extends React.Component {
11-
render() {
12-
return (
13-
<Layout>
14-
<Heading text="Sad times :(" href="/"/>
15-
<div className="columns">
16-
<img className="column col-6" style={{
17-
height: "100%"
18-
}} src={"./sad_panda.gif"} alt="sad_panda"/>
19-
<pre className="code column col-6" style={{
20-
wordWrap: "break-word"
21-
}}>
22-
<code>
23-
{this.props.location.state && this.props.location.state.error ? this.props.location.state.error : ""}
24-
</code>
25-
</pre>
26-
</div>
27-
</Layout>
28-
);
29-
}
11+
render() {
12+
return (
13+
<Layout>
14+
<Heading text="Sad times :(" href="/"/>
15+
<div className="columns">
16+
<img className="column col-6" style={{
17+
height: "100%"
18+
}} src={"./sad_panda.gif"} alt="sad_panda"/>
19+
<pre className="code column col-6" style={{
20+
wordWrap: "break-word"
21+
}}>
22+
<code>
23+
{this.props.location.state && this.props.location.state.error ? this.props.location.state.error : ""}
24+
</code>
25+
</pre>
26+
</div>
27+
</Layout>
28+
);
29+
}
3030
}
3131

3232
ErrorPage.propTypes = {
33-
location: PropTypes.shape({
34-
state: PropTypes.shape({
35-
error: PropTypes.string.isRequired
36-
}).isRequired
33+
location: PropTypes.shape({
34+
state: PropTypes.shape({
35+
error: PropTypes.string.isRequired
3736
}).isRequired
37+
}).isRequired
3838
};
3939

4040
export default withRouter(ErrorPage);

‎src/Heading.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33

44
function Heading(props) {
5-
return (
6-
<div>
7-
<h1><a style={{
8-
textDecoration: "none",
9-
color: "#635e5e"
10-
}} href={props.href}>{props.text}</a></h1>
11-
<hr/>
12-
</div>
13-
);
5+
return (
6+
<div>
7+
<h1><a style={{
8+
textDecoration: "none",
9+
color: "#635e5e"
10+
}} href={props.href}>{props.text}</a></h1>
11+
<hr/>
12+
</div>
13+
);
1414
}
1515

1616
Heading.propTypes = {
17-
href: PropTypes.string.isRequired,
18-
text: PropTypes.string.isRequired
17+
href: PropTypes.string.isRequired,
18+
text: PropTypes.string.isRequired
1919
};
2020

2121
export default Heading;

‎src/Layout.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33

44
function Layout(props) {
5-
return (
6-
<div className="container">
7-
<div className="columns">
8-
<div className="column col-8 col-mx-auto">
9-
{props.children}
10-
</div>
11-
</div>
5+
return (
6+
<div className="container">
7+
<div className="columns">
8+
<div className="column col-8 col-mx-auto">
9+
{props.children}
1210
</div>
13-
);
11+
</div>
12+
</div>
13+
);
1414
}
1515

1616
Layout.propTypes = {
17-
children: PropTypes.elementType.isRequired
17+
children: PropTypes.elementType.isRequired
1818
};
1919

2020
export default Layout;

0 commit comments

Comments
 (0)