Skip to content

Commit 5b16511

Browse files
Alexius-HuangAlexius-Huang
authored
Merge pull request #7 from goby-lang/refactor/minor
Minor Code Refactoring & Input Format Handling
2 parents 1792ace + bc0de0c commit 5b16511

File tree

8 files changed

+198
-121
lines changed

8 files changed

+198
-121
lines changed

‎lib/components/App.jsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,6 @@ export default class ToDoList extends React.Component {
1818
DELETE_LIST_ITEM: 6
1919
}
2020
this.state = { listItems: [] }
21-
this.handleCreateListItem = this.handleCreateListItem.bind(this)
22-
this.handleCheckEvent = this.handleCheckEvent.bind(this)
23-
this.handleOpenModal = this.handleOpenModal.bind(this)
24-
this.handleEditContent = this.handleEditContent.bind(this)
25-
this.handleDeleteItem = this.handleDeleteItem.bind(this)
2621
}
2722

2823
componentDidMount() {
@@ -149,23 +144,23 @@ export default class ToDoList extends React.Component {
149144
<ListItem
150145
key={item.key} id={item.key} ref={`list-item-${item.key}`}
151146
checked={item.checked}
152-
checkEvent={this.handleCheckEvent}
153-
openModal={this.handleOpenModal}
154-
editContent={this.handleEditContent}
147+
checkEvent={this.handleCheckEvent.bind(this)}
148+
openModal={this.handleOpenModal.bind(this)}
149+
editContent={this.handleEditContent.bind(this)}
155150
>{item.content}</ListItem>
156151
)
157152

158153
return (
159154
<div className="to-do-app">
160155
<ListForm
161-
createListItem={this.handleCreateListItem}
156+
createListItem={this.handleCreateListItem.bind(this)}
162157
ref="form"
163158
/>
164159
<ListModal
165160
ref="modal"
166161
modalId={this.state.modal ? this.state.modal.id : 0}
167162
modalContent={this.state.modal ? this.state.modal.content : ''}
168-
confirmDelete={this.handleDeleteItem}
163+
confirmDelete={this.handleDeleteItem.bind(this)}
169164
/>
170165
<div className="list-group">
171166
{renderListItems}

‎lib/components/app/ListForm.jsx

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,53 @@
11
import React from 'react'
22

3+
var errorTimeoutID = null
4+
35
export default class ListForm extends React.Component {
46
constructor(props) {
57
super(props)
6-
this.handleCreateListItemEvent = this.handleCreateListItemEvent.bind(this)
78
}
89

910
handleCreateListItemEvent(event) {
1011
event.preventDefault()
1112
const input = this.refs['item-content']
12-
this.props.createListItem(input.value)
13+
this.validates(input.value,
14+
/* Input success */
15+
() => {
16+
this.props.createListItem(input.value)
17+
},
18+
/* Input Error */
19+
(error) => {
20+
input.setAttribute('placeholder', error)
21+
input.className = 'error'
22+
if (errorTimeoutID) window.clearTimeout(errorTimeoutID)
23+
errorTimeoutID = setTimeout(() => {
24+
input.setAttribute('placeholder', '')
25+
errorTimeoutID = null
26+
input.className = ''
27+
}, 3000)
28+
}
29+
)
30+
1331
input.value = ''
1432
}
1533

34+
validates(value, success, error) {
35+
if (value === '') {
36+
error('Title cannot be empty!')
37+
} else if (/\"/.test(value)) {
38+
error('Wrong title format!')
39+
} else if (value.length > 40) {
40+
error('Maximum length: 40 characters')
41+
} else {
42+
success()
43+
}
44+
}
45+
1646
render() {
1747
return (
1848
<div className="list-form">
1949
<input ref="item-content" id="item-content" />
20-
<button onClick={this.handleCreateListItemEvent}>
50+
<button onClick={this.handleCreateListItemEvent.bind(this)}>
2151
<img src="/icon/plus-sign-light.png" alt="plus-sign"/>
2252
</button>
2353
</div>

‎lib/components/app/ListItem.jsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ import React from 'react'
22
export default class ListItem extends React.Component {
33
constructor(props) {
44
super(props)
5-
this.handleItemCheck = this.handleItemCheck.bind(this)
6-
this.handleDeleteItemClick = this.handleDeleteItemClick.bind(this)
7-
this.handleEditContentChange = this.handleEditContentChange.bind(this)
8-
this.handleEditContent = this.handleEditContent.bind(this)
9-
this.handleHideEditForm = this.handleHideEditForm.bind(this)
105
this.state = { content: this.props.children }
116
}
127

@@ -50,7 +45,7 @@ export default class ListItem extends React.Component {
5045
id={labelCheckId}
5146
className="list-item-check"
5247
checked={this.props.checked}
53-
onChange={this.handleItemCheck}
48+
onChange={this.handleItemCheck.bind(this)}
5449
/>
5550

5651
<input
@@ -68,10 +63,10 @@ export default class ListItem extends React.Component {
6863
name="edit-content"
6964
id="edit-content"
7065
value={this.state.content}
71-
onChange={this.handleEditContentChange}
66+
onChange={this.handleEditContentChange.bind(this)}
7267
/>
73-
<button id="confirm" onClick={this.handleEditContent}>OK</button>
74-
<button id="cancel" onClick={this.handleHideEditForm}>Cancel</button>
68+
<button id="confirm" onClick={this.handleEditContent.bind(this)}>OK</button>
69+
<button id="cancel" onClick={this.handleHideEditForm.bind(this)}>Cancel</button>
7570
</span>
7671

7772
<div className="list-item-control">
@@ -89,7 +84,7 @@ export default class ListItem extends React.Component {
8984
</svg>
9085
</label>
9186

92-
<button id="delete-btn" onClick={this.handleDeleteItemClick}>
87+
<button id="delete-btn" onClick={this.handleDeleteItemClick.bind(this)}>
9388
<span></span>
9489
<span></span>
9590
</button>

‎lib/components/app/ListModal.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ export default class ListModal extends React.Component {
44
constructor(props) {
55
super(props)
66
this.open = this.open.bind(this)
7-
this.handleConfirmDelete = this.handleConfirmDelete.bind(this)
8-
this.handleCloseModal = this.handleCloseModal.bind(this)
97
}
108

119
open() {
@@ -32,8 +30,8 @@ export default class ListModal extends React.Component {
3230
<p>You are going to delete the item</p>
3331
<h3>{this.props.modalContent}</h3>
3432
<div className="list-modal-btn-group">
35-
<button id="modal-confirm" onClick={this.handleConfirmDelete}>Yes</button>
36-
<button id="modal-cancel" onClick={this.handleCloseModal}>No</button>
33+
<button id="modal-confirm" onClick={this.handleConfirmDelete.bind(this)}>Yes</button>
34+
<button id="modal-cancel" onClick={this.handleCloseModal.bind(this)}>No</button>
3735
</div>
3836
</div>
3937
</div>

‎public/css/index.css

Lines changed: 4 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ a { text-decoration: none; }
5959
border: none;
6060
transition: .25s;
6161
}
62+
.list-form > input.error, .list-form input.error:focus {
63+
background-color: #FEABB7;
64+
transition: .25s;
65+
}
6266
.list-form > input:focus {
6367
background-color: #eee;
6468
outline: none;
@@ -201,68 +205,6 @@ a { text-decoration: none; }
201205
line-height: 24pt;
202206
color: white
203207
}
204-
.list-modal-wrapper {
205-
opacity: 0;
206-
position: fixed;
207-
width: 100vw;
208-
height: 100vh;
209-
top: 0;
210-
left: 0;
211-
z-index: 3;
212-
background-color: rgba(0, 0, 0, 0.3);
213-
transition: .25s;
214-
pointer-events: none;
215-
}
216-
.list-modal-wrapper.open {
217-
transition: .25s;
218-
opacity: 1;
219-
pointer-events: auto;
220-
}
221-
.list-modal-wrapper > .list-modal {
222-
text-align: center;
223-
position: absolute;
224-
width: 400pt;
225-
height: 175pt;
226-
background-color:#F9DE7F;
227-
color: #666;
228-
top: 0;
229-
bottom: 0;
230-
left: 0;
231-
right: 0;
232-
margin: auto;
233-
}
234-
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
235-
position: absolute;
236-
width: 400pt;
237-
height: 50pt;
238-
bottom: 0;
239-
padding-top: 10pt;
240-
}
241-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
242-
vertical-align: bottom;
243-
width: 75pt;
244-
height: 30pt;
245-
line-height: 30pt;
246-
font-size: 15pt;
247-
border: none;
248-
color: white;
249-
transition: .25s;
250-
margin: 0 5pt;
251-
}
252-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm,
253-
.list-item > span#edit-form > button#confirm {
254-
background-color: #79D1C3;
255-
}
256-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm:hover,
257-
.list-item > span#edit-form > button#confirm:hover {
258-
background-color: #67C0A1;
259-
transition: .25s;
260-
}
261-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel,
262-
.list-item > span#edit-form > button#cancel {
263-
background-color: #ff6a80;
264-
}
265-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel:hover,
266208
.list-item > span#edit-form > button#cancel:hover {
267209
background-color: #dd4960;
268210
transition: .25s;

‎public/css/list-modal.css

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.list-modal-wrapper {
2+
opacity: 0;
3+
position: fixed;
4+
width: 100vw;
5+
height: 100vh;
6+
top: 0;
7+
left: 0;
8+
z-index: 3;
9+
background-color: rgba(0, 0, 0, 0.3);
10+
transition: .25s;
11+
pointer-events: none;
12+
}
13+
.list-modal-wrapper.open {
14+
transition: .25s;
15+
opacity: 1;
16+
pointer-events: auto;
17+
}
18+
.list-modal-wrapper > .list-modal {
19+
text-align: center;
20+
position: absolute;
21+
height: 175pt;
22+
background-color:#F9DE7F;
23+
color: #666;
24+
top: 0;
25+
bottom: 0;
26+
left: 0;
27+
right: 0;
28+
margin: auto;
29+
}
30+
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
31+
position: absolute;
32+
height: 50pt;
33+
bottom: 0;
34+
padding-top: 10pt;
35+
}
36+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
37+
vertical-align: bottom;
38+
width: 75pt;
39+
height: 30pt;
40+
line-height: 30pt;
41+
font-size: 15pt;
42+
border: none;
43+
color: white;
44+
transition: .25s;
45+
margin: 0 5pt;
46+
}
47+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm,
48+
.list-item > span#edit-form > button#confirm {
49+
background-color: #79D1C3;
50+
}
51+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm:hover,
52+
.list-item > span#edit-form > button#confirm:hover {
53+
background-color: #67C0A1;
54+
transition: .25s;
55+
}
56+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel,
57+
.list-item > span#edit-form > button#cancel {
58+
background-color: #ff6a80;
59+
}
60+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel:hover {
61+
background-color: #dd4960;
62+
transition: .25s;
63+
}
64+
65+
@media screen and (max-width: 767px) {
66+
.list-modal-wrapper > .list-modal {
67+
width: 100%;
68+
}
69+
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
70+
width: 100%;
71+
}
72+
.list-modal-wrapper > .list-modal > h2 {
73+
font-size: 16pt;
74+
}
75+
.list-modal-wrapper > .list-modal > h3 {
76+
font-size: 14pt;
77+
}
78+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
79+
font-size: 12pt;
80+
}
81+
}
82+
@media screen and (min-width: 768px) {
83+
.list-modal-wrapper > .list-modal {
84+
width: 450pt;
85+
}
86+
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
87+
width: 450pt;
88+
}
89+
.list-modal-wrapper > .list-modal > h2 {
90+
font-size: 20pt;
91+
}
92+
.list-modal-wrapper > .list-modal > h3 {
93+
font-size: 18pt;
94+
}
95+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
96+
font-size: 16pt;
97+
}
98+
}

‎public/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1">
1010
<title>Goby Sample Web App</title>
1111
<link rel="stylesheet" href="/css/index.css" />
12-
<link rel="stylesheet" href="/css/caption.css">
12+
<link rel="stylesheet" href="/css/caption.css" />
1313
<link rel="stylesheet" href="/css/mc-embed-signup.css" />
1414
<link rel="stylesheet" href="/css/navbar.css" />
15-
<link rel="stylesheet" href="/css/code-tab.css">
15+
<link rel="stylesheet" href="/css/code-tab.css" />
1616
<link rel="stylesheet" href="/css/code-style/tomorrow-night-blue.css" id="code-style" />
17+
<link rel="stylesheet" href="/css/list-modal.css" />
1718
<script src="/js/index.js"></script>
1819
</head>
1920
<body>

0 commit comments

Comments
 (0)