#433: persistency of status form

src/components/conversation/conversation.js

@@ -1,4 +1,4 @@
-import { reduce, filter } from 'lodash'
+import { reduce, filter, findIndex } from 'lodash'
 import Status from '../status/status.vue'
 
 const sortById = (a, b) => {
@@ -25,13 +25,13 @@ const sortAndFilterConversation = (conversation) => {
 const conversation = {
   data () {
     return {
-      highlight: null
+      highlight: null,
+      expanded: false
     }
   },
   props: [
     'statusoid',
-    'collapsable',
-    'replying'
+    'collapsable'
   ],
   computed: {
     status () {
@@ -49,9 +49,18 @@ const conversation = {
         return []
       }
 
+      if (!this.expanded) {
+        return [this.status]
+      }
+
       const conversationId = this.status.statusnet_conversation_id
       const statuses = this.$store.state.statuses.allStatuses
       const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
+
+      const statusIndex = findIndex(conversation, { id: this.statusId })
+      if (statusIndex !== -1) {
+        conversation[statusIndex] = this.status
+      }
       return sortAndFilterConversation(conversation)
     },
     replies () {
@@ -75,11 +84,13 @@ const conversation = {
   components: {
     Status
   },
-  created () {
-    this.fetchConversation()
-  },
   watch: {
-    '$route': 'fetchConversation'
+    '$route': 'fetchConversation',
+    expanded (value) {
+      if (value) {
+        this.fetchConversation()
+      }
+    }
   },
   methods: {
     fetchConversation () {
@@ -99,13 +110,16 @@ const conversation = {
       return this.replies[id] || []
     },
     focused (id) {
-      return id === this.statusId
+      return this.expanded && id === this.statusId
     },
     setHighlight (id) {
       this.highlight = id
     },
-    toggleReplying () {
-      this.$emit('toggleReplying')
+    getHighlight () {
+      return this.expanded ? this.highlight : null
+    },
+    toggleExpanded () {
+      this.expanded = !this.expanded
     }
   }
 }

src/components/conversation/conversation.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading conversation-heading">
+  <div class="timeline panel-default" :class="[expanded ? 'panel' : 'panel-disabled']">
+    <div v-if="expanded" class="panel-heading conversation-heading">
       <span class="title"> {{ $t('timeline.conversation') }} </span>
       <span v-if="collapsable">
-        <a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a>
+        <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a>
       </span>
     </div>
     <div class="panel-body">
@@ -11,15 +11,14 @@
         <status
           v-for="status in conversation"
           @goto="setHighlight"
-          @toggleReplying="toggleReplying"
-          :replying="replying && status.id === statusId"
+          @toggleExpanded="toggleExpanded"
           :key="status.id"
           :inlineExpanded="collapsable"
           :statusoid="status"
-          :expandable='false'
+          :expandable='!expanded'
           :focused="focused(status.id)"
-          :inConversation='true'
-          :highlight="highlight"
+          :inConversation="expanded"
+          :highlight="getHighlight()"
           :replies="getReplies(status.id)"
           class="status-fadein"
         />
@@ -29,3 +28,19 @@
 </template>
 
 <script src="./conversation.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.timeline {
+  .panel-disabled {
+    .status-el {
+      border-left: none;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-color: var(--border, $fallback--border);
+      border-radius: 0;
+    }
+  }
+}
+</style>

src/components/status/status.js

@@ -25,11 +25,11 @@ const Status = {
     'replies',
     'isPreview',
     'noHeading',
-    'inlineExpanded',
-    'replying'
+    'inlineExpanded'
   ],
   data () {
     return {
+      replying: false,
       expanded: false,
       unmuted: false,
       userExpanded: false,
@@ -307,10 +307,9 @@ const Status = {
       }
     },
     toggleReplying () {
-      this.$emit('toggleReplying')
+      this.replying = !this.replying
     },
     gotoOriginal (id) {
-      // only handled by conversation, not status_or_conversation
       if (this.inConversation) {
         this.$emit('goto', id)
       }

src/components/status_or_conversation/status_or_conversation.js

@@ -1,26 +0,0 @@
-import Status from '../status/status.vue'
-import Conversation from '../conversation/conversation.vue'
-
-const statusOrConversation = {
-  props: ['statusoid'],
-  data () {
-    return {
-      expanded: false,
-      replying: false
-    }
-  },
-  components: {
-    Status,
-    Conversation
-  },
-  methods: {
-    toggleExpanded () {
-      this.expanded = !this.expanded
-    },
-    toggleReplying () {
-      this.replying = !this.replying
-    }
-  }
-}
-
-export default statusOrConversation

src/components/status_or_conversation/status_or_conversation.vue

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <conversation
-      v-if="expanded"
-      @toggleExpanded="toggleExpanded"
-      @toggleReplying="toggleReplying"
-      :replying="replying"
-      :collapsable="true"
-      :statusoid="statusoid"
-    />
-    <status 
-      v-else
-      @toggleExpanded="toggleExpanded"
-      @toggleReplying="toggleReplying"
-      :replying="replying"
-      :expandable="true"
-      :inConversation="false"
-      :focused="false"
-      :statusoid="statusoid"
-    />
-  </div>
-</template>
-
-<script src="./status_or_conversation.js"></script>
-
-<style lang="scss">
- .spacer {
-   height: 1em
- }
-</style>

src/components/timeline/timeline.js

@@ -1,6 +1,6 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
-import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
+import Conversation from '../conversation/conversation.vue'
 import { throttle } from 'lodash'
 
 const Timeline = {
@@ -43,7 +43,7 @@ const Timeline = {
   },
   components: {
     Status,
-    StatusOrConversation
+    Conversation
   },
   created () {
     const store = this.$store

src/components/timeline/timeline.vue

@@ -16,7 +16,13 @@
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
+        <conversation 
+          v-for="status in timeline.visibleStatuses"
+          class="status-fadein"
+          :key="status.id"
+          :statusoid="status"
+          :collapsable="true"
+        />
       </div>
     </div>
     <div :class="classes.footer">