Client:Store:SelectionPeopleStore Added multi connection and multi logout
This commit is contained in:
parent
3620d35b92
commit
0468341086
@ -25,7 +25,7 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import moment from "moment-timezone";
|
||||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useCallback } from "react";
|
||||
import { Outlet, useLocation } from "react-router-dom";
|
||||
import { useTheme } from "styled-components";
|
||||
import { inject, observer } from "mobx-react";
|
||||
@ -33,6 +33,8 @@ import { useTranslation } from "react-i18next";
|
||||
import { isMobile, isIOS, isFirefox } from "react-device-detect";
|
||||
import { toast as toastify } from "react-toastify";
|
||||
|
||||
import config from "PACKAGE_FILE";
|
||||
|
||||
import { Portal } from "@docspace/shared/components/portal";
|
||||
import { SnackBar } from "@docspace/shared/components/snackbar";
|
||||
import { Toast, toastr } from "@docspace/shared/components/toast";
|
||||
@ -43,8 +45,7 @@ import { DeviceType, IndexedDBStores } from "@docspace/shared/enums";
|
||||
import indexedDbHelper from "@docspace/shared/utils/indexedDBHelper";
|
||||
import { useThemeDetector } from "@docspace/shared/hooks/useThemeDetector";
|
||||
import { sendToastReport } from "@docspace/shared/utils/crashReport";
|
||||
|
||||
import config from "PACKAGE_FILE";
|
||||
import { PRODUCT_NAME } from "@docspace/shared/constants";
|
||||
|
||||
import Main from "./components/Main";
|
||||
import Layout from "./components/Layout";
|
||||
@ -55,7 +56,6 @@ import IndicatorLoader from "./components/IndicatorLoader";
|
||||
import ErrorBoundary from "./components/ErrorBoundaryWrapper";
|
||||
import DialogsWrapper from "./components/dialogs/DialogsWrapper";
|
||||
import useCreateFileError from "./Hooks/useCreateFileError";
|
||||
import { PRODUCT_NAME } from "@docspace/shared/constants";
|
||||
|
||||
// import ReactSmartBanner from "./components/SmartBanner";
|
||||
|
||||
@ -92,6 +92,8 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
|
||||
setDataFromSocket,
|
||||
updateDataFromSocket,
|
||||
sessisonLogout,
|
||||
setMultiConnections,
|
||||
sessisonMultiLogout,
|
||||
} = rest;
|
||||
|
||||
const theme = useTheme();
|
||||
@ -112,6 +114,23 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const moveToLastSession = useCallback((data) => {
|
||||
return data.map((item) => {
|
||||
if (item.status === "online" && item.sessions.length !== 0) {
|
||||
const {
|
||||
sessions: [first, ...ohterElement],
|
||||
...otherField
|
||||
} = item;
|
||||
|
||||
return {
|
||||
...otherField,
|
||||
sessions: [...ohterElement, first],
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
loadBaseInfo();
|
||||
@ -145,29 +164,42 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
|
||||
});
|
||||
|
||||
socketHelper.on("statuses-in-portal", (data) => {
|
||||
setDataFromSocket(data);
|
||||
console.log("dataFromSocket", data);
|
||||
const newData = moveToLastSession(data);
|
||||
|
||||
setDataFromSocket(newData);
|
||||
console.log("dataFromSocket", newData);
|
||||
});
|
||||
|
||||
socketHelper.on("enter-in-portal", (data) => {
|
||||
updateDataFromSocket(data);
|
||||
console.log("enter-in-portal", data);
|
||||
const [newData] = moveToLastSession([data]);
|
||||
|
||||
updateDataFromSocket(newData);
|
||||
console.log("enter-in-portal", newData);
|
||||
});
|
||||
|
||||
socketHelper.on("leave-in-portal", (data) => {
|
||||
sessisonLogout(data);
|
||||
// setCurrentDataFromSocket(data);
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
socketHelper.on("enter-session-in-portal", (data) => {
|
||||
setMultiConnections(data);
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
socketHelper.on("leave-session-in-portal", (data) => {
|
||||
sessisonMultiLogout(data);
|
||||
console.log(data);
|
||||
});
|
||||
}, [socketHelper, setDataFromSocket, updateDataFromSocket, sessisonLogout]);
|
||||
}, [
|
||||
socketHelper,
|
||||
setDataFromSocket,
|
||||
updateDataFromSocket,
|
||||
sessisonLogout,
|
||||
setMultiConnections,
|
||||
moveToLastSession,
|
||||
sessisonMultiLogout,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
socketHelper.emit({
|
||||
@ -495,8 +527,13 @@ const ShellWrapper = inject(
|
||||
peopleStore,
|
||||
}) => {
|
||||
const { i18n } = useTranslation();
|
||||
const { setDataFromSocket, updateDataFromSocket, sessisonLogout } =
|
||||
peopleStore.selectionStore;
|
||||
const {
|
||||
setDataFromSocket,
|
||||
updateDataFromSocket,
|
||||
sessisonLogout,
|
||||
setMultiConnections,
|
||||
sessisonMultiLogout,
|
||||
} = peopleStore.selectionStore;
|
||||
|
||||
const {
|
||||
init,
|
||||
@ -589,6 +626,8 @@ const ShellWrapper = inject(
|
||||
setDataFromSocket,
|
||||
updateDataFromSocket,
|
||||
sessisonLogout,
|
||||
setMultiConnections,
|
||||
sessisonMultiLogout,
|
||||
};
|
||||
},
|
||||
)(observer(Shell));
|
||||
|
@ -470,6 +470,10 @@ class SelectionStore {
|
||||
this.dataFromSocket = data;
|
||||
};
|
||||
|
||||
findSessionIndexByUserId = (userId) => {
|
||||
return this.dataFromSocket.findIndex((data) => data.id === userId);
|
||||
};
|
||||
|
||||
sessisonLogout = ({ userId, date }) => {
|
||||
const newData = [...this.dataFromSocket];
|
||||
|
||||
@ -487,7 +491,10 @@ class SelectionStore {
|
||||
status,
|
||||
connections: [
|
||||
...this.sessionsData[currentSesstionIndex].connections,
|
||||
{ ...this.sessionsData[currentSesstionIndex].connections[0], date },
|
||||
{
|
||||
...this.sessionsData[currentSesstionIndex].connections.at(-1),
|
||||
date,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@ -499,13 +506,55 @@ class SelectionStore {
|
||||
status,
|
||||
sessions: [
|
||||
...newData[index].sessions,
|
||||
{ ...newData[index].sessions[0], date },
|
||||
{ ...newData[index].sessions.at(-1), date },
|
||||
],
|
||||
};
|
||||
|
||||
this.setDataFromSocket(newData);
|
||||
};
|
||||
|
||||
setMultiConnections = ({ session, userId }) => {
|
||||
const index = this.findSessionIndexByUserId(userId);
|
||||
this.dataFromSocket[index].sessions = [
|
||||
...this.dataFromSocket[index].sessions,
|
||||
session,
|
||||
];
|
||||
};
|
||||
|
||||
sessisonMultiLogout = ({ sessionId, userId, date }) => {
|
||||
const index = this.findSessionIndexByUserId(userId);
|
||||
|
||||
if (index === -1) return;
|
||||
|
||||
const sessionIndex = this.dataFromSocket[index].sessions.findIndex(
|
||||
(item) => item.id === sessionId,
|
||||
);
|
||||
|
||||
if (sessionIndex === -1) return;
|
||||
|
||||
const [deletElement] = this.dataFromSocket[index].sessions.splice(
|
||||
sessionIndex,
|
||||
1,
|
||||
);
|
||||
|
||||
const sessionsLength = this.dataFromSocket[index].sessions.length;
|
||||
const countActiveSession =
|
||||
this.dataFromSocket[index].sessions.filter(
|
||||
(item) => item.status !== "offline",
|
||||
).length ?? 0;
|
||||
|
||||
const addedIndex =
|
||||
sessionsLength >= countActiveSession
|
||||
? sessionsLength - countActiveSession
|
||||
: 0;
|
||||
|
||||
this.dataFromSocket[index].sessions.splice(addedIndex, 0, {
|
||||
...deletElement,
|
||||
date,
|
||||
status: "offline",
|
||||
});
|
||||
};
|
||||
|
||||
updateDataFromSocket = (data) => {
|
||||
const newArr = [...this.dataFromSocket];
|
||||
const indexTest = newArr.findIndex(({ id }) => id === data.id);
|
||||
@ -522,7 +571,7 @@ class SelectionStore {
|
||||
}
|
||||
|
||||
if (indexTest === -1) {
|
||||
this.dataFromSocket = [data, ...this.dataFromSocket];
|
||||
this.dataFromSocket = [...this.dataFromSocket, data];
|
||||
return;
|
||||
}
|
||||
|
||||
@ -584,12 +633,9 @@ class SelectionStore {
|
||||
const isCurrentSesstion = session.id === data?.id;
|
||||
const connectionsIsEmpty = session.connections.length === 0;
|
||||
|
||||
const firstIndex = 0;
|
||||
const lastIndex = -1;
|
||||
const isOnline = session.status === "online";
|
||||
|
||||
const index = isOnline ? firstIndex : lastIndex;
|
||||
const sessionData = data?.sessions.at(index);
|
||||
const sessionData = data?.sessions.at(lastIndex);
|
||||
|
||||
if (isCurrentSesstion) return [{ ...first, ...sessionData }, ...other];
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user