Skip to content

Commit 5b68953

Browse files
rwieruchrwieruch
committed
chapter 2
1 parent 7528945 commit 5b68953

File tree

3 files changed

+182
-29
lines changed

3 files changed

+182
-29
lines changed

‎src/App.css

Lines changed: 51 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,63 @@
1-
.App {
1+
.page {
2+
margin: 20px;
3+
}
4+
5+
.interactions {
26
text-align: center;
37
}
48

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
9+
.table {
10+
margin: 20px 0;
11+
}
12+
13+
.table-header {
14+
display: flex;
15+
line-height: 24px;
16+
font-size: 16px;
17+
padding: 0 10px;
18+
justify-content: space-between;
819
}
920

10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
21+
.table-empty {
22+
margin: 200px;
23+
text-align: center;
24+
font-size: 16px;
25+
}
26+
27+
.table-row {
28+
display: flex;
29+
line-height: 24px;
30+
white-space: nowrap;
31+
margin: 10px 0;
32+
padding: 10px;
33+
background: #ffffff;
34+
border: 1px solid #e3e3e3;
1535
}
1636

17-
.App-title {
18-
font-size: 1.5em;
37+
.table-header > span {
38+
overflow: hidden;
39+
text-overflow: ellipsis;
40+
padding: 0 5px;
1941
}
2042

21-
.App-intro {
22-
font-size: large;
43+
.table-row > span {
44+
overflow: hidden;
45+
text-overflow: ellipsis;
46+
padding: 0 5px;
2347
}
2448

25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
49+
.button-inline {
50+
border-width: 0;
51+
background: transparent;
52+
color: inherit;
53+
text-align: inherit;
54+
-webkit-font-smoothing: inherit;
55+
padding: 0;
56+
font-size: inherit;
57+
cursor: pointer;
2858
}
59+
60+
.button-active {
61+
border-radius: 0;
62+
border-bottom: 1px solid #38BB6C;
63+
}

‎src/App.js

Lines changed: 90 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,102 @@ const list = [
2020
},
2121
];
2222

23+
const isSearched = searchTerm => item =>
24+
item.title.toLowerCase().includes(searchTerm.toLowerCase());
25+
2326
class App extends Component {
27+
constructor(props) {
28+
super(props);
29+
30+
this.state = {
31+
list,
32+
searchTerm: '',
33+
};
34+
35+
this.onSearchChange = this.onSearchChange.bind(this);
36+
this.onDismiss = this.onDismiss.bind(this);
37+
}
38+
39+
onSearchChange(event) {
40+
this.setState({ searchTerm: event.target.value });
41+
}
42+
43+
onDismiss(id) {
44+
const isNotId = item => item.objectID !== id;
45+
const updatedList = this.state.list.filter(isNotId);
46+
this.setState({ list: updatedList });
47+
}
48+
2449
render() {
50+
const { searchTerm, list } = this.state;
2551
return (
26-
<div className="App">
27-
{list.map(item =>
28-
<div key={item.objectID}>
29-
<span>
30-
<a href={item.url}>{item.title}</a>
31-
</span>
32-
<span>{item.author}</span>
33-
<span>{item.num_comments}</span>
34-
<span>{item.points}</span>
35-
</div>
36-
)}
52+
<div className="page">
53+
<div className="interactions">
54+
<Search
55+
value={searchTerm}
56+
onChange={this.onSearchChange}
57+
>
58+
Search
59+
</Search>
60+
</div>
61+
<Table
62+
list={list}
63+
pattern={searchTerm}
64+
onDismiss={this.onDismiss}
65+
/>
3766
</div>
3867
);
3968
}
4069
}
4170

71+
const Search = ({ value, onChange, children }) =>
72+
<form>
73+
{children} <input
74+
type="text"
75+
value={value}
76+
onChange={onChange}
77+
/>
78+
</form>
79+
80+
const Table = ({ list, pattern, onDismiss }) =>
81+
<div className="table">
82+
{list.filter(isSearched(pattern)).map(item =>
83+
<div key={item.objectID} className="table-row">
84+
<span style={{ width: '40%' }}>
85+
<a href={item.url}>{item.title}</a>
86+
</span>
87+
<span style={{ width: '30%' }}>
88+
{item.author}
89+
</span>
90+
<span style={{ width: '10%' }}>
91+
{item.num_comments}
92+
</span>
93+
<span style={{ width: '10%' }}>
94+
{item.points}
95+
</span>
96+
<span style={{ width: '10%' }}>
97+
<Button
98+
onClick={() => onDismiss(item.objectID)}
99+
className="button-inline"
100+
>
101+
Dismiss
102+
</Button>
103+
</span>
104+
</div>
105+
)}
106+
</div>
107+
108+
const Button = ({
109+
onClick,
110+
className = '',
111+
children,
112+
}) =>
113+
<button
114+
onClick={onClick}
115+
className={className}
116+
type="button"
117+
>
118+
{children}
119+
</button>
120+
42121
export default App;

‎src/index.css

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,44 @@
11
body {
2-
margin: 0;
2+
color: #222;
3+
background: #f4f4f4;
4+
font: 400 14px CoreSans, Arial,sans-serif;
5+
}
6+
7+
a {
8+
color: #222;
9+
}
10+
11+
a:hover {
12+
text-decoration: underline;
13+
}
14+
15+
ul, li {
16+
list-style: none;
317
padding: 0;
4-
font-family: sans-serif;
18+
margin: 0;
19+
}
20+
21+
input {
22+
padding: 10px;
23+
border-radius: 5px;
24+
outline: none;
25+
margin-right: 10px;
26+
border: 1px solid #dddddd;
27+
}
28+
29+
button {
30+
padding: 10px;
31+
border-radius: 5px;
32+
border: 1px solid #dddddd;
33+
background: transparent;
34+
color: #808080;
35+
cursor: pointer;
36+
}
37+
38+
button:hover {
39+
color: #222;
540
}
41+
42+
*:focus {
43+
outline: none;
44+
}

0 commit comments

Comments
 (0)