Skip to content

Commit

Permalink
Refactor global API response handling in axios.
Browse files Browse the repository at this point in the history 
Instead of using a response transformer, move the global response
JSON transformation (snake case to camel case) to the pre-existing
response interceptor. Also, fix the `data.data` and `data`
discrepancy in responses.
  • Loading branch information
@knadh
knadh committed Jul 9, 2020
1 parent 39aa564 commit 3df889c
Show file tree
Hide file tree
Showing 10 changed files with 72 additions and 66 deletions.
46 changes: 28 additions & 18 deletions frontend/src/api/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ const http = axios.create({
baseURL: process.env.BASE_URL,
withCredentials: false,
responseType: 'json',
transformResponse: [
// Apply the defaut transformations as well.
...axios.defaults.transformResponse,
(resp) => {
if (!resp) {
return resp;
}

// There's an error message.
if ('message' in resp && resp.message !== '') {
return resp;
}

return humps.camelizeKeys(resp.data);
},
],
// transformResponse: [
// // Apply the defaut transformations as well.
// ...axios.defaults.transformResponse,
// (resp) => {
// if (!resp) {
// return resp;
// }

// // There's an error message.
// if ('message' in resp && resp.message !== '') {
// return resp;
// }

// return humps.camelizeKeys(resp.data);
// },
// ],

// Override the default serializer to switch params from becoming []id=a&[]id=b ...
// in GET and DELETE requests to id=a&id=b.
Expand All @@ -47,11 +47,21 @@ http.interceptors.response.use((resp) => {
store.commit('setLoading', { model: resp.config.loading, status: false });
}

let data = {};
if (resp.data && resp.data.data) {
if (typeof resp.data.data === 'object') {
data = humps.camelizeKeys(resp.data.data);
} else {
data = resp.data.data;
}
}

// Store the API response for a model.
if ('store' in resp.config) {
store.commit('setModelResponse', { model: resp.config.store, data: resp.data });
store.commit('setModelResponse', { model: resp.config.store, data });
}
return resp;

return data;
}, (err) => {
// Clear the loading state for a model.
if ('loading' in err.config) {
Expand Down
31 changes: 13 additions & 18 deletions frontend/src/views/Campaign.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,13 +181,13 @@ export default Vue.extend({
},
getCampaign(id) {
return this.$api.getCampaign(id).then((r) => {
this.data = r.data;
this.form = { ...this.form, ...r.data };
return this.$api.getCampaign(id).then((data) => {
this.data = data;
this.form = { ...this.form, ...data };
if (r.data.sendAt !== null) {
if (data.sendAt !== null) {
this.form.sendLater = true;
this.form.sendAtDate = dayjs(r.data.sendAt).toDate();
this.form.sendAtDate = dayjs(data.sendAt).toDate();
}
});
},
Expand Down Expand Up @@ -236,13 +236,8 @@ export default Vue.extend({
// body: this.form.body,
};
this.$api.createCampaign(data).then((r) => {
this.$router.push({ name: 'campaign', hash: '#content', params: { id: r.data.id } });
// this.data = r.data;
// this.isEditing = true;
// this.isNew = false;
// this.activeTab = 1;
this.$api.createCampaign(data).then((d) => {
this.$router.push({ name: 'campaign', hash: '#content', params: { id: d.id } });
});
return false;
},
Expand Down Expand Up @@ -270,10 +265,10 @@ export default Vue.extend({
// This promise is used by startCampaign to first save before starting.
return new Promise((resolve) => {
this.$api.updateCampaign(this.data.id, data).then((resp) => {
this.data = resp.data;
this.$api.updateCampaign(this.data.id, data).then((d) => {
this.data = d;
this.$buefy.toast.open({
message: `'${resp.data.name}' ${typMsg}`,
message: `'${d.name}' ${typMsg}`,
type: 'is-success',
queue: false,
});
Expand Down Expand Up @@ -344,10 +339,10 @@ export default Vue.extend({
}
// Get templates list.
this.$api.getTemplates().then((r) => {
if (r.data.length > 0) {
this.$api.getTemplates().then((data) => {
if (data.length > 0) {
if (!this.form.templateId) {
this.form.templateId = r.data.find((i) => i.isDefault === true).id;
this.form.templateId = data.find((i) => i.isDefault === true).id;
}
}
});
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/views/Campaigns.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,9 +293,9 @@ export default Vue.extend({
// Poll for the status as long as the import is running.
this.pollID = setInterval(() => {
this.$api.getCampaignStats().then((r) => {
this.$api.getCampaignStats().then((data) => {
// Stop polling. No running campaigns.
if (r.data.length === 0) {
if (data.length === 0) {
clearInterval(this.pollID);
// There were running campaigns and stats earlier. Clear them
Expand All @@ -307,7 +307,7 @@ export default Vue.extend({
} else {
// Turn the list of campaigns [{id: 1, ...}, {id: 2, ...}] into
// a map indexed by the id: {1: {}, 2: {}}.
this.campaignStatsData = r.data.reduce((obj, cur) => ({ ...obj, [cur.id]: cur }), {});
this.campaignStatsData = data.reduce((obj, cur) => ({ ...obj, [cur.id]: cur }), {});
}
}, () => {
clearInterval(this.pollID);
Expand Down Expand Up @@ -336,8 +336,8 @@ export default Vue.extend({
template_id: c.templateId,
body: c.body,
};
this.$api.createCampaign(data).then((r) => {
this.$router.push({ name: 'campaign', params: { id: r.data.id } });
this.$api.createCampaign(data).then((d) => {
this.$router.push({ name: 'campaign', params: { id: d.id } });
});
},
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,31 +185,31 @@ export default Vue.extend({
mounted() {
// Pull the counts.
this.$api.getDashboardCounts().then((r) => {
this.counts = r.data;
this.$api.getDashboardCounts().then((data) => {
this.counts = data;
this.isCountsLoading = false;
});
// Pull the charts.
this.$api.getDashboardCharts().then((r) => {
this.$api.getDashboardCharts().then((data) => {
this.isChartsLoading = false;
// vue-c3 lib requires unique instances of Vue() to communicate.
if (r.data.campaignViews.length > 0) {
if (data.campaignViews.length > 0) {
this.chartViewsInst = this;
this.$nextTick(() => {
this.chartViewsInst.$emit('init',
this.makeChart('Campaign views', r.data.campaignViews));
this.makeChart('Campaign views', data.campaignViews));
});
}
if (r.data.linkClicks.length > 0) {
if (data.linkClicks.length > 0) {
this.chartClicksInst = new Vue();
this.$nextTick(() => {
this.chartClicksInst.$emit('init',
this.makeChart('Link clicks', r.data.linkClicks));
this.makeChart('Link clicks', data.linkClicks));
});
}
});
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/Forms.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<p><input type="text" name="name" placeholder="Name (optional)" /></p>
<template v-for="l in publicLists"><span v-if="l.uuid in selected" :key="l.id" :set="id = l.uuid.substr(0, 5)">
&lt;p&gt;
&lt;input id=&quot;{{ id }}&quot; type=&quot;checkbox&quot; name=&quot;l&quot; value=&quot;{{ uuid }}&quot; /&gt;
&lt;input id=&quot;{{ id }}&quot; type=&quot;checkbox&quot; name=&quot;l&quot; value=&quot;{{ l.uuid }}&quot; /&gt;
&lt;label for=&quot;{{ id }}&quot;&gt;{{ l.name }}&lt;/label&gt;
&lt;/p&gt;</span></template>
&lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Subscribe&quot; /&gt;&lt;/p&gt;
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/views/Import.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,10 +216,10 @@ export default Vue.extend({
// Poll for the status as long as the import is running.
this.pollID = setInterval(() => {
this.$api.getImportStatus().then((r) => {
this.$api.getImportStatus().then((data) => {
this.isProcessing = false;
this.isLoading = false;
this.status = r.data;
this.status = data;
this.getLogs();
if (!this.isRunning()) {
Expand All @@ -236,8 +236,8 @@ export default Vue.extend({
},
getLogs() {
this.$api.getImportLogs().then((r) => {
this.logs = r.data;
this.$api.getImportLogs().then((data) => {
this.logs = data;
Vue.nextTick(() => {
// vue.$refs doesn't work as the logs textarea is rendered dynamiaclly.
Expand Down Expand Up @@ -271,7 +271,7 @@ export default Vue.extend({
}));
params.set('file', this.form.file);
// Make the API request.
// Post.
this.$api.importSubscribers(params).then(() => {
// On file upload, show a confirmation.
this.$buefy.toast.open({
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/ListForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,23 +79,23 @@ export default Vue.extend({
},
createList() {
this.$api.createList(this.form).then((resp) => {
this.$api.createList(this.form).then((data) => {
this.$emit('finished');
this.$parent.close();
this.$buefy.toast.open({
message: `'${resp.data.name}' created`,
message: `'${data.name}' created`,
type: 'is-success',
queue: false,
});
});
},
updateList() {
this.$api.updateList({ id: this.data.id, ...this.form }).then((resp) => {
this.$api.updateList({ id: this.data.id, ...this.form }).then((data) => {
this.$emit('finished');
this.$parent.close();
this.$buefy.toast.open({
message: `'${resp.data.name}' updated`,
message: `'${data.name}' updated`,
type: 'is-success',
queue: false,
});
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/SubscriberForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,11 @@ export default Vue.extend({
lists: this.form.lists.map((l) => l.id),
};
this.$api.createSubscriber(data).then((resp) => {
this.$api.createSubscriber(data).then((d) => {
this.$emit('finished');
this.$parent.close();
this.$buefy.toast.open({
message: `'${resp.data.name}' created`,
message: `'${d.name}' created`,
type: 'is-success',
queue: false,
});
Expand All @@ -136,11 +136,11 @@ export default Vue.extend({
lists: this.form.lists.map((l) => l.id),
};
this.$api.updateSubscriber(data).then((resp) => {
this.$api.updateSubscriber(data).then((d) => {
this.$emit('finished');
this.$parent.close();
this.$buefy.toast.open({
message: `'${resp.data.name}' updated`,
message: `'${d.name}' updated`,
type: 'is-success',
queue: false,
});
Expand Down
1 change: 1 addition & 0 deletions frontend/src/views/Subscribers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,6 +385,7 @@ export default Vue.extend({
bulkChangeLists(action, lists) {
const data = {
action,
query: this.fullQueryExp,
target_list_ids: lists.map((l) => l.id),
};
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/TemplateForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,11 @@ export default Vue.extend({
body: this.form.body,
};
this.$api.createTemplate(data).then((resp) => {
this.$api.createTemplate(data).then((d) => {
this.$emit('finished');
this.$parent.close();
this.$buefy.toast.open({
message: `'${resp.data.name}' created`,
message: `'${d.name}' created`,
type: 'is-success',
queue: false,
});
Expand All @@ -112,11 +112,11 @@ export default Vue.extend({
body: this.form.body,
};
this.$api.updateTemplate(data).then((resp) => {
this.$api.updateTemplate(data).then((d) => {
this.$emit('finished');
this.$parent.close();
this.$buefy.toast.open({
message: `'${resp.data.name}' updated`,
message: `'${d.name}' updated`,
type: 'is-success',
queue: false,
});
Expand Down

0 comments on commit 3df889c

Please sign in to comment.