From 5ec4f1b047d798b7038ec73db86476e70d2b1888 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sat, 4 Feb 2017 13:52:26 +0100
Subject: [PATCH] Extract conversation and create conversation page.

---
 .../conversation-page/conversation-page.js    | 19 +++++++++++++++++++
 .../conversation-page/conversation-page.vue   |  5 +++++
 src/components/conversation/conversation.js   | 14 ++++++--------
 src/components/conversation/conversation.vue  |  9 +++++++--
 src/main.js                                   |  4 ++--
 5 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 src/components/conversation-page/conversation-page.js
 create mode 100644 src/components/conversation-page/conversation-page.vue

diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js
new file mode 100644
index 00000000..beffa5bb
--- /dev/null
+++ b/src/components/conversation-page/conversation-page.js
@@ -0,0 +1,19 @@
+import Conversation from '../conversation/conversation.vue'
+import { find, toInteger } from 'lodash'
+
+const conversationPage = {
+  components: {
+    Conversation
+  },
+  computed: {
+    statusoid () {
+      const id = toInteger(this.$route.params.id)
+      const statuses = this.$store.state.statuses.allStatuses
+      const status = find(statuses, {id})
+
+      return status
+    }
+  }
+}
+
+export default conversationPage
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
new file mode 100644
index 00000000..b03eea28
--- /dev/null
+++ b/src/components/conversation-page/conversation-page.vue
@@ -0,0 +1,5 @@
+<template>
+  <conversation :collapsable="false" :statusoid="statusoid"></conversation>
+</template>
+
+<script src="./conversation-page.js"></script>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 5d4f5d04..ecc76e71 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { find, filter, sortBy, toInteger } from 'lodash'
+import { filter, sortBy } from 'lodash'
 import { statusType } from '../../modules/statuses.js'
 import Status from '../status/status.vue'
 
@@ -8,14 +8,12 @@ const sortAndFilterConversation = (conversation) => {
 }
 
 const conversation = {
+  props: [
+    'statusoid',
+    'collapsable'
+  ],
   computed: {
-    status () {
-      const id = toInteger(this.$route.params.id)
-      const statuses = this.$store.state.statuses.allStatuses
-      const status = find(statuses, {id})
-
-      return status
-    },
+    status () { return this.statusoid },
     conversation () {
       if (!this.status) {
         return false
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 00d3e062..9675e69f 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="timeline panel panel-default base00-background">
-    <div class="panel-heading base01-background base04">Status</div>
+    <div class="panel-heading base01-background base04">
+      Conversation
+      <div v-if="collapsable">
+        <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
+      </div>
+    </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
       </div>
     </div>
   </div>
diff --git a/src/main.js b/src/main.js
index 1c24b28c..c187ffd6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +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 ConversationPage from './components/conversation-page/conversation-page.vue'
 import Mentions from './components/mentions/mentions.vue'
 import UserProfile from './components/user_profile/user_profile.vue'
 
@@ -39,7 +39,7 @@ const routes = [
   { path: '/main/all', component: PublicAndExternalTimeline },
   { path: '/main/public', component: PublicTimeline },
   { path: '/main/friends', component: FriendsTimeline },
-  { name: 'conversation', path: '/notice/:id', component: Conversation },
+  { name: 'conversation', path: '/notice/:id', component: ConversationPage },
   { name: 'user-profile', path: '/users/:id', component: UserProfile },
   { name: 'mentions', path: '/:username/mentions', component: Mentions }
 ]