feat(plugin): delete and reset features to data-channel (#19503)

* [plugin-sdk-data-channel-with-delete] - refactor data channel to add delete and reset features

* [plugin-sdk-data-channel-with-delete] - bumping version and fix lint errors

bigbluebutton-html5/imports/ui/components/plugins-engine/data-channel/channel-manager/manager.tsx

@@ -2,13 +2,17 @@ import React, { useEffect } from 'react';
 import { useMutation, useSubscription } from '@apollo/client';
 import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
 
-import { createChannelIdentifier } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/hooks';
+import { createChannelIdentifier } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/utils';
 import {
+  DataChannelArguments,
   DispatcherFunction, ObjectTo, ToRole, ToUserId,
 } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
 import { DataChannelHooks } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/enums';
+import { HookEvents } from 'bigbluebutton-html-plugin-sdk/dist/cjs/core/enum';
+import { HookEventWrapper, UpdatedEventDetails } from 'bigbluebutton-html-plugin-sdk/dist/cjs/core/types';
 
-import { PLUGIN_DATA_CHANNEL_DISPATCH_QUERY, PLUGIN_DATA_CHANNEL_FETCH_QUERY } from '../queries';
+import PLUGIN_DATA_CHANNEL_FETCH_QUERY from '../queries';
+import { PLUGIN_DATA_CHANNEL_DELETE_MUTATION, PLUGIN_DATA_CHANNEL_DISPATCH_MUTATION, PLUGIN_DATA_CHANNEL_RESET_MUTATION } from '../mutation';
 
 export interface DataChannelItemManagerProps {
   pluginName: string;
@@ -35,7 +39,9 @@ export const DataChannelItemManager: React.ElementType<DataChannelItemManagerPro
   const pluginIdentifier = createChannelIdentifier(channelName, pluginName);
 
   const dataChannelIdentifier = createChannelIdentifier(channelName, pluginName);
-  const [dispatchPluginDataChannelMessage] = useMutation(PLUGIN_DATA_CHANNEL_DISPATCH_QUERY);
+  const [dispatchPluginDataChannelMessage] = useMutation(PLUGIN_DATA_CHANNEL_DISPATCH_MUTATION);
+  const [deletePluginDataChannelMessage] = useMutation(PLUGIN_DATA_CHANNEL_DELETE_MUTATION);
+  const [resetPluginDataChannelMessage] = useMutation(PLUGIN_DATA_CHANNEL_RESET_MUTATION);
 
   const data = useSubscription(PLUGIN_DATA_CHANNEL_FETCH_QUERY, {
     variables: {
@@ -81,12 +87,44 @@ export const DataChannelItemManager: React.ElementType<DataChannelItemManagerPro
   pluginApi.mapOfDispatchers[pluginIdentifier] = useDataChannelHandlerFunction;
   window.dispatchEvent(new Event(`${pluginIdentifier}::dispatcherFunction`));
 
+  const deleteOrResetHandler: EventListener = (
+    (event: HookEventWrapper<void>) => {
+      if (event.detail.hook === DataChannelHooks.DATA_CHANNEL_DELETE) {
+        const eventDetails = event.detail as UpdatedEventDetails<string>;
+        const hookArguments = eventDetails?.hookArguments as DataChannelArguments | undefined;
+        deletePluginDataChannelMessage({
+          variables: {
+            pluginName: hookArguments?.pluginName,
+            dataChannel: hookArguments?.channelName,
+            messageId: eventDetails.data,
+          },
+        });
+      } else if (event.detail.hook === DataChannelHooks.DATA_CHANNEL_RESET) {
+        const eventDetails = event.detail as UpdatedEventDetails<void>;
+        const hookArguments = eventDetails?.hookArguments as DataChannelArguments | undefined;
+        resetPluginDataChannelMessage({
+          variables: {
+            pluginName: hookArguments?.pluginName,
+            dataChannel: hookArguments?.channelName,
+          },
+        });
+      }
+    }) as EventListener;
+
   useEffect(() => {
     window.dispatchEvent(
       new CustomEvent(dataChannelIdentifier, {
-        detail: { hook: DataChannelHooks.DATA_CHANNEL, data },
+        detail: { hook: DataChannelHooks.DATA_CHANNEL_BUILDER, data },
       }),
     );
   }, [data]);
+
+  useEffect(() => {
+    window.addEventListener(HookEvents.UPDATED, deleteOrResetHandler);
+    return () => {
+      window.removeEventListener(HookEvents.UPDATED, deleteOrResetHandler);
+    };
+  }, []);
+
   return null;
 };

bigbluebutton-html5/imports/ui/components/plugins-engine/data-channel/manager.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { createChannelIdentifier } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/hooks';
+import { createChannelIdentifier } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/utils';
 import { DataChannelArguments } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
 import {
   HookEventWrapper, UnsubscribedEventDetails, SubscribedEventDetails,
@@ -42,7 +42,7 @@ const PluginDataChannelManager: React.ElementType<PluginDataChannelManagerProps>
   useEffect(() => {
     const subscribeHandler: EventListener = (
       (event: HookEventWrapper<void>) => {
-        if (event.detail.hook === DataChannelHooks.DATA_CHANNEL) {
+        if (event.detail.hook === DataChannelHooks.DATA_CHANNEL_BUILDER) {
           const eventDetails = event.detail as SubscribedEventDetails;
           const hookArguments = eventDetails?.hookArguments as DataChannelArguments | undefined;
           if (hookArguments?.channelName && hookArguments?.pluginName) {
@@ -52,7 +52,7 @@ const PluginDataChannelManager: React.ElementType<PluginDataChannelManagerProps>
       }) as EventListener;
     const unsubscribeHandler: EventListener = (
       (event: HookEventWrapper<void>) => {
-        if (event.detail.hook === DataChannelHooks.DATA_CHANNEL) {
+        if (event.detail.hook === DataChannelHooks.DATA_CHANNEL_BUILDER) {
           const eventDetails = event.detail as UnsubscribedEventDetails;
           const hookArguments = eventDetails?.hookArguments as DataChannelArguments | undefined;
           if (hookArguments?.channelName && hookArguments?.pluginName) {

bigbluebutton-html5/imports/ui/components/plugins-engine/data-channel/mutation.ts

@@ -0,0 +1,34 @@
+import { gql } from '@apollo/client';
+
+export const PLUGIN_DATA_CHANNEL_DISPATCH_MUTATION = gql`
+  mutation PluginDataChannelDispatchMessage($pluginName: String!,
+    $dataChannel: String!, $payloadJson: String!, $toRoles: [String]!, 
+    $toUserIds: [String]!) {
+      pluginDataChannelDispatchMessage(
+        pluginName: $pluginName,
+        dataChannel: $dataChannel,
+        payloadJson: $payloadJson,
+        toRoles: $toRoles,
+        toUserIds: $toUserIds,
+      )
+    }
+`;
+
+export const PLUGIN_DATA_CHANNEL_RESET_MUTATION = gql`
+  mutation PluginDataChannelReset($pluginName: String!, $dataChannel: String!) {
+        pluginDataChannelReset(
+            pluginName: $pluginName,
+            dataChannel: $dataChannel
+        )
+    }
+`;
+
+export const PLUGIN_DATA_CHANNEL_DELETE_MUTATION = gql`
+    mutation PluginDataChannelDeleteMessage($pluginName: String!, $dataChannel: String!, $messageId: String!) {
+        pluginDataChannelDeleteMessage(
+        pluginName: $pluginName,
+        dataChannel: $dataChannel,
+        messageId: $messageId
+        )
+    }
+`;

bigbluebutton-html5/imports/ui/components/plugins-engine/data-channel/queries.ts

@@ -1,18 +1,5 @@
 import { gql } from '@apollo/client';
 
-const PLUGIN_DATA_CHANNEL_DISPATCH_QUERY = gql`
-  mutation DispatchPluginDataChannelMessageMsg($pluginName: String!,
-    $dataChannel: String!, $payloadJson: String!, $toRoles: [String]!, $toUserIds: [String]!) {
-    dispatchPluginDataChannelMessageMsg(
-      pluginName: $pluginName,
-      dataChannel: $dataChannel,
-      payloadJson: $payloadJson,
-      toRoles: $toRoles,
-      toUserIds: $toUserIds,
-    )
-  }
-`;
-
 const PLUGIN_DATA_CHANNEL_FETCH_QUERY = gql`
   subscription FetchPluginDataChannelMessageMsg($pluginName: String!, $channelName: String!){
     pluginDataChannelMessage(
@@ -33,4 +20,4 @@ const PLUGIN_DATA_CHANNEL_FETCH_QUERY = gql`
   }
 `;
 
-export { PLUGIN_DATA_CHANNEL_DISPATCH_QUERY, PLUGIN_DATA_CHANNEL_FETCH_QUERY };
+export default PLUGIN_DATA_CHANNEL_FETCH_QUERY;

bigbluebutton-html5/package.json

@@ -47,7 +47,7 @@
     "autoprefixer": "^10.4.4",
     "axios": "^1.6.4",
     "babel-runtime": "~6.26.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.34",
+    "bigbluebutton-html-plugin-sdk": "0.0.35",
     "bowser": "^2.11.0",
     "browser-bunyan": "^1.8.0",
     "classnames": "^2.2.6",