@codingfactory/socialkit-vue 0.7.19 → 0.7.20

package/src/stores/discussion.ts

@@ -219,6 +219,18 @@ function isTransientThreadListError(error: unknown): boolean {
   return status === 502 || status === 503 || status === 504
 }
 
+const DISCUSSION_SPACE_CHANNEL_PREFIX = 'discussions.space.'
+const DISCUSSION_THREAD_CHANNEL_PREFIX = 'discussions.thread.'
+
+function extractRealtimeChannelId(channelName: string | null, prefix: string): string | null {
+  if (!channelName || !channelName.startsWith(prefix)) {
+    return null
+  }
+
+  const channelId = channelName.slice(prefix.length)
+  return channelId.length > 0 ? channelId : null
+}
+
 export type DiscussionStoreReturn = ReturnType<ReturnType<typeof createDiscussionStoreDefinition>>
 
 export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
@@ -226,6 +238,7 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
     client,
     getCurrentUserId,
     getEcho,
+    onEchoInitialized,
     onEchoReconnected,
     createLoadingState,
     logger = console,
@@ -257,6 +270,8 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
 
     let activeSpaceChannel: string | null = null
     let activeThreadChannel: string | null = null
+    let desiredSpaceChannel: string | null = null
+    let desiredThreadChannel: string | null = null
 
     const locallyCreatedReplyIds = new Set<string>()
     const pendingReplyCreations = new Map<string, number>()
@@ -420,6 +435,71 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
       return mergedItems
     }
 
+    /**
+     * Reorder a flat list of replies (which may arrive in chronological or
+     * score order from the API) into depth-first tree order so that children
+     * always appear directly after their parent branch.  The relative order
+     * of siblings (as returned by the backend sort) is preserved.
+     */
+    function reorderIntoTreeOrder(flatReplies: Reply[]): Reply[] {
+      if (flatReplies.length <= 1) {
+        return flatReplies
+      }
+
+      const replyIds = new Set<string>()
+      for (const reply of flatReplies) {
+        replyIds.add(reply.id)
+      }
+
+      // Group children by their parent. Replies whose parent is not in the
+      // current list are treated as roots (parentKey = '').
+      const childrenMap = new Map<string, Reply[]>()
+      childrenMap.set('', [])
+
+      for (const reply of flatReplies) {
+        const parentId = reply.parent_reply_id
+        const key = typeof parentId === 'string' && parentId !== '' && replyIds.has(parentId)
+          ? parentId
+          : ''
+
+        const siblings = childrenMap.get(key)
+        if (siblings) {
+          siblings.push(reply)
+        } else {
+          childrenMap.set(key, [reply])
+        }
+      }
+
+      const result: Reply[] = []
+
+      function dfs(parentKey: string): void {
+        const children = childrenMap.get(parentKey)
+        if (!children) {
+          return
+        }
+
+        for (const child of children) {
+          result.push(child)
+          dfs(child.id)
+        }
+      }
+
+      dfs('')
+
+      // If some replies were unreachable (orphaned cycles), append them so
+      // nothing is silently dropped.
+      if (result.length < flatReplies.length) {
+        const included = new Set(result.map((reply) => reply.id))
+        for (const reply of flatReplies) {
+          if (!included.has(reply.id)) {
+            result.push(reply)
+          }
+        }
+      }
+
+      return result
+    }
+
     function extractResponsePayload(responseData: unknown): unknown {
       const responseRecord = toRecord(responseData)
       if (!responseRecord) {
@@ -1026,9 +1106,9 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
         currentReplySort.value = sortBy
 
         if (cursor) {
-          replies.value = mergeUniqueById(replies.value, filteredReplyBatch)
+          replies.value = reorderIntoTreeOrder(mergeUniqueById(replies.value, filteredReplyBatch))
         } else {
-          replies.value = filteredReplyBatch
+          replies.value = reorderIntoTreeOrder(filteredReplyBatch)
           hiddenOpeningReplyCountByThread.set(threadId, openingRepliesFilteredInBatch)
           subscribeToThreadRealtime(threadId)
         }
@@ -1217,6 +1297,9 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
     }
 
     function cleanupRealtimeChannels(): void {
+      desiredSpaceChannel = null
+      desiredThreadChannel = null
+
       const echo = getEcho()
       if (!echo) {
         activeSpaceChannel = null
@@ -1328,13 +1411,14 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
     }
 
     function subscribeToSpaceRealtime(spaceId: string): void {
+      const channelName = `${DISCUSSION_SPACE_CHANNEL_PREFIX}${spaceId}`
+      desiredSpaceChannel = channelName
+
       const echo = getEcho()
       if (!echo) {
         return
       }
 
-      const channelName = `discussions.space.${spaceId}`
-
       if (activeSpaceChannel === channelName) {
         return
       }
@@ -1358,13 +1442,14 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
     }
 
     function subscribeToThreadRealtime(threadId: string): void {
+      const channelName = `${DISCUSSION_THREAD_CHANNEL_PREFIX}${threadId}`
+      desiredThreadChannel = channelName
+
       const echo = getEcho()
       if (!echo) {
         return
       }
 
-      const channelName = `discussions.thread.${threadId}`
-
       if (activeThreadChannel === channelName) {
         return
       }
@@ -2291,28 +2376,38 @@ export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
       error.value = message
     }
 
-    const stopListeningToEchoReconnect = onEchoReconnected(() => {
-      const savedSpace = activeSpaceChannel
-      const savedThread = activeThreadChannel
+    function rehydrateRealtimeSubscriptions(): void {
+      const savedDesiredSpaceChannel = desiredSpaceChannel
+      const savedDesiredThreadChannel = desiredThreadChannel
+      const spaceId = extractRealtimeChannelId(savedDesiredSpaceChannel, DISCUSSION_SPACE_CHANNEL_PREFIX)
+      const threadId = extractRealtimeChannelId(savedDesiredThreadChannel, DISCUSSION_THREAD_CHANNEL_PREFIX)
 
       activeSpaceChannel = null
       activeThreadChannel = null
 
-      if (savedSpace) {
-        const spaceId = savedSpace.replace('discussions.space.', '')
+      if (spaceId) {
         subscribeToSpaceRealtime(spaceId)
       }
 
-      if (savedThread) {
-        const threadId = savedThread.replace('discussions.thread.', '')
+      if (threadId) {
         subscribeToThreadRealtime(threadId)
       }
+    }
+
+    const stopListeningToEchoReconnect = onEchoReconnected(() => {
+      rehydrateRealtimeSubscriptions()
+    })
+    const stopListeningToEchoInitialized = onEchoInitialized?.(() => {
+      rehydrateRealtimeSubscriptions()
     })
 
     onScopeDispose(() => {
       if (typeof stopListeningToEchoReconnect === 'function') {
         stopListeningToEchoReconnect()
       }
+      if (typeof stopListeningToEchoInitialized === 'function') {
+        stopListeningToEchoInitialized()
+      }
       cleanupRealtimeChannels()
     })
 

package/src/types/discussion.ts

@@ -267,6 +267,7 @@ export interface DiscussionStoreConfig {
   client: AxiosInstance
   getCurrentUserId: () => string | null
   getEcho: () => DiscussionRealtimeClientLike | null
+  onEchoInitialized?: (callback: () => void) => (() => void) | void
   onEchoReconnected: (callback: () => void) => (() => void) | void
   createLoadingState: () => DiscussionLoadingState
   logger?: Pick<Console, 'error'>