diving deeper into refactoring threads

src/components/conversation/conversation.vue

@@ -105,9 +105,10 @@
               :profile-user-id="profileUserId"
               :simple-tree="treeViewIsSimple"
               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
-              :dive="() => diveIntoStatus(status.id)"
+              can-dive
 
               @goto="setHighlight"
+              @dive="() => diveIntoStatus(status.id)"
               @suspendable-state-change="onStatusSuspendStateChange"
             />
             <div
@@ -160,12 +161,13 @@
           :toggle-expanded="toggleExpanded"
 
           :simple="treeViewIsSimple"
-          :toggle-thread-display="toggleThreadDisplay"
           :thread-display-status="threadDisplayStatus"
           :show-thread-recursively="showThreadRecursively"
           :total-reply-count="totalReplyCount"
           :total-reply-depth="totalReplyDepth"
-          :dive="canDive ? diveIntoStatus : undefined"
+
+          :can-dive="canDive"
+          @dive="diveIntoStatus"
           @suspendable-state-change="onStatusSuspendStateChange"
         />
       </div>

src/components/gallery/gallery.js

@@ -165,8 +165,8 @@ const Gallery = {
       } else {
         this.$emit('pause')
       }
-    }
-  }
+    },
+  },
 }
 
 export default Gallery

src/components/status/status.js

@@ -75,44 +75,6 @@ library.add(
 
 const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
 
-const controlledOrUncontrolledGetters = (list) =>
-  list.reduce((res, name) => {
-    const camelized = camelCase(name)
-    const toggle = `controlledToggle${camelized}`
-    const controlledName = `controlled${camelized}`
-    const uncontrolledName = `uncontrolled${camelized}`
-    res[name] = function () {
-      return (this.$data[toggle] !== undefined ||
-        this.$props[toggle] !== undefined) &&
-        this[toggle]
-        ? this[controlledName]
-        : this[uncontrolledName]
-    }
-    return res
-  }, {})
-
-const controlledOrUncontrolledToggle = (obj, name) => {
-  const camelized = camelCase(name)
-  const toggle = `controlledToggle${camelized}`
-  const uncontrolledName = `uncontrolled${camelized}`
-  if (obj[toggle]) {
-    obj[toggle]()
-  } else {
-    obj[uncontrolledName] = !obj[uncontrolledName]
-  }
-}
-
-const controlledOrUncontrolledSet = (obj, name, val) => {
-  const camelized = camelCase(name)
-  const set = `controlledSet${camelized}`
-  const uncontrolledName = `uncontrolled${camelized}`
-  if (obj[set]) {
-    obj[set](val)
-  } else {
-    obj[uncontrolledName] = val
-  }
-}
-
 const Status = {
   name: 'Status',
   components: {
@@ -146,17 +108,22 @@ const Status = {
     inProfile: Boolean,
     inConversation: Boolean,
     inQuote: Boolean,
+    canDive: Boolean,
 
     profileUserId: String,
     simpleTree: Boolean,
     showOtherRepliesAsButton: Boolean,
-    dive: Function,
+    canDive: Boolean,
     ignoreMute: Boolean,
 
-    controlledThreadDisplayStatus: String,
-    controlledToggleThreadDisplay: Function,
+    threadDisplayStatus: String,
   },
-  emits: ['goto', 'toggleExpanded', 'suspendableStateChange'],
+  emits: [
+    'goto',
+    'dive',
+    'toggleExpanded',
+    'suspendableStateChange'
+  ],
   data() {
     return {
       replying: false,
@@ -480,10 +447,10 @@ const Status = {
       return !this.replying && this.mediaPlaying.size === 0
     },
     inThreadForest() {
-      return !!this.controlledThreadDisplayStatus
+      return !!this.threadDisplayStatus
     },
     threadShowing() {
-      return this.controlledThreadDisplayStatus === 'showing'
+      return this.threadDisplayStatus === 'showing'
     },
     visibilityLocalized() {
       return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)

src/components/status/status.vue

@@ -236,10 +236,10 @@
                   />
                 </button>
                 <button
-                  v-if="dive && !simpleTree"
+                  v-if="canDive && !simpleTree"
                   class="button-unstyled"
                   :title="$t('status.show_only_conversation_under_this')"
-                  @click.prevent="dive"
+                  @click.prevent="$emit('dive')"
                 >
                   <FAIcon
                     fixed-width
@@ -432,7 +432,7 @@
               v-if="showOtherRepliesAsButton && replies.length > 1"
               class="button-unstyled -link"
               :title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
-              @click.prevent="dive"
+              @click.prevent="$emit('dive')"
             >
               {{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
             </button>

src/components/thread_tree/thread_tree.js

@@ -26,28 +26,14 @@ const ThreadTree = {
     toggleExpanded: Function,
 
     simple: Boolean,
-    // to control display of the whole thread forest
-    toggleThreadDisplay: Function,
+    canDive: Boolean,
     threadDisplayStatus: Object,
     showThreadRecursively: Function,
     totalReplyCount: Object,
     totalReplyDepth: Object,
-    dive: Function,
   },
-  emits: ['suspendableStateChange'],
+  emits: ['suspendableStateChange', 'dive'],
   computed: {
-    suspendable() {
-      const selfSuspendable = this.$refs.statusComponent
-        ? this.$refs.statusComponent.suspendable
-        : true
-      if (this.$refs.childComponent) {
-        return (
-          selfSuspendable &&
-          this.$refs.childComponent.every((s) => s.suspendable)
-        )
-      }
-      return selfSuspendable
-    },
     reverseLookupTable() {
       return this.conversation.reduce(
         (table, status, index) => {
@@ -72,21 +58,6 @@ const ThreadTree = {
     statusById(id) {
       return this.conversation[this.reverseLookupTable[id]]
     },
-    collapseThread() {
-      /* no-op */
-    },
-    showThread() {
-      /* no-op */
-    },
-    showAllSubthreads() {
-      /* no-op */
-    },
-    toggleCurrentProp(name) {
-      this.toggleStatusContentProperty(this.status.id, name)
-    },
-    setCurrentProp(name) {
-      this.setStatusContentProperty(this.status.id, name)
-    },
   },
 }
 

src/components/thread_tree/thread_tree.vue

@@ -3,30 +3,29 @@
     <Status
       :key="status.id"
       ref="statusComponent"
-      :inline-expanded="collapsable && isExpanded"
       :statusoid="status"
+      :replies="getReplies(status.id)"
+      :inline-expanded="collapsable && isExpanded"
       :expandable="!isExpanded"
       :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
       :focused="isFocusedFunction(status.id)"
       :in-conversation="isExpanded"
       :highlight="highlight"
-      :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview status-fadein panel-body"
 
       :simple-tree="simple"
-      :controlled-thread-display-status="threadDisplayStatus[status.id]"
-      :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
-
-      :dive="dive ? () => dive(status.id) : undefined"
+      :thread-display-status="threadDisplayStatus[status.id]"
 
+      :can-dive="canDive"
+      @dive="$emit('dive', status.id)"
       @goto="setHighlight"
       @toggle-expanded="toggleExpanded"
       @suspendable-state-change="e => $emit('suspendableStateChange', e)"
     />
     <div
-      v-if="currentReplies.length && threadShowing"
+      v-if="currentReplies.length > 0 && threadShowing"
       class="thread-tree-replies"
     >
       <ThreadTree
@@ -50,13 +49,13 @@
         :toggle-expanded="toggleExpanded"
 
         :simple="simple"
-        :toggle-thread-display="toggleThreadDisplay"
         :thread-display-status="threadDisplayStatus"
         :show-thread-recursively="showThreadRecursively"
         :total-reply-count="totalReplyCount"
         :total-reply-depth="totalReplyDepth"
-        :dive="dive"
 
+        :can-dive="canDive"
+        @dive="(e) => $emit('dive', e)"
         @suspendable-state-change="e => $emit('suspendableStateChange', e)"
       />
     </div>
@@ -70,7 +69,7 @@
         tag="button"
         keypath="status.thread_follow_with_icon"
         class="button-unstyled -link thread-tree-show-replies-button"
-        @click.prevent="dive(status.id)"
+        @click.prevent="$emit('dive', status.id)"
       >
         <template #icon>
           <FAIcon