Merge pull request #58 from ONLYOFFICE/feature/socket-refactoring
Client: move socketSubscribersId from store to socketHelper
This commit is contained in:
commit
dad9313312
@ -50,7 +50,7 @@ export type setTotalCallback = (value: number) => number;
|
||||
|
||||
export type useSocketHelperProps = {
|
||||
socketHelper: any;
|
||||
socketSubscribersId: Set<string>;
|
||||
socketSubscribers: Set<string>;
|
||||
setItems: (callback: setItemsCallback) => void;
|
||||
setBreadCrumbs: (callback: setBreadCrumbsCallback) => void;
|
||||
setTotal: (callback: setTotalCallback) => void;
|
||||
@ -204,7 +204,7 @@ export type FilesSelectorProps = {
|
||||
includeFolder?: boolean;
|
||||
|
||||
socketHelper: any;
|
||||
socketSubscribersId: Set<string>;
|
||||
socketSubscribers: Set<string>;
|
||||
currentDeviceType: "mobile" | "tablet" | "desktop";
|
||||
|
||||
embedded: boolean;
|
||||
|
@ -11,7 +11,7 @@ import { convertRoomsToItems } from "./useRoomsHelper";
|
||||
|
||||
const useSocketHelper = ({
|
||||
socketHelper,
|
||||
socketSubscribersId,
|
||||
socketSubscribers,
|
||||
setItems,
|
||||
setBreadCrumbs,
|
||||
setTotal,
|
||||
@ -23,9 +23,9 @@ const useSocketHelper = ({
|
||||
const subscribe = (id: number) => {
|
||||
const roomParts = `DIR-${id}`;
|
||||
|
||||
if (socketSubscribersId.has(roomParts)) return (subscribedId.current = id);
|
||||
if (socketSubscribers.has(roomParts)) return (subscribedId.current = id);
|
||||
|
||||
if (subscribedId.current && !socketSubscribersId.has(roomParts)) {
|
||||
if (subscribedId.current && !socketSubscribers.has(roomParts)) {
|
||||
unsubscribe(subscribedId.current, false);
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@ const useSocketHelper = ({
|
||||
subscribedId.current = null;
|
||||
}
|
||||
|
||||
if (id && !socketSubscribersId.has(`DIR-${id}`)) {
|
||||
if (id && !socketSubscribers.has(`DIR-${id}`)) {
|
||||
socketHelper.emit({
|
||||
command: "unsubscribe",
|
||||
data: {
|
||||
|
@ -91,7 +91,7 @@ const FilesSelector = ({
|
||||
includeFolder,
|
||||
|
||||
socketHelper,
|
||||
socketSubscribersId,
|
||||
socketSubscribers,
|
||||
setMoveToPublicRoomVisible,
|
||||
setInfoPanelIsMobileHidden,
|
||||
currentDeviceType,
|
||||
@ -129,7 +129,7 @@ const FilesSelector = ({
|
||||
|
||||
const { subscribe, unsubscribe } = useSocketHelper({
|
||||
socketHelper,
|
||||
socketSubscribersId,
|
||||
socketSubscribers,
|
||||
setItems,
|
||||
setBreadCrumbs,
|
||||
setTotal,
|
||||
@ -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.socketSubscribers;
|
||||
|
||||
const {
|
||||
selection,
|
||||
bufferSelection,
|
||||
@ -677,7 +674,7 @@ export default inject(
|
||||
setInfoPanelIsMobileHidden,
|
||||
includeFolder,
|
||||
socketHelper,
|
||||
socketSubscribersId,
|
||||
socketSubscribers: socketSubscribesId,
|
||||
setMoveToPublicRoomVisible,
|
||||
currentDeviceType,
|
||||
};
|
||||
|
@ -174,7 +174,8 @@ class FilesStore {
|
||||
const { socketHelper } = authStore.settingsStore;
|
||||
|
||||
socketHelper.on("s:modify-folder", async (opt) => {
|
||||
const { socketSubscribersId } = this.selectedFolderStore;
|
||||
const { socketSubscribers } = socketHelper;
|
||||
|
||||
if (opt && opt.data) {
|
||||
const data = JSON.parse(opt.data);
|
||||
|
||||
@ -183,8 +184,8 @@ class FilesStore {
|
||||
: `DIR-${data.parentId}`;
|
||||
|
||||
if (
|
||||
!socketSubscribersId.has(pathParts) &&
|
||||
!socketSubscribersId.has(`DIR-${data.id}`)
|
||||
!socketSubscribers.has(pathParts) &&
|
||||
!socketSubscribers.has(`DIR-${data.id}`)
|
||||
)
|
||||
return;
|
||||
}
|
||||
@ -224,10 +225,10 @@ class FilesStore {
|
||||
});
|
||||
|
||||
socketHelper.on("refresh-folder", (id) => {
|
||||
const { socketSubscribersId } = this.selectedFolderStore;
|
||||
const { socketSubscribers } = socketHelper;
|
||||
const pathParts = `DIR-${id}`;
|
||||
|
||||
if (!socketSubscribersId.has(pathParts)) return;
|
||||
if (!socketSubscribers.has(pathParts)) return;
|
||||
|
||||
if (!id || this.clientLoadingStore.isLoading) return;
|
||||
|
||||
@ -245,10 +246,10 @@ class FilesStore {
|
||||
});
|
||||
|
||||
socketHelper.on("s:markasnew-folder", ({ folderId, count }) => {
|
||||
const { socketSubscribersId } = this.selectedFolderStore;
|
||||
const { socketSubscribers } = socketHelper;
|
||||
const pathParts = `DIR-${folderId}`;
|
||||
|
||||
if (!socketSubscribersId.has(pathParts)) return;
|
||||
if (!socketSubscribers.has(pathParts)) return;
|
||||
|
||||
console.log(`[WS] markasnew-folder ${folderId}:${count}`);
|
||||
|
||||
@ -263,10 +264,10 @@ class FilesStore {
|
||||
});
|
||||
|
||||
socketHelper.on("s:markasnew-file", ({ fileId, count }) => {
|
||||
const { socketSubscribersId } = this.selectedFolderStore;
|
||||
const { socketSubscribers } = socketHelper;
|
||||
const pathParts = `FILE-${fileId}`;
|
||||
|
||||
if (!socketSubscribersId.has(pathParts)) return;
|
||||
if (!socketSubscribers.has(pathParts)) return;
|
||||
|
||||
console.log(`[WS] markasnew-file ${fileId}:${count}`);
|
||||
|
||||
@ -285,10 +286,10 @@ class FilesStore {
|
||||
|
||||
//WAIT FOR RESPONSES OF EDITING FILE
|
||||
socketHelper.on("s:start-edit-file", (id) => {
|
||||
const { socketSubscribersId } = this.selectedFolderStore;
|
||||
const { socketSubscribers } = socketHelper;
|
||||
const pathParts = `FILE-${id}`;
|
||||
|
||||
if (!socketSubscribersId.has(pathParts)) return;
|
||||
if (!socketSubscribers.has(pathParts)) return;
|
||||
|
||||
const foundIndex = this.files.findIndex((x) => x.id === id);
|
||||
if (foundIndex == -1) return;
|
||||
@ -308,10 +309,10 @@ class FilesStore {
|
||||
});
|
||||
|
||||
socketHelper.on("s:stop-edit-file", (id) => {
|
||||
const { socketSubscribersId } = this.selectedFolderStore;
|
||||
const { socketSubscribers } = socketHelper;
|
||||
const pathParts = `FILE-${id}`;
|
||||
|
||||
if (!socketSubscribersId.has(pathParts)) return;
|
||||
if (!socketSubscribers.has(pathParts)) return;
|
||||
|
||||
const foundIndex = this.files.findIndex((x) => x.id === id);
|
||||
if (foundIndex == -1) 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,16 +904,10 @@ class FilesStore {
|
||||
};
|
||||
|
||||
setFolders = (folders) => {
|
||||
const { addSocketSubscribersId, deleteSocketSubscribersId } =
|
||||
this.selectedFolderStore;
|
||||
const { socketHelper } = this.authStore.settingsStore;
|
||||
if (folders.length === 0 && this.folders.length === 0) return;
|
||||
|
||||
if (this.folders?.length > 0) {
|
||||
this.folders.forEach((f) => {
|
||||
deleteSocketSubscribersId(`DIR-${f.id}`);
|
||||
});
|
||||
|
||||
socketHelper.emit({
|
||||
command: "unsubscribe",
|
||||
data: {
|
||||
@ -933,9 +920,6 @@ class FilesStore {
|
||||
this.folders = folders;
|
||||
|
||||
if (this.folders?.length > 0) {
|
||||
this.folders.forEach((f) => {
|
||||
addSocketSubscribersId(`DIR-${f.id}`);
|
||||
});
|
||||
socketHelper.emit({
|
||||
command: "subscribe",
|
||||
data: {
|
||||
|
@ -33,8 +33,6 @@ class SelectedFolderStore {
|
||||
security = null;
|
||||
inRoom = true;
|
||||
|
||||
socketSubscribersId = new Set();
|
||||
|
||||
constructor(settingsStore) {
|
||||
makeAutoObservable(this);
|
||||
this.settingsStore = settingsStore;
|
||||
@ -106,7 +104,6 @@ class SelectedFolderStore {
|
||||
this.rootFolderId = null;
|
||||
this.security = null;
|
||||
this.inRoom = true;
|
||||
this.socketSubscribersId = new Set();
|
||||
};
|
||||
|
||||
setParentId = (parentId) => {
|
||||
@ -154,14 +151,6 @@ class SelectedFolderStore {
|
||||
};
|
||||
};
|
||||
|
||||
addSocketSubscribersId = (path) => {
|
||||
this.socketSubscribersId.add(path);
|
||||
};
|
||||
|
||||
deleteSocketSubscribersId = (path) => {
|
||||
this.socketSubscribersId.delete(path);
|
||||
};
|
||||
|
||||
setSelectedFolder = (selectedFolder) => {
|
||||
const { socketHelper } = this.settingsStore;
|
||||
|
||||
@ -170,8 +159,6 @@ class SelectedFolderStore {
|
||||
command: "unsubscribe",
|
||||
data: { roomParts: `DIR-${this.id}`, individual: true },
|
||||
});
|
||||
|
||||
this.deleteSocketSubscribersId(`DIR-${this.id}`);
|
||||
}
|
||||
|
||||
if (selectedFolder) {
|
||||
@ -179,8 +166,6 @@ class SelectedFolderStore {
|
||||
command: "subscribe",
|
||||
data: { roomParts: `DIR-${selectedFolder.id}`, individual: true },
|
||||
});
|
||||
|
||||
this.addSocketSubscribersId(`DIR-${selectedFolder.id}`);
|
||||
}
|
||||
|
||||
if (!selectedFolder) {
|
||||
|
@ -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: {
|
||||
|
@ -2,6 +2,7 @@ import io from "socket.io-client";
|
||||
|
||||
let client = null;
|
||||
let callbacks = [];
|
||||
const subscribers = new Set();
|
||||
|
||||
class SocketIOHelper {
|
||||
socketUrl = null;
|
||||
@ -49,9 +50,28 @@ class SocketIOHelper {
|
||||
return this.socketUrl !== null;
|
||||
}
|
||||
|
||||
get socketSubscribers() {
|
||||
return subscribers;
|
||||
}
|
||||
|
||||
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 (subscribers.has(id)) return;
|
||||
|
||||
subscribers.add(id);
|
||||
}
|
||||
|
||||
if (command === "unsubscribe") {
|
||||
subscribers.delete(id);
|
||||
}
|
||||
});
|
||||
|
||||
if (!client.connected) {
|
||||
client.on("connect", () => {
|
||||
if (room !== null) {
|
||||
|
Loading…
Reference in New Issue
Block a user