Skip to content

Commit ef9dd96

Browse files
pmzipmzi
committed
choosing page codes refactored
1 parent a428688 commit ef9dd96

File tree

1 file changed

+53
-54
lines changed

1 file changed

+53
-54
lines changed

‎src/js/views/components/ChoosingPage.js‎

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -7,99 +7,98 @@ class ChoosingPage extends React.Component{
77

88
componentDidMount(){
99

10-
let choicesOfChoosingPage = $$('.choosingPage .choice');
10+
this.refs.create.onclick = async ()=>{
1111

12-
for (let choice of choicesOfChoosingPage) {
13-
choice.onclick = async function () {
12+
await this.refs.create.classList.add('choosingPage__item--selected');
1413

15-
await this.classList.add('choosingPage__item--selected');
14+
this.refs.join.classList.add('choosingPage__item--not-selected');
1615

17-
$('.choosingPage .choice:not(.choosingPage__item--selected)').classList.add('choosingPage__item--not-selected');
16+
this.refs.loading.classList.add('choosingPage__loading--show');
1817

18+
// Let's create
1919

20-
let action = this.getAttribute('data-action');
20+
socketHandler.createServer().then(() => {
2121

22-
if (action == 'create') {
22+
setTimeout(() => {
23+
this.refs.loading.classList.remove('choosingPage__loading--show');
2324

24-
$('.choosingPage__loading').classList.add('choosingPage__loading--show');
25+
this.refs.choosingPage.classList.add('choosingPage--fadeOut');
2526

26-
// Let's create
27-
28-
socketHandler.createServer().then(() => {
29-
30-
setTimeout(() => {
31-
$('.choosingPage__loading').classList.remove('choosingPage__loading--show');
27+
setTimeout(() => {
28+
this.refs.choosingPage.classList.add('none');
29+
}, 500)
3230

33-
$('.choosingPage').classList.add('choosingPage--fadeOut');
31+
}, 500)
3432

35-
setTimeout(() => {
36-
$('.choosingPage').classList.add('none');
37-
}, 500)
33+
})
3834

39-
}, 500)
35+
}
4036

41-
})
37+
this.refs.join.onclick = async()=>{
38+
39+
await this.refs.join.classList.add('choosingPage__item--selected');
4240

43-
} else {
41+
this.refs.create.classList.add('choosingPage__item--not-selected');
4442

45-
// Let's join
43+
// Let's join
4644

47-
setTimeout(() => {
45+
setTimeout(() => {
4846

49-
$('.choosingPage__address-wrapper').classList.add('choosingPage__address-wrapper--show');
47+
this.refs.addressWrapper.classList.add('choosingPage__address-wrapper--show');
5048

51-
setTimeout(()=>{
52-
$('.choosingPage__address-wrapper input').focus();
53-
},200)
54-
55-
$('.choosingPage__address-wrapper input').onkeydown = function (e) {
49+
let ipAddressInput = this.refs.addressWrapper.children[0];
5650

57-
if (e.key.toLowerCase() == 'enter') {
51+
setTimeout(()=>{
52+
ipAddressInput.focus();
53+
},200)
54+
55+
ipAddressInput.onkeydown = (e)=>{
5856

59-
let ipAddress = this.value;
57+
if (e.key.toLowerCase() == 'enter') {
6058

61-
$('.choosingPage__loading').classList.add('choosingPage__loading--show');
59+
let ipAddress = ipAddressInput.value;
6260

63-
socketHandler.createClient(ipAddress).then(() => {
61+
this.refs.loading.classList.add('choosingPage__loading--show');
6462

65-
setTimeout(() => {
63+
socketHandler.createClient(ipAddress).then(() => {
6664

67-
$('.choosingPage__loading').classList.remove('choosingPage__loading--show');
65+
ipAddressInput.classList.remove('input--error');
6866

69-
$('.choosingPage').classList.add('choosingPage--fadeOut');
67+
setTimeout(() => {
7068

71-
setTimeout(() => {
69+
this.refs.loading.classList.remove('choosingPage__loading--show');
7270

73-
$('.choosingPage').classList.add('none');
71+
this.refs.choosingPage.classList.add('choosingPage--fadeOut');
7472

75-
}, 500)
73+
setTimeout(() => {
7674

77-
}, 500)
75+
this.refs.choosingPage.classList.add('none');
7876

79-
}).catch(() => {
77+
}, 500)
8078

81-
$('.choosingPage__loading').classList.remove('choosingPage__loading--show');
79+
}, 500)
8280

83-
this.classList.add('input--error');
81+
}).catch(() => {
8482

85-
});
86-
}
83+
this.refs.loading.classList.remove('choosingPage__loading--show');
84+
85+
this.refs.addressWrapper.children[0].classList.add('input--error');
8786

88-
};
87+
});
88+
}
8989

90-
}, 500)
90+
};
9191

92-
}
92+
}, 500)
9393

94-
};
9594
}
9695
}
9796

9897
render (){
9998
return (
100-
<div className="choosingPage">
99+
<div ref='choosingPage' className="choosingPage">
101100

102-
<div data-action="create" className="choosingPage__item choice">
101+
<div ref="create" className="choosingPage__item choice">
103102

104103
<img src="../images/networking.png" alt="" />
105104

@@ -109,7 +108,7 @@ class ChoosingPage extends React.Component{
109108

110109
</div>
111110

112-
<div data-action="join" className="choosingPage__item choice">
111+
<div ref="join" className="choosingPage__item choice">
113112

114113
<img src="../images/networking.png" alt="" />
115114

@@ -119,13 +118,13 @@ class ChoosingPage extends React.Component{
119118

120119
</div>
121120

122-
<div className="choosingPage__loading">
121+
<div ref='loading' className="choosingPage__loading">
123122

124123
<Spinner />
125124

126125
</div>
127126

128-
<div className="choosingPage__address-wrapper">
127+
<div ref='addressWrapper' className="choosingPage__address-wrapper">
129128

130129
<Input center={true} placeholder='IP Address' />
131130

0 commit comments

Comments
 (0)