feat(exam): display device error information on exam page

src/components/ErrorMessage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Typography } from 'antd';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/states/store';
+
+const { Text } = Typography;
+
+const ErrorMessage: React.FC = () => {
+  const deviceError = useSelector(
+    (state: RootState) => state.device.deviceError
+  );
+
+  if (!deviceError) {
+    return null;
+  }
+
+  return <Text type="danger">{deviceError}</Text>;
+};
+
+export default ErrorMessage;

src/domain/mqttServiceForDevice.ts

@@ -92,7 +92,8 @@ const handleErrorListMessage = (message: ErrorListMessage) => {
     console.log(
       `Error CodeID: ${error.CodeID}, Level: ${error.Level}, Resource Info: ${error.Resouceinfo}`
     );
-    // Add additional handling logic here if needed
+    // Emit the new event with the error information
+    emitter.emit('DEVICE_ERROR', error);
   });
 };
 

src/pages/exam/ContentAreaLarge.tsx

@@ -10,6 +10,7 @@ import {
   message,
   Flex,
 } from 'antd';
+import ErrorMessage from '@/components/ErrorMessage';
 import { patientSizes } from '../../states/patientSize';
 import { WorkstationTypeLabels } from '../../states/workstation';
 import { FormattedMessage } from 'react-intl';
@@ -364,6 +365,7 @@ const ContentAreaLarge = () => {
             />
           </Tooltip>
         </Flex>
+        <ErrorMessage />
       </Col>
     </Row>
   );

src/states/device/deviceSlice.ts

@@ -1,14 +1,17 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import { resetAllDevices } from '../../API/exam/deviceActions';
+import emitter from '../../utils/eventEmitter';
 
 interface DeviceState {
   status: 'idle' | 'loading' | 'succeeded' | 'failed';
   error: string | null;
+  deviceError: string | null;
 }
 
 const initialState: DeviceState = {
   status: 'idle',
   error: null,
+  deviceError: null,
 };
 
 export const resetDevices = createAsyncThunk(
@@ -21,7 +24,11 @@ export const resetDevices = createAsyncThunk(
 const deviceSlice = createSlice({
   name: 'device',
   initialState,
-  reducers: {},
+  reducers: {
+    setDeviceError: (state, action) => {
+      state.deviceError = action.payload;
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(resetDevices.pending, (state) => {
@@ -37,4 +44,11 @@ const deviceSlice = createSlice({
   },
 });
 
+emitter.on('DEVICE_ERROR', (error) => {
+  deviceSlice.caseReducers.setDeviceError(deviceSlice.getInitialState(), {
+    type: 'device/setDeviceError',
+    payload: error,
+  });
+});
+
 export default deviceSlice.reducer;