2 files changed, 60 insertions, 0 deletions
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 @@
+<template>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading">Status</div>
+    <div class="panel-body">
+      <div class="timeline">
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./conversation.js"></script>