improvement: use patched subscriptions for both user list and current user data

bigbluebutton-html5/imports/ui/components/plugins-engine/data-consumption/domain/users/loaded-user-list/hook-manager.tsx

@@ -7,11 +7,11 @@ import {
 import { DataConsumptionHooks } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-consumption/enums';
 import { UpdatedEventDetails } from 'bigbluebutton-html-plugin-sdk/dist/cjs/core/types';
 import formatLoadedUserListDataFromGraphql from './utils';
-import { useLoadedUserList } from '/imports/ui/core/hooks/useLoadedUserList';
+import { useLocalUserList } from '/imports/ui/core/hooks/useLoadedUserList';
 
 const LoadedUserListHookContainer = () => {
   const [sendSignal, setSendSignal] = useState(false);
-  const [usersData] = useLoadedUserList((user: Partial<User>) => ({
+  const [usersData] = useLocalUserList((user: Partial<User>) => ({
     userId: user.userId,
     name: user.name,
     role: user.role,

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/component.tsx

@@ -24,8 +24,8 @@ import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
 import { layoutSelect } from '/imports/ui/components/layout/context';
 import { Layout } from '/imports/ui/components/layout/layoutTypes';
 import Service from '/imports/ui/components/user-list/service';
-import { USER_LIST_SUBSCRIPTION } from '/imports/ui/core/graphql/queries/users';
-import { setLoadedUserList } from '/imports/ui/core/hooks/useLoadedUserList';
+import { setLocalUserList, useLoadedUserList } from '/imports/ui/core/hooks/useLoadedUserList';
+import { GraphqlDataHookSubscriptionResponse } from '/imports/ui/Types/hook';
 
 interface UserListParticipantsProps {
   users: Array<User>;
@@ -206,21 +206,14 @@ const UserListParticipantsContainer: React.FC = () => {
   } = useSubscription(USER_AGGREGATE_COUNT_SUBSCRIPTION);
   const count = countData?.user_aggregate?.aggregate?.count || 0;
 
-  useEffect(() => {
-    return () => {
-      setLoadedUserList([]);
-    };
+  useEffect(() => () => {
+    setLocalUserList([]);
   }, []);
 
   const {
     data: usersData,
-  } = useSubscription(USER_LIST_SUBSCRIPTION, {
-    variables: {
-      offset,
-      limit,
-    },
-  });
-  const { user: users } = (usersData || {});
+  } = useLoadedUserList({ offset, limit }, (u) => u) as GraphqlDataHookSubscriptionResponse<Array<User>>;
+  const users = usersData ?? [];
 
   const { data: currentUser } = useCurrentUser((c: Partial<User>) => ({
     isModerator: c.isModerator,
@@ -232,7 +225,7 @@ const UserListParticipantsContainer: React.FC = () => {
   const presentationPage = presentationData?.pres_page_curr[0] || {};
   const pageId = presentationPage?.pageId;
 
-  setLoadedUserList(users);
+  setLocalUserList(users);
   return (
     <>
       <UserListParticipants

bigbluebutton-html5/imports/ui/core/hooks/createUseSubscription.ts

@@ -4,7 +4,7 @@ import {
 } from 'react';
 import { gql, useApolloClient } from '@apollo/client';
 import R from 'ramda';
-import { applyPatch } from 'fast-json-patch';
+import { applyPatch, deepClone } from 'fast-json-patch';
 import { GraphqlDataHookSubscriptionResponse } from '../../Types/hook';
 
 function createUseSubscription<T>(
@@ -55,7 +55,7 @@ function createUseSubscription<T>(
             const { data } = response;
             let currentData: T[] = [];
             if (usePatchedSubscription && data.patch) {
-              const patchedData = applyPatch(dataRef.current, data.patch).newDocument;
+              const patchedData = applyPatch(deepClone(dataRef.current), data.patch).newDocument;
               currentData = [...patchedData];
             } else {
               const resultSetKey = Object.keys(data)[0];

bigbluebutton-html5/imports/ui/core/hooks/useCurrentUser.ts

@@ -2,7 +2,7 @@ import createUseSubscription from './createUseSubscription';
 import CURRENT_USER_SUBSCRIPTION from '../graphql/queries/currentUserSubscription';
 import { User } from '../../Types/user';
 
-const useCurrentUserSubscription = createUseSubscription<User>(CURRENT_USER_SUBSCRIPTION);
+const useCurrentUserSubscription = createUseSubscription<User>(CURRENT_USER_SUBSCRIPTION, {}, true);
 
 const useCurrentUser = (fn: (c: Partial<User>) => Partial<User>) => {
   const response = useCurrentUserSubscription(fn);

bigbluebutton-html5/imports/ui/core/hooks/useLoadedUserList.ts

@@ -1,8 +1,10 @@
 import { makeVar, useReactiveVar } from '@apollo/client';
 import { isEqual } from 'radash';
 import { User } from '../../Types/user';
+import { useCreateUseSubscription } from './createUseSubscription';
+import { USER_LIST_SUBSCRIPTION } from '../graphql/queries/users';
 
-const createLoadedUserListDataGathering = (): [
+const createLocalUserListDataGathering = (): [
   (fn: (c: Partial<User>) => Partial<User>) => [
     Partial<User>[],
     (result: Partial<User>[]) => void,
@@ -11,7 +13,7 @@ const createLoadedUserListDataGathering = (): [
 ] => {
   const loadedUserList = makeVar<Partial<User>[]>([]);
 
-  const setLoadedUserList = (result: Partial<User>[]): void => {
+  const setLocalUserList = (result: Partial<User>[]): void => {
     const gatheredUserList = loadedUserList();
     const hasUsers = gatheredUserList && gatheredUserList.length > 0;
     const shouldAdd = !hasUsers || !isEqual(gatheredUserList, result);
@@ -24,18 +26,41 @@ const createLoadedUserListDataGathering = (): [
     }
   };
 
-  const useLoadedUserList = (fn: ((c: Partial<User>) => Partial<User>)): [
+  const useLocalUserList = (fn: ((c: Partial<User>) => Partial<User>)): [
     Partial<User>[],
     (result: Partial<User>[]) => void,
   ] => {
     const gatheredLoadedUserList = useReactiveVar(loadedUserList);
     const loadedUserListData = Object.values(gatheredLoadedUserList).filter((i) => Array.isArray(i)).flat();
-    return [loadedUserListData.map(fn), setLoadedUserList];
+    return [loadedUserListData.map(fn), setLocalUserList];
   };
 
-  return [useLoadedUserList, setLoadedUserList];
+  return [useLocalUserList, setLocalUserList];
 };
 
-const [useLoadedUserList, setLoadedUserList] = createLoadedUserListDataGathering();
+const useLoadedUserList = (
+  variables: { offset: number, limit: number },
+  fn: (c: Partial<User>) => Partial<User>,
+) => {
+  const useLoadedUserListSubscription = useCreateUseSubscription<User>(
+    USER_LIST_SUBSCRIPTION,
+    variables,
+    true,
+  );
+  const loadedUserList = useLoadedUserListSubscription(fn);
+  return loadedUserList;
+};
+
+const [useLocalUserList, setLocalUserList] = createLocalUserListDataGathering();
 
-export { useLoadedUserList, setLoadedUserList };
+export {
+  useLoadedUserList,
+  useLocalUserList,
+  setLocalUserList,
+};
+
+export default {
+  useLoadedUserList,
+  useLocalUserList,
+  setLocalUserList,
+};