Skip to content

Commit 08a052a

Browse files
writesonwriteson
authored
Merge pull request #42 from realpython/updating-part-3-javascript-code
Making the web apps work completely, and more consistent code use acr…
2 parents e4a031d + 80d1209 commit 08a052a

File tree

3 files changed

+102
-84
lines changed

3 files changed

+102
-84
lines changed

‎flask-connexion-rest-part-3/requirements.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ MarkupSafe==1.1.0
1515
marshmallow==2.18.0
1616
marshmallow-sqlalchemy==0.15.0
1717
openapi-spec-validator==0.2.4
18+
pathlib==1.0.1
1819
PyYAML==4.2b4
1920
requests==2.21.0
2021
six==1.12.0

‎flask-connexion-rest-part-3/static/js/notes.js‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ ns.controller = (function (m, v) {
158158
.done(function (data) {
159159
view.build_table(data);
160160
view.update_editor(data);
161-
view.set_button_states(view.EXISTING_NOTE);
161+
view.set_button_states(view.NEW_NOTE);
162162
})
163163
.fail(function (xhr, textStatus, errorThrown) {
164164
error_handler(xhr, textStatus, errorThrown);
@@ -203,7 +203,13 @@ ns.controller = (function (m, v) {
203203
content: note
204204
})
205205
.done(function (data) {
206-
model.read(parseInt($('#url_person_id').val()));
206+
model.read(parseInt($('#url_person_id').val()))
207+
.done(function(data) {
208+
view.build_table(data);
209+
})
210+
.fail(function(xhr, textStatus, errorThrown) {
211+
error_handler(xhr, textStatus, errorThrown);
212+
});
207213
view.reset();
208214
view.set_button_states(view.NEW_NOTE);
209215
})
@@ -229,7 +235,13 @@ ns.controller = (function (m, v) {
229235
content: note
230236
})
231237
.done(function (data) {
232-
model.read(data.person.person_id);
238+
model.read(data.person.person_id)
239+
.done(function(data) {
240+
view.build_table(data);
241+
})
242+
.fail(function(xhr, textStatus, errorThrown) {
243+
error_handler(xhr, textStatus, errorThrown);
244+
});
233245
view.reset();
234246
view.set_button_states(view.NEW_NOTE);
235247
})
@@ -251,7 +263,13 @@ ns.controller = (function (m, v) {
251263
if (validate('placeholder', lname)) {
252264
model.delete(person_id, note_id)
253265
.done(function (data) {
254-
model.read(parseInt($('#url_person_id').val()));
266+
model.read(parseInt($('#url_person_id').val()))
267+
.done(function(data) {
268+
view.build_table(data);
269+
})
270+
.fail(function(xhr, textStatus, errorThrown) {
271+
error_handler(xhr, textStatus, errorThrown);
272+
});
255273
view.reset();
256274
view.set_button_states(view.NEW_NOTE);
257275
})
@@ -262,7 +280,6 @@ ns.controller = (function (m, v) {
262280
} else {
263281
alert('Problem with first or last name input');
264282
}
265-
e.preventDefault();
266283
});
267284

268285
$('#reset').click(function () {

‎flask-connexion-rest-part-3/static/js/people.js‎

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* JavaScript file for the application to demonstrate
3-
* using the API
3+
* using the API for the People SPA
44
*/
55

66
// Create the namespace instance
@@ -10,8 +10,6 @@ let ns = {};
1010
ns.model = (function () {
1111
'use strict';
1212

13-
let $event_pump = $('body');
14-
1513
// Return the API
1614
return {
1715
read_one: function (person_id) {
@@ -21,13 +19,7 @@ ns.model = (function () {
2119
accepts: 'application/json',
2220
dataType: 'json'
2321
};
24-
$.ajax(ajax_options)
25-
.done(function (data) {
26-
$event_pump.trigger('model_read_one_success', [data]);
27-
})
28-
.fail(function (xhr, textStatus, errorThrown) {
29-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
30-
});
22+
return $.ajax(ajax_options);
3123
},
3224
read: function () {
3325
let ajax_options = {
@@ -36,13 +28,7 @@ ns.model = (function () {
3628
accepts: 'application/json',
3729
dataType: 'json'
3830
};
39-
$.ajax(ajax_options)
40-
.done(function (data) {
41-
$event_pump.trigger('model_read_success', [data]);
42-
})
43-
.fail(function (xhr, textStatus, errorThrown) {
44-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
45-
});
31+
return $.ajax(ajax_options);
4632
},
4733
create: function (person) {
4834
let ajax_options = {
@@ -53,13 +39,7 @@ ns.model = (function () {
5339
dataType: 'json',
5440
data: JSON.stringify(person)
5541
};
56-
$.ajax(ajax_options)
57-
.done(function (data) {
58-
$event_pump.trigger('model_create_success', [data]);
59-
})
60-
.fail(function (xhr, textStatus, errorThrown) {
61-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
62-
});
42+
return $.ajax(ajax_options);
6343
},
6444
update: function (person) {
6545
let ajax_options = {
@@ -70,13 +50,7 @@ ns.model = (function () {
7050
dataType: 'json',
7151
data: JSON.stringify(person)
7252
};
73-
$.ajax(ajax_options)
74-
.done(function (data) {
75-
$event_pump.trigger('model_update_success', [data]);
76-
})
77-
.fail(function (xhr, textStatus, errorThrown) {
78-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
79-
});
53+
return $.ajax(ajax_options);
8054
},
8155
'delete': function (person_id) {
8256
let ajax_options = {
@@ -85,13 +59,7 @@ ns.model = (function () {
8559
accepts: 'application/json',
8660
contentType: 'plain/text'
8761
};
88-
$.ajax(ajax_options)
89-
.done(function (data) {
90-
$event_pump.trigger('model_delete_success', [data]);
91-
})
92-
.fail(function (xhr, textStatus, errorThrown) {
93-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
94-
});
62+
return $.ajax(ajax_options);
9563
}
9664
};
9765
}());
@@ -125,7 +93,7 @@ ns.view = (function () {
12593
$lname.val(person.lname);
12694
$fname.val(person.fname).focus();
12795
},
128-
set_button_states: function (state) {
96+
set_button_state: function (state) {
12997
if (state === NEW_NOTE) {
13098
$create.prop('disabled', false);
13199
$update.prop('disabled', true);
@@ -171,7 +139,6 @@ ns.controller = (function (m, v) {
171139

172140
let model = m,
173141
view = v,
174-
$event_pump = $('body'),
175142
$url_person_id = $('#url_person_id'),
176143
$person_id = $('#person_id'),
177144
$fname = $('#fname'),
@@ -180,14 +147,35 @@ ns.controller = (function (m, v) {
180147
// Get the data from the model after the controller is done initializing
181148
setTimeout(function () {
182149
view.reset();
183-
model.read();
150+
model.read()
151+
.done(function(data) {
152+
view.build_table(data);
153+
})
154+
.fail(function(xhr, textStatus, errorThrown) {
155+
error_handler(xhr, textStatus, errorThrown);
156+
})
157+
184158
if ($url_person_id.val() !== "") {
185-
model.read_one(parseInt($url_person_id.val()));
159+
model.read_one(parseInt($url_person_id.val()))
160+
.done(function(data) {
161+
view.update_editor(data);
162+
view.set_button_state(view.EXISTING_NOTE);
163+
})
164+
.fail(function(xhr, textStatus, errorThrown) {
165+
error_handler(xhr, textStatus, errorThrown);
166+
});
186167
}
187168
}, 100)
188169

170+
// generic error handler
171+
function error_handler(xhr, textStatus, errorThrown) {
172+
let error_msg = `${textStatus}: ${errorThrown} - ${xhr.responseJSON.detail}`;
173+
174+
view.error(error_msg);
175+
console.log(error_msg);
176+
}
189177
// initialize the button states
190-
view.set_button_states(view.NEW_NOTE);
178+
view.set_button_state(view.NEW_NOTE);
191179

192180
// Validate input
193181
function validate(fname, lname) {
@@ -206,6 +194,22 @@ ns.controller = (function (m, v) {
206194
'fname': fname,
207195
'lname': lname,
208196
})
197+
.done(function(data) {
198+
model.read()
199+
.done(function(data) {
200+
view.build_table(data);
201+
})
202+
.fail(function(xhr, textStatus, errorThrown) {
203+
error_handler(xhr, textStatus, errorThrown);
204+
});
205+
view.set_button_state(view.NEW_NOTE);
206+
})
207+
.fail(function(xhr, textStatus, errorThrown) {
208+
error_handler(xhr, textStatus, errorThrown);
209+
});
210+
211+
view.reset();
212+
209213
} else {
210214
alert('Problem with first or last name input');
211215
}
@@ -224,6 +228,21 @@ ns.controller = (function (m, v) {
224228
fname: fname,
225229
lname: lname,
226230
})
231+
.done(function(data) {
232+
model.read()
233+
.done(function(data) {
234+
view.build_table(data);
235+
})
236+
.fail(function(xhr, textStatus, errorThrown) {
237+
error_handler(xhr, textStatus, errorThrown);
238+
});
239+
view.reset();
240+
view.set_button_state(view.NEW_NOTE);
241+
})
242+
.fail(function(xhr, textStatus, errorThrown) {
243+
error_handler(xhr, textStatus, errorThrown);
244+
})
245+
227246
} else {
228247
alert('Problem with first or last name input');
229248
}
@@ -237,15 +256,29 @@ ns.controller = (function (m, v) {
237256

238257
if (validate('placeholder', lname)) {
239258
model.delete(person_id)
259+
.done(function(data) {
260+
model.read()
261+
.done(function(data) {
262+
view.build_table(data);
263+
})
264+
.fail(function(xhr, textStatus, errorThrown) {
265+
error_handler(xhr, textStatus, errorThrown);
266+
});
267+
view.reset();
268+
view.set_button_state(view.NEW_NOTE);
269+
})
270+
.fail(function(xhr, textStatus, errorThrown) {
271+
error_handler(xhr, textStatus, errorThrown);
272+
});
273+
240274
} else {
241275
alert('Problem with first or last name input');
242276
}
243-
e.preventDefault();
244277
});
245278

246279
$('#reset').click(function () {
247280
view.reset();
248-
view.set_button_states(view.NEW_NOTE);
281+
view.set_button_state(view.NEW_NOTE);
249282
})
250283

251284
$('table').on('click', 'tbody tr', function (e) {
@@ -259,7 +292,7 @@ ns.controller = (function (m, v) {
259292
fname: fname,
260293
lname: lname,
261294
});
262-
view.set_button_states(view.EXISTING_NOTE);
295+
view.set_button_state(view.EXISTING_NOTE);
263296
});
264297

265298
$('table').on('dblclick', 'tbody tr', function (e) {
@@ -269,39 +302,6 @@ ns.controller = (function (m, v) {
269302
window.location.href = `/people/${person_id}/notes`;
270303

271304
});
272-
273-
// Handle the model events
274-
$event_pump.on('model_read_one_success', function (e, data) {
275-
view.update_editor(data);
276-
view.set_button_states(view.EXISTING_NOTE);
277-
});
278-
279-
$event_pump.on('model_read_success', function (e, data) {
280-
view.build_table(data);
281-
});
282-
283-
$event_pump.on('model_create_success', function (e, data) {
284-
model.read();
285-
view.set_button_states(view.NEW_NOTE);
286-
});
287-
288-
$event_pump.on('model_update_success', function (e, data) {
289-
model.read();
290-
view.reset();
291-
view.set_button_states(view.NEW_NOTE);
292-
});
293-
294-
$event_pump.on('model_delete_success', function (e, data) {
295-
model.read();
296-
view.reset();
297-
view.set_button_states(view.NEW_NOTE);
298-
});
299-
300-
$event_pump.on('model_error', function (e, xhr, textStatus, errorThrown) {
301-
let error_msg = textStatus + ': ' + errorThrown + ' - ' + xhr.responseJSON.detail;
302-
view.error(error_msg);
303-
console.log(error_msg);
304-
});
305305
}(ns.model, ns.view));
306306

307307

0 commit comments

Comments
 (0)