fix(collab): made the inviteMetada to be updated when refreshed to get new comments

Author: ZuhairAhmed-cs

src/visualBuilder/components/Collab/CollabIndicator.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource preact */
 import { collabStyles } from "../../collab.style";
+import { useState, useEffect } from "preact/hooks";
 import classNames from "classnames";
 import React from "preact/compat";
 import ThreadPopup from "./ThreadPopup";
@@ -16,7 +17,13 @@ export interface ICollabIndicator {
 
 const CollabIndicator: React.FC<ICollabIndicator> = (props) => {
     const config = Config.get();
-    const inviteMetadata: IInviteMetadata = config?.collab?.inviteMetadata;
+    const [inviteMetadata, setInviteMetadata] = useState<IInviteMetadata>(
+        config?.collab?.inviteMetadata
+    );
+
+    useEffect(() => {
+        setInviteMetadata(config?.collab?.inviteMetadata);
+    }, [config?.collab?.inviteMetadata]);
 
     const {
         buttonRef,

src/visualBuilder/eventManager/useCollab.ts

@@ -16,6 +16,7 @@ import {
     IThreadDTO,
     ICollabConfig,
     IThreadIdentifier,
+    IThreadRemove,
     IThreadReopen,
 } from "../types/collab.types";
 import { OnEvent } from "@contentstack/advanced-post-message";
@@ -63,7 +64,7 @@ export const useCollab = () => {
     );
 
     const collabPayload = visualBuilderPostMessage?.on(
-        VisualBuilderPostMessageEvents.COLLAB_THREAD_PAYLOAD,
+        VisualBuilderPostMessageEvents.COLLAB_DATA_UPDATE,
         (data: OnEvent<ICollabConfig>) => {
             if (!config?.collab?.enable) return;
 
@@ -72,6 +73,14 @@ export const useCollab = () => {
                 return;
             }
 
+            if (data?.data?.collab?.inviteMetadata) {
+                Config.set(
+                    "collab.inviteMetadata",
+                    data?.data?.collab?.inviteMetadata
+                );
+                return;
+            }
+
             const missingThreadIds =
                 data?.data?.collab?.payload
                     ?.map((payload: IThreadDTO) => generateThread(payload))
@@ -105,17 +114,19 @@ export const useCollab = () => {
     );
 
     const collabThreadRemove = visualBuilderPostMessage?.on(
-        VisualBuilderPostMessageEvents.COLLAB_THREAD_REMOVE,
-        (data: OnEvent<IThreadIdentifier>) => {
-            const threadUid = data?.data?.threadUid;
+        VisualBuilderPostMessageEvents.COLLAB_THREADS_REMOVE,
+        (data: OnEvent<IThreadRemove>) => {
+            const threadUids = data?.data?.threadUids;
 
             if (!config?.collab?.enable) return;
 
             if (data?.data?.updateConfig) {
                 Config.set("collab.isFeedbackMode", true);
             }
-            if (threadUid) {
-                removeCollabIcon(threadUid);
+            if (threadUids.length > 0) {
+                threadUids.forEach((threadUid) => {
+                    removeCollabIcon(threadUid);
+                });
             }
         }
     );

src/visualBuilder/types/collab.types.ts

@@ -281,6 +281,10 @@ export interface ICollabConfig {
 
 export interface IThreadIdentifier {
     threadUid: string;
+}
+
+export interface IThreadRemove {
+    threadUids: string[];
     updateConfig?: boolean;
 }
 

src/visualBuilder/utils/types/postMessage.types.ts

@@ -43,9 +43,9 @@ export enum VisualBuilderPostMessageEvents {
     GET_LOCALE = "get-locale",
     SEND_VARIANT_AND_LOCALE = "send-variant-and-locale",
     COLLAB_ENABLE = "collab-enable",
-    COLLAB_THREAD_PAYLOAD = "collab-thread-payload",
+    COLLAB_DATA_UPDATE = "collab-data-update",
     COLLAB_DISABLE = "collab-disable",
-    COLLAB_THREAD_REMOVE = "collab-thread-remove",
+    COLLAB_THREADS_REMOVE = "collab-threads-remove",
     COLLAB_THREAD_REOPEN = "collab-thread-reopen",
     COLLAB_THREAD_HIGHLIGHT = "collab-thread-highlight",
 }