feat(websocket): use lastJsonMessage istead of lastMessage

src/components/Map/MapViewer/utils/config/additionalLayers/useOlMapAdditionalLayers.ts

@@ -59,15 +59,15 @@ export const useOlMapAdditionalLayers = (
   const arrowTypes = useSelector(arrowTypesSelector);
   const pointToProjection = usePointToProjection();
 
-  const { lastMessage } = useWebSocketEntityUpdatesContext();
+  const { lastJsonMessage } = useWebSocketEntityUpdatesContext();
 
   useEffect(() => {
-    if (!lastMessage) {
+    if (!lastJsonMessage || !('entityType' in lastJsonMessage)) {
       return;
     }
 
-    processMessage({ message: lastMessage, mapInstance });
-  }, [lastMessage, mapInstance]);
+    processMessage({ jsonMessage: lastJsonMessage, mapInstance });
+  }, [lastJsonMessage, mapInstance]);
 
   const restrictionExtent: Extent = useMemo(() => {
     const restrictionMinPoint = pointToProjection({ x: 0, y: 0 });

src/components/Map/MapViewer/utils/websocket/processLayerImage.ts

 import { WebSocketEntityUpdateInterface } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.types';
 import { store } from '@/redux/store';
-import { OPERATION_TYPES } from '@/components/Map/MapViewer/utils/websocket/websocket.constants';
+import { ENTITY_OPERATION_TYPES } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.constants';
 import { getLayerImage } from '@/redux/layers/layers.thunks';
 import updateGlyph from '@/components/Map/MapViewer/utils/shapes/elements/Glyph/updateGlyph';
 import { MapInstance } from '@/types/map';
@@ -17,8 +17,8 @@ export default async function processLayerImage({
 }): Promise<void> {
   const { dispatch } = store;
   if (
-    data.type === OPERATION_TYPES.ENTITY_CREATED ||
-    data.type === OPERATION_TYPES.ENTITY_UPDATED
+    data.type === ENTITY_OPERATION_TYPES.ENTITY_CREATED ||
+    data.type === ENTITY_OPERATION_TYPES.ENTITY_UPDATED
   ) {
     const resultImage = await dispatch(
       getLayerImage({
@@ -30,7 +30,7 @@ export default async function processLayerImage({
     if (!resultImage) {
       return;
     }
-    if (data.type === OPERATION_TYPES.ENTITY_CREATED) {
+    if (data.type === ENTITY_OPERATION_TYPES.ENTITY_CREATED) {
       drawElementOnLayer({
         mapInstance,
         activeLayer: data.layerId,
@@ -40,7 +40,7 @@ export default async function processLayerImage({
     } else {
       updateGlyph(mapInstance, data.layerId, resultImage);
     }
-  } else if (data.type === OPERATION_TYPES.ENTITY_DELETED) {
+  } else if (data.type === ENTITY_OPERATION_TYPES.ENTITY_DELETED) {
     dispatch(
       layerDeleteImage({
         modelId: data.mapId,

src/components/Map/MapViewer/utils/websocket/processLayerText.ts

 import { WebSocketEntityUpdateInterface } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.types';
 import { store } from '@/redux/store';
-import { OPERATION_TYPES } from '@/components/Map/MapViewer/utils/websocket/websocket.constants';
+import { ENTITY_OPERATION_TYPES } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.constants';
 import { getLayerText } from '@/redux/layers/layers.thunks';
 import { MapInstance } from '@/types/map';
 import drawElementOnLayer from '@/components/Map/MapViewer/utils/shapes/layer/utils/drawElementOnLayer';
@@ -13,7 +13,7 @@ export default async function processLayerText({
   mapInstance: MapInstance;
 }): Promise<void> {
   const { dispatch } = store;
-  if (data.type === OPERATION_TYPES.ENTITY_CREATED) {
+  if (data.type === ENTITY_OPERATION_TYPES.ENTITY_CREATED) {
     const resultText = await dispatch(
       getLayerText({
         modelId: data.mapId,

src/components/Map/MapViewer/utils/websocket/processMessage.ts

 import { WebSocketEntityUpdateInterface } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.types';
 import processLayerImage from '@/components/Map/MapViewer/utils/websocket/processLayerImage';
 import { MapInstance } from '@/types/map';
-import { ENTITY_TYPES } from '@/components/Map/MapViewer/utils/websocket/websocket.constants';
+import { ENTITY_TYPES } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.constants';
 import processLayerText from '@/components/Map/MapViewer/utils/websocket/processLayerText';
 
 export default async function processMessage({
-  message,
+  jsonMessage,
   mapInstance,
 }: {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  message: MessageEvent<any>;
+  jsonMessage: WebSocketEntityUpdateInterface;
   mapInstance: MapInstance;
 }): Promise<void> {
   try {
-    const data = JSON.parse(message.data) as WebSocketEntityUpdateInterface;
-    if (data.entityType === ENTITY_TYPES.LAYER_IMAGE) {
-      await processLayerImage({ data, mapInstance });
-    } else if (data.entityType === ENTITY_TYPES.LAYER_TEXT) {
-      await processLayerText({ data, mapInstance });
+    if (jsonMessage.entityType === ENTITY_TYPES.LAYER_IMAGE) {
+      await processLayerImage({ data: jsonMessage, mapInstance });
+    } else if (jsonMessage.entityType === ENTITY_TYPES.LAYER_TEXT) {
+      await processLayerText({ data: jsonMessage, mapInstance });
     }
-  } catch (e) {
+  } catch {
     throw new Error(`Process websocket message error`);
   }
 }

src/utils/testing/getReduxWrapperWithStore.tsx

@@ -26,7 +26,7 @@ jest.mock('react-use-websocket', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     sendMessage: jest.fn(),
-    lastMessage: null,
+    lastJsonMessage: null,
     readyState: 1,
   })),
   ReadyState: {

src/components/Map/MapViewer/utils/websocket/websocket.constants.ts → src/utils/websocket-entity-updates/webSocketEntityUpdates.constants.ts

-export const OPERATION_TYPES = {
+export const ENTITY_OPERATION_TYPES = {
   ENTITY_CREATED: 'ENTITY_CREATED',
   ENTITY_UPDATED: 'ENTITY_UPDATED',
   ENTITY_DELETED: 'ENTITY_DELETED',
+} as const;
+
+export const ACKNOWLEDGE_OPERATION_TYPES = {
   MESSAGE_PROCESSED_SUCCESSFULLY: 'MESSAGE_PROCESSED_SUCCESSFULLY',
 } as const;
 

src/utils/websocket-entity-updates/webSocketEntityUpdates.types.ts

 import {
   ENTITY_TYPES,
-  OPERATION_TYPES,
-} from '@/components/Map/MapViewer/utils/websocket/websocket.constants';
+  ENTITY_OPERATION_TYPES,
+  ACKNOWLEDGE_OPERATION_TYPES,
+} from '@/utils/websocket-entity-updates/webSocketEntityUpdates.constants';
 
 export type EntityType = (typeof ENTITY_TYPES)[keyof typeof ENTITY_TYPES];
-export type OperationType = (typeof OPERATION_TYPES)[keyof typeof OPERATION_TYPES];
+export type EntityOperationType =
+  (typeof ENTITY_OPERATION_TYPES)[keyof typeof ENTITY_OPERATION_TYPES];
+export type AcknowledgeOperationType =
+  (typeof ACKNOWLEDGE_OPERATION_TYPES)[keyof typeof ACKNOWLEDGE_OPERATION_TYPES];
 
 export interface WebSocketEntityUpdateInterface {
   entityId: number;
@@ -13,5 +17,11 @@ export interface WebSocketEntityUpdateInterface {
   mapId: number;
   projectId: string;
   layerId: number;
-  type: OperationType;
+  type: EntityOperationType;
+}
+
+export interface WebSocketAcknowledgeInterface {
+  commandId: string | null;
+  message: string;
+  type: AcknowledgeOperationType;
 }

src/utils/websocket-entity-updates/webSocketEntityUpdatesProvider.tsx

@@ -4,11 +4,15 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { userTokenSelector } from '@/redux/user/user.selectors';
 import { projectIdSelector } from '@/redux/project/project.selectors';
 import { BASE_API_URL } from '@/constants';
-import { OPERATION_TYPES } from '@/components/Map/MapViewer/utils/websocket/websocket.constants';
+import { ACKNOWLEDGE_OPERATION_TYPES } from '@/utils/websocket-entity-updates/webSocketEntityUpdates.constants';
+import {
+  WebSocketAcknowledgeInterface,
+  WebSocketEntityUpdateInterface,
+} from '@/utils/websocket-entity-updates/webSocketEntityUpdates.types';
 
 export interface WebSocketEntityUpdatesContextInterface {
   sendMessage: (msg: string) => void;
-  lastMessage: WebSocketEventMap['message'] | null;
+  lastJsonMessage: WebSocketEntityUpdateInterface | WebSocketAcknowledgeInterface | null;
   readyState: ReadyState;
 }
 
@@ -24,7 +28,9 @@ export const WebSocketEntityUpdatesProvider: React.FC<{ children: React.ReactNod
   const userToken = useAppSelector(userTokenSelector);
   const projectId = useAppSelector(projectIdSelector);
   const [isLogged, setIsLogged] = useState(false);
-  const { lastMessage, sendMessage, readyState } = useWebSocket(SOCKET_URL, {
+  const { lastJsonMessage, sendMessage, readyState } = useWebSocket<
+    WebSocketEntityUpdateInterface | WebSocketAcknowledgeInterface
+  >(SOCKET_URL, {
     shouldReconnect: () => true,
     reconnectInterval: 5000,
     share: true,
@@ -33,7 +39,7 @@ export const WebSocketEntityUpdatesProvider: React.FC<{ children: React.ReactNod
         const data = JSON.parse(messageEvent.data);
         if (
           data.commandId === LOGIN_COMMAND_ID &&
-          data.type === OPERATION_TYPES.MESSAGE_PROCESSED_SUCCESSFULLY &&
+          data.type === ACKNOWLEDGE_OPERATION_TYPES.MESSAGE_PROCESSED_SUCCESSFULLY &&
           data.message === 'ok'
         ) {
           setIsLogged(true);
@@ -68,8 +74,8 @@ export const WebSocketEntityUpdatesProvider: React.FC<{ children: React.ReactNod
   }, [projectId, readyState, sendMessage, isLogged]);
 
   const contextValue = useMemo(
-    () => ({ sendMessage, lastMessage, readyState }),
-    [sendMessage, lastMessage, readyState],
+    () => ({ sendMessage, lastJsonMessage, readyState }),
+    [sendMessage, lastJsonMessage, readyState],
   );
 
   return (