move more stuff into useConversation in preparation for chat view joining the party

src/components/conversation/conversation.js

@@ -1,4 +1,3 @@
-import { get } from 'lodash-es'
 import { storeToRefs } from 'pinia'
 import {
   computed,
@@ -20,8 +19,6 @@ import ThreadTree from 'src/components/thread_tree/thread_tree.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { useStatusesStore } from 'src/stores/statuses.js'
-import { useStreamingStore } from 'src/stores/streaming.js'
 
 import { useConversation } from 'src/composables/useConversation.js'
 import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
@@ -29,8 +26,6 @@ import { useScrollPosition } from 'src/composables/useScrollPosition.js'
 import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
 import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
 
-import { WSConnectionStatus } from 'src/api/websocket.js'
-
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDoubleDown,
@@ -72,17 +67,6 @@ export default {
   },
   emits: ['heightChange', 'suspendableStateChange'],
   setup(props, { emit }) {
-    // # Helpers
-    const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
-    const getConversationId = (statusId) => {
-      const status = getStatusObject(statusId)
-      return get(
-        status,
-        'retweeted_status.statusnet_conversation_id',
-        get(status, 'statusnet_conversation_id'),
-      )
-    }
-
     const scroller = useScrollPosition()
     const tryScrollTo = async (id) => {
       if (!id) {
@@ -100,15 +84,30 @@ export default {
 
     const router = useRouter()
 
+    const onReset = () => {
+      resetThreadDisplay()
+    }
+
+    // # Main things
+    const {
+      currentStatus,
+      mainStatus,
+      fullConversation,
+      replies,
+      getReplies,
+      fetchConversation,
+      loadError,
+      focusedId,
+      setFocused,
+      reset,
+    } = useConversation({
+      statusId,
+      onReset,
+    })
+
     // # Main Configuration / global state
     const { mergedConfig } = storeToRefs(useMergedConfigStore())
-    const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
     const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
-    const streamingEnabled = computed(
-      () =>
-        mergedConfig.value.useStreamingApi &&
-        mastoUserSocketStatus === WSConnectionStatus.JOINED,
-    )
     const { layoutType } = storeToRefs(useInterfaceStore())
     const mobileLayout = computed(() => layoutType.value === 'mobile')
 
@@ -123,32 +122,11 @@ export default {
     provide('isPage', isPage)
     provide('expandable', true)
 
-    // # Focus
-    const focusedId = ref(statusId.value)
     const focused = computed(() => (isExpanded.value ? focusedId.value : null))
-    const setFocused = (id) => {
-      if (!id) return
-      focusedId.value = id
-
-      if (!streamingEnabled.value) {
-        useStatusesStore().fetchStatus(id)
-      }
-
-      useStatusesStore().fetchFavsAndRepeats(id)
-      useStatusesStore().fetchEmojiReactions(id)
-    }
     provide('focused', focused)
-
-    // # Main things
-    const {
-      currentStatus,
-      mainStatus,
-      conversation,
-      replies,
-      getReplies,
-      fetchConversation,
-      loadError,
-    } = useConversation(focusedId, isExpanded)
+    const conversation = computed(() =>
+      !expanded.value ? [currentStatus.value] : fullConversation.value,
+    )
 
     watch(
       expanded,
@@ -156,32 +134,13 @@ export default {
         if (value) {
           await fetchConversation()
         } else {
-          resetDisplayState()
+          reset()
         }
         if (isPage.value) return
       },
       { flush: 'post' },
     )
 
-    const resetDisplayState = () => {
-      setFocused(statusId.value)
-      resetThreadDisplay()
-    }
-    watch(statusId, (newVal, oldVal) => {
-      const newConversationId = getConversationId(newVal)
-      const oldConversationId = getConversationId(oldVal)
-      if (
-        newConversationId &&
-        oldConversationId &&
-        newConversationId === oldConversationId
-      ) {
-        setFocused(newVal)
-      } else {
-        resetDisplayState()
-        fetchConversation()
-      }
-    })
-
     // Component created
     if (isPage.value) {
       fetchConversation()

src/composables/useConversation.js

@@ -1,15 +1,26 @@
 import { get } from 'lodash-es'
-import { computed, provide, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { computed, provide, ref, watch } from 'vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
+import { useStreamingStore } from 'src/stores/streaming.js'
 
 import {
   fetchConversation as apiFetchConversation,
   fetchStatus as apiFetchStatus,
 } from 'src/api/public.js'
 
-export function useConversation(statusId, expanded) {
+export function useConversation({ statusId, onReset }) {
+  const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
+  const { mergedConfig } = storeToRefs(useMergedConfigStore())
+  const streamingEnabled = computed(
+    () =>
+      mergedConfig.value.useStreamingApi &&
+      mastoUserSocketStatus === WSConnectionStatus.JOINED,
+  )
+
   const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
   const getConversationId = (statusId) => {
     const status = getStatusObject(statusId)
@@ -19,6 +30,37 @@ export function useConversation(statusId, expanded) {
       get(status, 'statusnet_conversation_id'),
     )
   }
+  // # Focus
+  const focusedId = ref(statusId.value)
+  const setFocused = (id) => {
+    if (!id) return
+    focusedId.value = id
+
+    if (!streamingEnabled.value) {
+      useStatusesStore().fetchStatus(id)
+    }
+
+    useStatusesStore().fetchFavsAndRepeats(id)
+    useStatusesStore().fetchEmojiReactions(id)
+  }
+  const reset = () => {
+    onReset?.()
+    setFocused(statusId.value)
+  }
+  watch(statusId, (newVal, oldVal) => {
+    const newConversationId = getConversationId(newVal)
+    const oldConversationId = getConversationId(oldVal)
+    if (
+      newConversationId &&
+      oldConversationId &&
+      newConversationId === oldConversationId
+    ) {
+      setFocused(newVal)
+    } else {
+      resetDisplayState()
+      fetchConversation()
+    }
+  })
 
   const loadError = ref(null)
   const currentStatus = computed(() => getStatusObject(statusId.value))
@@ -49,10 +91,6 @@ export function useConversation(statusId, expanded) {
       return []
     }
 
-    if (!expanded.value) {
-      return [currentStatus.value]
-    }
-
     const conversation = useStatusesStore().conversations.get(
       conversationId.value,
     )
@@ -119,10 +157,13 @@ export function useConversation(statusId, expanded) {
   return {
     currentStatus,
     mainStatus,
-    conversation,
+    fullConversation: conversation,
+    focusedId,
+    setFocused,
     replies,
     getReplies,
     fetchConversation,
+    reset,
     loadError,
   }
 }