Client: move socketSubscribersId from store to socketHelper

packages/client/src/components/FilesSelector/index.tsx

@@ -569,12 +569,7 @@ export default inject(
     }: any,
     { isCopy, isRestoreAll, isMove, isPanelVisible, id }: any
   ) => {
-    const {
-      id: selectedId,
-      parentId,
-      rootFolderType,
-      socketSubscribersId,
-    } = selectedFolderStore;
+    const { id: selectedId, parentId, rootFolderType } = selectedFolderStore;
 
     const { setConflictDialogData, checkFileConflicts, setSelectedItems } =
       filesActionsStore;
@@ -614,6 +609,8 @@ export default inject(
 
     const { theme, socketHelper, currentDeviceType } = auth.settingsStore;
 
+    const socketSubscribesId = socketHelper.socketSubscribersId;
+
     const {
       selection,
       bufferSelection,
@@ -677,7 +674,7 @@ export default inject(
       setInfoPanelIsMobileHidden,
       includeFolder,
       socketHelper,
-      socketSubscribersId,
+      socketSubscribersId: socketSubscribesId,
       setMoveToPublicRoomVisible,
       currentDeviceType,
     };

packages/client/src/store/FilesStore.js

@@ -174,7 +174,8 @@ class FilesStore {
     const { socketHelper } = authStore.settingsStore;
 
     socketHelper.on("s:modify-folder", async (opt) => {
-      const { socketSubscribersId } = this.selectedFolderStore;
+      const { socketSubscribersId } = socketHelper;
+
       if (opt && opt.data) {
         const data = JSON.parse(opt.data);
 
@@ -224,7 +225,7 @@ class FilesStore {
     });
 
     socketHelper.on("refresh-folder", (id) => {
-      const { socketSubscribersId } = this.selectedFolderStore;
+      const { socketSubscribersId } = socketHelper;
       const pathParts = `DIR-${id}`;
 
       if (!socketSubscribersId.has(pathParts)) return;
@@ -245,7 +246,7 @@ class FilesStore {
     });
 
     socketHelper.on("s:markasnew-folder", ({ folderId, count }) => {
-      const { socketSubscribersId } = this.selectedFolderStore;
+      const { socketSubscribersId } = socketHelper;
       const pathParts = `DIR-${folderId}`;
 
       if (!socketSubscribersId.has(pathParts)) return;
@@ -263,7 +264,7 @@ class FilesStore {
     });
 
     socketHelper.on("s:markasnew-file", ({ fileId, count }) => {
-      const { socketSubscribersId } = this.selectedFolderStore;
+      const { socketSubscribersId } = socketHelper;
       const pathParts = `FILE-${fileId}`;
 
       if (!socketSubscribersId.has(pathParts)) return;
@@ -285,7 +286,7 @@ class FilesStore {
 
     //WAIT FOR RESPONSES OF EDITING FILE
     socketHelper.on("s:start-edit-file", (id) => {
-      const { socketSubscribersId } = this.selectedFolderStore;
+      const { socketSubscribersId } = socketHelper;
       const pathParts = `FILE-${id}`;
 
       if (!socketSubscribersId.has(pathParts)) return;
@@ -308,7 +309,7 @@ class FilesStore {
     });
 
     socketHelper.on("s:stop-edit-file", (id) => {
-      const { socketSubscribersId } = this.selectedFolderStore;
+      const { socketSubscribersId } = socketHelper;
       const pathParts = `FILE-${id}`;
 
       if (!socketSubscribersId.has(pathParts)) return;
@@ -870,14 +871,10 @@ class FilesStore {
 
   setFiles = (files) => {
     const { socketHelper } = this.authStore.settingsStore;
-    const { addSocketSubscribersId, deleteSocketSubscribersId } =
-      this.selectedFolderStore;
+
     if (files.length === 0 && this.files.length === 0) return;
 
     if (this.files?.length > 0) {
-      this.files.forEach((f) => {
-        deleteSocketSubscribersId(`FILE-${f.id}`);
-      });
       socketHelper.emit({
         command: "unsubscribe",
         data: {
@@ -890,10 +887,6 @@ class FilesStore {
     this.files = files;
 
     if (this.files?.length > 0) {
-      this.files.forEach((f) => {
-        addSocketSubscribersId(`FILE-${f.id}`);
-      });
-
       socketHelper.emit({
         command: "subscribe",
         data: {
@@ -911,8 +904,6 @@ class FilesStore {
   };
 
   setFolders = (folders) => {
-    const { addSocketSubscribersId, deleteSocketSubscribersId } =
-      this.selectedFolderStore;
     const { socketHelper } = this.authStore.settingsStore;
     if (folders.length === 0 && this.folders.length === 0) return;
 
@@ -933,9 +924,6 @@ class FilesStore {
     this.folders = folders;
 
     if (this.folders?.length > 0) {
-      this.folders.forEach((f) => {
-        addSocketSubscribersId(`DIR-${f.id}`);
-      });
       socketHelper.emit({
         command: "subscribe",
         data: {

packages/client/src/store/SelectedFolderStore.js

@@ -32,8 +32,6 @@ class SelectedFolderStore {
   settingsStore = null;
   security = null;
 
-  socketSubscribersId = new Set();
-
   constructor(settingsStore) {
     makeAutoObservable(this);
     this.settingsStore = settingsStore;
@@ -103,7 +101,6 @@ class SelectedFolderStore {
     this.tags = null;
     this.rootFolderId = null;
     this.security = null;
-    this.socketSubscribersId = new Set();
   };
 
   setParentId = (parentId) => {
@@ -151,14 +148,6 @@ class SelectedFolderStore {
     };
   };
 
-  addSocketSubscribersId = (path) => {
-    this.socketSubscribersId.add(path);
-  };
-
-  deleteSocketSubscribersId = (path) => {
-    this.socketSubscribersId.delete(path);
-  };
-
   setSelectedFolder = (selectedFolder) => {
     const { socketHelper } = this.settingsStore;
 
@@ -167,8 +156,6 @@ class SelectedFolderStore {
         command: "unsubscribe",
         data: { roomParts: `DIR-${this.id}`, individual: true },
       });
-
-      this.deleteSocketSubscribersId(`DIR-${this.id}`);
     }
 
     if (selectedFolder) {
@@ -176,8 +163,6 @@ class SelectedFolderStore {
         command: "subscribe",
         data: { roomParts: `DIR-${selectedFolder.id}`, individual: true },
       });
-
-      this.addSocketSubscribersId(`DIR-${selectedFolder.id}`);
     }
 
     if (!selectedFolder) {

packages/client/src/store/TreeFoldersStore.js

@@ -29,14 +29,8 @@ class TreeFoldersStore {
 
   listenTreeFolders = (treeFolders) => {
     const { socketHelper } = this.authStore.settingsStore;
-    const { addSocketSubscribersId, deleteSocketSubscribersId } =
-      this.selectedFolderStore;
 
     if (treeFolders.length > 0) {
-      treeFolders.forEach((f) => {
-        deleteSocketSubscribersId(`DIR-${f.id}`);
-      });
-
       socketHelper.emit({
         command: "unsubscribe",
         data: {
@@ -45,10 +39,6 @@ class TreeFoldersStore {
         },
       });
 
-      treeFolders.forEach((f) => {
-        addSocketSubscribersId(`DIR-${f.id}`);
-      });
-
       socketHelper.emit({
         command: "subscribe",
         data: {

packages/common/utils/socket.js

@@ -2,6 +2,7 @@ import io from "socket.io-client";
 
 let client = null;
 let callbacks = [];
+const subscribesId = new Set();
 
 class SocketIOHelper {
   socketUrl = null;
@@ -49,9 +50,28 @@ class SocketIOHelper {
     return this.socketUrl !== null;
   }
 
+  get socketSubscribersId() {
+    return subscribesId;
+  }
+
   emit = ({ command, data, room = null }) => {
     if (!this.isEnabled) return;
 
+    const ids =
+      typeof data.roomParts === "object" ? data.roomParts : [data.roomParts];
+
+    ids.forEach((id) => {
+      if (command === "subscribe") {
+        if (subscribesId.has(id)) return;
+
+        subscribesId.add(id);
+      }
+
+      if (command === "unsubscribe") {
+        subscribesId.delete(id);
+      }
+    });
+
     if (!client.connected) {
       client.on("connect", () => {
         if (room !== null) {