Skip to content

Commit 9a540bf

Browse files
author
Ludovic Lerus
committed
refactor(app): code cleaned and jsdoc added
1 parent 4da8ead commit 9a540bf

File tree

7 files changed

+151
-64
lines changed

7 files changed

+151
-64
lines changed

‎js/app.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1-
'use strict';
1+
const Backbone = require('backbone');
2+
const path = require('path');
23

3-
const Backbone = require('backbone');
4-
const Router = require('./js/router.js');
4+
const Router = require(path.resolve('js/router.js'));
55

6+
/**
7+
* Start the app by setting the Backbone Router.
8+
*/
69
class SocketIOTester {
10+
/**
11+
* Initilize the Backbone Router.
12+
*/
713
constructor() {
814
this.router = new Router();
915
Backbone.history.start();
1016
}
1117
}
1218

13-
const app = new SocketIOTester();
19+
module.exports = new SocketIOTester();

‎js/configStore.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,33 @@
1-
'use strict';
1+
const path = require('path');
2+
const Configstore = require('configstore');
23

3-
const Configstore = require('configstore');
4-
const pkg = require(__dirname + '/../package.json');
4+
const pkg = require(path.resolve('package.json'));
55

6+
/**
7+
* The ConfigStore class handle the storage of persistant datas for the app.
8+
*/
69
class ConfigStore {
10+
/**
11+
* Initialize the ConfigStore Object.
12+
*/
713
constructor() {
814
this.conf = new Configstore(pkg.name);
915
}
1016

17+
/**
18+
* Return a value from the storage.
19+
* @param {String} name - The name of the value.
20+
* @return {Object} The value.
21+
*/
1122
get(name) {
1223
return this.conf.get(name);
1324
}
1425

26+
/**
27+
* Set a value associated with a name in the storage.
28+
* @param {String} name - The name.
29+
* @param {Object} value - The value.
30+
*/
1531
set(name, value) {
1632
this.conf.set(name, value);
1733
}

‎js/models/host.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
'use strict';
2-
31
const Backbone = require('backbone');
42

3+
/**
4+
* HostModel is a Backbone model which handle the host and the port of the socket server.
5+
*/
56
class HostModel extends Backbone.Model {
6-
constructor(data) {
7-
super(data);
8-
}
9-
7+
/**
8+
* Define the defaults values for the Model.
9+
* @return {Object} An Object with default values.
10+
*/
1011
defaults() {
1112
return {
1213
host: 'http://127.0.0.1',
13-
port: 5000
14-
}
14+
port: 5000,
15+
};
1516
}
1617
}
1718

‎js/router.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,37 @@
1-
'use strict';
2-
3-
const Backbone = require('backbone');
4-
const HomeView = require('./views/home.js');
5-
const SocketTesterView = require('./views/socketTester.js');
6-
const $ = require('jquery');
1+
const Backbone = require('backbone');
2+
const HomeView = require('./views/home.js');
3+
const SocketTesterView = require('./views/socketTester.js');
4+
const $ = require('jquery');
75

6+
/**
7+
* The Router class handle every route of the Backbone app.
8+
*/
89
class Router extends Backbone.Router {
10+
/**
11+
* Define routes.
12+
*/
913
constructor() {
1014
const options = {
1115
routes: {
12-
'': 'home',
13-
'socket_tester': 'socketTester'
14-
}
16+
'': 'home',
17+
socket_tester: 'socketTester',
18+
},
1519
};
1620
super(options);
1721
}
1822

23+
/**
24+
* Load the HomeView.
25+
*/
1926
home() {
2027
const homeView = new HomeView();
2128
homeView.render();
2229
$('#view').empty().append(homeView.$el);
2330
}
2431

32+
/**
33+
* Load the SocketTesterView.
34+
*/
2535
socketTester() {
2636
const socketTesterView = new SocketTesterView();
2737
socketTesterView.render();

‎js/views/home.js‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,52 @@
1-
'use strict';
1+
const Backbone = require('backbone');
2+
const path = require('path');
23

3-
const Backbone = require('backbone');
4-
const configstore = require('./../configStore.js');
5-
const HostModel = require(__dirname + '/../models/host.js');
6-
const validator = require('validator');
7-
const View = require('./view.js');
4+
const configstore = require('../configStore.js');
5+
const HostModel = require('../models/host.js');
6+
const validator = require('validator');
7+
const View = require('./view.js');
88

9+
/**
10+
* The HomeView is where we can enter the socket URL and start the connection.
11+
*/
912
class HomeView extends View {
13+
/**
14+
* Initialize datas for the HomeView.
15+
*/
1016
constructor() {
1117
super({
1218
events: {
13-
'click #buttonConnection': 'clickButtonConnection'
14-
}
19+
'click #buttonConnection': 'clickButtonConnection',
20+
},
1521
});
16-
this.initializeTemplate(__dirname + '/../templates/home.hbs');
22+
this.initializeTemplate(path.join(__dirname, '/../templates/home.hbs'));
1723
const hostConfig = configstore.get('host');
1824
this.hostModel = new HostModel(hostConfig);
1925
}
2026

27+
/**
28+
* Method called when the user click on the connection button.
29+
* @param {Object} e - The click event.
30+
*/
2131
clickButtonConnection(e) {
2232
e.preventDefault();
2333
const data = {
2434
host: $('#inputHost').val(),
25-
port: $('#inputPort').val()
35+
port: $('#inputPort').val(),
2636
};
37+
2738
if (validator.isURL(data.host) && (data.port.length === 0 || validator.isNumeric(data.port))) {
2839
if (!data.host.startsWith('http://') && !data.host.startsWith('https://')) {
29-
data.host = 'http://' + data.host;
40+
data.host = `http://${data.host}`;
3041
}
3142
configstore.set('host', new HostModel(data));
3243
Backbone.history.navigate('socket_tester', true);
3344
}
3445
}
3546

47+
/**
48+
* Render the view.
49+
*/
3650
render() {
3751
this.$el.html(this.template(this.hostModel.toJSON()));
3852
}

‎js/views/socketTester.js‎

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
1-
'use strict';
1+
const io = require('socket.io-client');
2+
const path = require('path');
23

3-
const configstore = require('./../configStore.js');
4-
const View = require('./view.js');
5-
const io = require('socket.io-client');
4+
const configstore = require('../configStore.js');
5+
const View = require('./view.js');
66

7+
/**
8+
* The SocketTester view where we can emit and listen socketss.
9+
*/
710
class SocketTesterView extends View {
11+
/**
12+
* Initialize datas for the SocketTesterView.
13+
*/
814
constructor() {
915
super({
1016
events: {
11-
'click #buttonChangeStatus': 'onClickButtonChangeStatus',
12-
'click #buttonSendSocket': 'onClickButtonSendSocket',
13-
'click #buttonSendListen': 'onClickButtonSendListen',
14-
'click #buttonRemoveOutputDiv': 'onClickButtonRemoveOutputDiv',
15-
'click #buttonRemoveOutputDivListen': 'onButtonRemoveOutputDivListen',
16-
'change input[type=radio]': 'onChangeInput'
17-
}
17+
'click #buttonChangeStatus': 'onClickButtonChangeStatus',
18+
'click #buttonSendSocket': 'onClickButtonSendSocket',
19+
'click #buttonSendListen': 'onClickButtonSendListen',
20+
'click #buttonRemoveOutputDiv': 'onClickButtonRemoveOutputDiv',
21+
'click #buttonRemoveOutputDivListen': 'onButtonRemoveOutputDivListen',
22+
'change input[type=radio]': 'onChangeInput',
23+
},
1824
});
1925

20-
this.initializeTemplate(__dirname + '/../templates/socket_tester.hbs');
26+
this.initializeTemplate(path.join(__dirname, '../templates/socket_tester.hbs'));
2127

22-
this.host = configstore.get('host');
28+
this.host = configstore.get('host');
2329
if (this.host.port.length > 0) {
24-
this.socket = io(this.host.host + ':' + this.host.port);
30+
this.socket = io(`${this.host.host}:${this.host.port}`);
2531
} else {
2632
this.socket = io(this.host.host);
2733
}
@@ -49,13 +55,22 @@ class SocketTesterView extends View {
4955
});
5056
}
5157

58+
/**
59+
* Add a div with the result from the socket server.
60+
* @param {String} className - The name the class associated with the div.
61+
* @param {String} eventName - The name of the socket event.
62+
* @param {Object} insertBefore - Insert the div before this element.
63+
* @param {Object} data - The result from the server.
64+
* @param {Function} onRemove - A function called when the element is removed.
65+
* @return {Object} The created div.
66+
*/
5267
createOutput(className, eventName, insertBefore, data, onRemove) {
5368
const outputDiv = $('#divOutput').clone();
5469

5570
outputDiv.attr('id', '');
5671
outputDiv.addClass(className);
5772

58-
outputDiv.find('i').click(function() {
73+
outputDiv.find('i').click(function () {
5974
$(this).parent().remove();
6075
onRemove();
6176
});
@@ -71,6 +86,9 @@ class SocketTesterView extends View {
7186
return outputDiv;
7287
}
7388

89+
/**
90+
* When the user click on the button to reconnect the app to the socket server.
91+
*/
7492
onClickButtonChangeStatus() {
7593
if (this.socket.connected) {
7694
this.socket.disconnect();
@@ -79,6 +97,10 @@ class SocketTesterView extends View {
7997
}
8098
}
8199

100+
/**
101+
* When the user click on the button to emit a message.
102+
* @param {Object} e - The click event.
103+
*/
82104
onClickButtonSendSocket(e) {
83105
e.preventDefault();
84106

@@ -106,14 +128,14 @@ class SocketTesterView extends View {
106128
try {
107129
data = JSON.parse(data);
108130
} catch (error) {
109-
$('#sendInputError').show().find('ul').append('<li>' + error + '</li>');
131+
$('#sendInputError').show().find('ul').append(`<li>${error}</li>`);
110132
}
111133
}
112134
}
113135

114136
if (!$('#sendInputError').is(':visible')) {
115-
this.socket.emit(eventName, data, (data) => {
116-
this.createOutput('outputDiv', eventName, $('#buttonRemoveOutputDiv'), data, () => {
137+
this.socket.emit(eventName, data, (dataReceived) => {
138+
this.createOutput('outputDiv', eventName, $('#buttonRemoveOutputDiv'), dataReceived, () => {
117139
if ($('.outputDiv').length === 0) {
118140
$('#buttonRemoveOutputDiv').hide();
119141
}
@@ -125,6 +147,10 @@ class SocketTesterView extends View {
125147
}
126148
}
127149

150+
/**
151+
* When the user click on the button to add a socket to listen.
152+
* @param {Object} e - The click event.
153+
*/
128154
onClickButtonSendListen(e) {
129155
e.preventDefault();
130156

@@ -146,24 +172,34 @@ class SocketTesterView extends View {
146172
$('#buttonRemoveOutputDivListen').show();
147173
}
148174

149-
this.socket.on(eventName, function(data) {
175+
this.socket.on(eventName, (data) => {
150176
outputDiv.find('p').append(JSON.stringify(data));
151177
outputDiv.find('p').append('<br>');
152178
});
153179
}
154180
}
155181

182+
/**
183+
* Called when the user click on the cross to remove the emit div output.
184+
*/
156185
onClickButtonRemoveOutputDiv() {
157186
$('.outputDiv').remove();
158187
$('#buttonRemoveOutputDiv').hide();
159188
}
160189

190+
/**
191+
* Called when the user click on the cross to remove the listen div output.
192+
*/
161193
onButtonRemoveOutputDivListen() {
162194
$('.outputDivListen').remove();
163195
$('#buttonRemoveOutputDivListen').hide();
164196
this.socket.removeAllListeners();
165197
}
166198

199+
/**
200+
* Method called when the user change the data type.
201+
* @param {Object} e - The change event.
202+
*/
167203
onChangeInput(e) {
168204
const value = $(e.currentTarget).val();
169205
if (value === 'text') {
@@ -176,6 +212,9 @@ class SocketTesterView extends View {
176212
$('#sendInputError').hide();
177213
}
178214

215+
/**
216+
* Render the view.
217+
*/
179218
render() {
180219
this.$el.html(this.template(this.host));
181220
}

‎js/views/view.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
'use strict';
2-
3-
const Backbone = require('backbone');
4-
const fs = require('fs');
5-
const Handlebars = require('handlebars');
1+
const Backbone = require('backbone');
2+
const fs = require('fs');
3+
const Handlebars = require('handlebars');
64

5+
/**
6+
* View is a wrapper of Backbone.View.
7+
*/
78
class View extends Backbone.View {
8-
constructor(options) {
9-
super(options);
10-
}
11-
9+
/**
10+
* Load the template file.
11+
* @param {String} templatePath - The path.
12+
*/
1213
initializeTemplate(templatePath) {
13-
this.template = Handlebars.compile( fs.readFileSync(templatePath, 'utf8') );
14+
this.template = Handlebars.compile(fs.readFileSync(templatePath, 'utf8'));
1415
}
1516
}
1617

0 commit comments

Comments
 (0)