diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
new file mode 100644
index 00000000..ea26d958
--- /dev/null
+++ b/src/components/conversation/conversation.js
@@ -0,0 +1,48 @@
+import { find, filter, sortBy, toInteger } from 'lodash'
+import Status from '../status/status.vue'
+import apiService from '../../services/api/api.service.js'
+
+const conversation = {
+ computed: {
+ status () {
+ const id = toInteger(this.$route.params.id)
+ const statuses = this.$store.state.statuses.allStatuses
+ const status = find(statuses, {id})
+
+ return status
+ },
+ conversation () {
+ if (!this.status) {
+ return false
+ }
+
+ const conversationId = this.status.statusnet_conversation_id
+ const statuses = this.$store.state.statuses.allStatuses
+ const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
+ return sortBy(conversation, 'id')
+ }
+ },
+ components: {
+ Status
+ },
+ created () {
+ this.fetchConversation()
+ },
+ methods: {
+ fetchConversation () {
+ if (this.status) {
+ const conversationId = this.status.statusnet_conversation_id
+ apiService.fetchConversation({id: conversationId})
+ .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
+ .then(() => this.$store.commit('updateTimestamps'))
+ } else {
+ const id = this.$route.params.id
+ apiService.fetchStatus({id})
+ .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
+ .then(() => this.fetchConversation())
+ }
+ }
+ }
+}
+
+export default conversation
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
new file mode 100644
index 00000000..60b3f044
--- /dev/null
+++ b/src/components/conversation/conversation.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index de3b2af1..64d331f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import App from './App.vue'
import PublicTimeline from './components/public_timeline/public_timeline.vue'
import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
+import Conversation from './components/conversation/conversation.vue'
import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js'
@@ -23,7 +24,8 @@ const routes = [
{ path: '/', redirect: '/main/all' },
{ path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline },
- { path: '/main/friends', component: FriendsTimeline }
+ { path: '/main/friends', component: FriendsTimeline },
+ { name: 'conversation', path: '/notice/:id', component: Conversation }
]
const router = new VueRouter({