opendev/storyboard-vue
Code Issues Proposed changes

Refactor story detail view to use async/await.

Browse Source
This commit is contained in:
Jack Coldrick 2020-05-02 21:10:42 +01:00
parent 3d8a0dff6e
commit b63dd127ae
1 changed files with 21 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/StoryDetail.vue
View File

@ -41,7 +41,7 @@ import axios from 'axios'
export default { export default {
name: 'StoryDetailView', name: 'StoryDetailView',
data: function () { data () {
return { return {
creator: {}, creator: {},
events: [], events: [],
@ -50,42 +50,31 @@ export default {
projects: [] projects: []
} }
}, },
created: function () { created () {
this.getStory(this.$route.params.id) this.getStory(this.$route.params.id)
}, },
methods: { methods: {
getStory: function (storyId) { async getStory (storyId) {
const vm = this
const baseUrl = 'http://localhost:8080/v1' const baseUrl = 'http://localhost:8080/v1'
axios.get(`${baseUrl}/stories/${storyId}`) const { data: story } = await axios.get(`${baseUrl}/stories/${storyId}`)
.then(function (response) { this.story = story
vm.story = response.data const { data: creator } = await axios.get(`${baseUrl}/users/${this.story.creator_id}`)
axios.get(`${baseUrl}/users/${vm.story.creator_id}`) this.creator = creator
.then(function (response) { const { data: tasks } = await axios.get(`${baseUrl}/stories/${storyId}/tasks`)
vm.creator = response.data this.tasks = tasks
})
})
axios.get(`${baseUrl}/stories/${storyId}/tasks`)
.then(function (response) {
const tasks = response.data
vm.tasks = tasks
const requests = [] const requests = []
tasks.reduce(function (acc, task) { tasks.reduce((acc, task) => {
if (!acc.includes(task.project_id)) { if (!acc.includes(task.project_id)) {
acc.push(task.project_id) acc.push(task.project_id)
requests.push(axios.get(`${baseUrl}/projects/${task.project_id}`)) requests.push(axios.get(`${baseUrl}/projects/${task.project_id}`))
} }
return acc return acc
}, []) }, [])
Promise.all(requests).then(responses => {
vm.projects = responses.map(response => response.data) this.projects = (await Promise.all(requests)).map(response => response.data)
}) const { data: events } = await axios.get(`${baseUrl}/events?story_id=${storyId}`)
}) this.events = events
axios.get(`${baseUrl}/events?story_id=${storyId}`)
.then(function (response) {
vm.events = response.data
})
} }
} }
} }