@iobroker/adapter-react-v5 4.8.0 → 4.8.1

package/Components/JsonConfigComponent/DeviceManager/Communication.d.ts

@@ -42,7 +42,7 @@ declare class Communication<P extends CommunicationProps, S extends Communicatio
     controlHandler: (deviceId: string, control: ControlBase, state: ControlState) => () => Promise<ioBroker.State | null>;
     controlStateHandler: (deviceId: string, control: ControlBase) => () => Promise<ioBroker.State | null>;
     constructor(props: P);
-    loadData(): Promise<void>;
+    loadData(): void;
     sendActionToInstance: (command: string, messageToSend: any, refresh?: () => void) => void;
     sendControlToInstance: (command: string, messageToSend: {
         deviceId: string;

package/Components/JsonConfigComponent/DeviceManager/Communication.js

@@ -104,7 +104,7 @@ class Communication extends react_1.Component {
                         console.log('Response content', response.result);
                         if (response.result.refresh) {
                             if (response.result.refresh === true) {
-                                this.loadData().catch(console.error);
+                                this.loadData();
                                 console.log('Refreshing all');
                             }
                             else if (response.result.refresh === 'instance') {
@@ -174,7 +174,7 @@ class Communication extends react_1.Component {
     }
     // eslint-disable-next-line class-methods-use-this
     loadData() {
-        return Promise.resolve();
+        console.error('loadData not implemented');
     }
     // eslint-disable-next-line react/no-unused-class-component-methods
     loadDevices() {

package/Components/JsonConfigComponent/DeviceManager/DeviceList.d.ts

@@ -42,7 +42,7 @@ export default class DeviceList extends Communication<DeviceListProps, DeviceLis
     /**
     * Load devices
     */
-    loadData(): Promise<void>;
+    loadData(): void;
     getText(text: ioBroker.StringOrTranslated): string;
     applyFilter(): void;
     handleFilterChange(filter: string): void;

package/Components/JsonConfigComponent/DeviceManager/DeviceList.js

@@ -110,12 +110,7 @@ class DeviceList extends Communication_1.default {
             }
         }
         if (alive) {
-            try {
-                await this.loadData();
-            }
-            catch (error) {
-                console.error(error);
-            }
+            this.loadData();
         }
     }
     componentWillUnmount() {
@@ -124,14 +119,23 @@ class DeviceList extends Communication_1.default {
     /**
     * Load devices
     */
-    async loadData() {
-        this.setState({ loading: true });
-        console.log(`Loading devices for ${this.props.selectedInstance}...`);
-        const devices = await this.loadDevices();
-        if (!devices || !Array.isArray(devices)) {
-            throw new Error(`Message returned from sendTo() doesn't look like one from DeviceManagement, did you accidentally handle the message in your adapter? ${JSON.stringify(devices)}`);
-        }
-        this.setState({ devices, loading: false }, () => this.applyFilter());
+    loadData() {
+        this.setState({ loading: true }, async () => {
+            console.log(`Loading devices for ${this.props.selectedInstance}...`);
+            let devices;
+            try {
+                devices = await this.loadDevices();
+                if (!devices || !Array.isArray(devices)) {
+                    console.error(`Message returned from sendTo() doesn't look like one from DeviceManagement, did you accidentally handle the message in your adapter? ${JSON.stringify(devices)}`);
+                    devices = [];
+                }
+            }
+            catch (error) {
+                console.error(error);
+                devices = [];
+            }
+            this.setState({ devices, loading: false }, () => this.applyFilter());
+        });
     }
     getText(text) {
         if (typeof text === 'object') {
@@ -171,7 +175,7 @@ class DeviceList extends Communication_1.default {
         }
         if (this.props.embedded && this.lastInstance !== this.props.selectedInstance) {
             this.lastInstance = this.props.selectedInstance;
-            setTimeout(() => this.loadData().catch(console.error), 50);
+            setTimeout(() => this.loadData(), 50);
         }
         let list;
         if (!this.props.embedded && !this.state.alive) {
@@ -190,14 +194,18 @@ class DeviceList extends Communication_1.default {
             list = this.state.filteredDevices.map(device => react_1.default.createElement(DeviceCard_1.default, { alive: !!this.state.alive, key: device.id, id: device.id, title: this.getText(device.name), device: device, instanceId: this.props.selectedInstance, uploadImagesToInstance: this.props.uploadImagesToInstance, deviceHandler: this.deviceHandler, controlHandler: this.controlHandler, controlStateHandler: this.controlStateHandler, socket: this.props.socket }));
         }
         if (this.props.embedded) {
-            return list;
+            return react_1.default.createElement(react_1.default.Fragment, null,
+                this.state.loading ? react_1.default.createElement(material_1.LinearProgress, { style: { width: '100%' } }) : null,
+                list);
         }
         return react_1.default.createElement("div", { style: { width: '100%', height: '100%', overflow: 'hidden' } },
             react_1.default.createElement(material_1.Toolbar, { variant: "dense", style: { backgroundColor: '#777', display: 'flex' } },
                 this.props.title,
-                this.state.alive && ((_b = (_a = this.state.instanceInfo) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) ? react_1.default.createElement("div", { style: {
-                        marginLeft: 20,
-                    } }, this.state.instanceInfo.actions.map(action => react_1.default.createElement(InstanceActionButton_1.default, { key: action.id, action: action, instanceHandler: this.instanceHandler }))) : null,
+                this.props.selectedInstance ? react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('refreshTooltip') },
+                    react_1.default.createElement("span", null,
+                        react_1.default.createElement(material_1.IconButton, { onClick: () => this.loadDevices().catch(console.error), disabled: !this.state.alive, size: "small" },
+                            react_1.default.createElement(icons_material_1.Refresh, null)))) : null,
+                this.state.alive && ((_b = (_a = this.state.instanceInfo) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) ? react_1.default.createElement("div", { style: { marginLeft: 20 } }, this.state.instanceInfo.actions.map(action => react_1.default.createElement(InstanceActionButton_1.default, { key: action.id, action: action, instanceHandler: this.instanceHandler }))) : null,
                 react_1.default.createElement("div", { style: { flexGrow: 1 } }),
                 this.state.alive ? react_1.default.createElement(material_1.TextField, { variant: "standard", style: { width: 200 }, size: "small", label: (0, Utils_1.getTranslation)('filterLabelText'), onChange: e => this.handleFilterChange(e.target.value), value: this.state.filter, autoComplete: "off", inputProps: {
                         autoComplete: 'new-password',
@@ -209,7 +217,9 @@ class DeviceList extends Communication_1.default {
                             react_1.default.createElement(material_1.IconButton, { onClick: () => this.handleFilterChange(''), edge: "end" },
                                 react_1.default.createElement(icons_material_1.Clear, null))) : null,
                     } }) : null),
-            react_1.default.createElement("div", { style: Object.assign({ width: '100%', height: 'calc(100% - 56px)', marginTop: 8, overflow: 'auto' }, this.props.style) }, list));
+            react_1.default.createElement("div", { style: Object.assign({ width: '100%', height: 'calc(100% - 56px)', marginTop: 8, overflow: 'auto' }, this.props.style) },
+                this.state.loading ? react_1.default.createElement(material_1.LinearProgress, { style: { width: '100%' } }) : null,
+                list));
     }
 }
 DeviceList.i18nInitialized = false;

package/README.md

@@ -670,7 +670,7 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
 -->
 
 ## Changelog
-### 4.8.0 (2023-12-14)
+### 4.8.1 (2023-12-14)
 * (bluefox) Added Device manager to JSON Config
 
 ### 4.7.15 (2023-12-12)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -29,15 +29,15 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@iobroker/socket-client": "^2.3.12",
+    "@iobroker/socket-client": "^2.3.13",
     "@iobroker/types": "^5.0.17",
     "@iobroker/dm-utils": "^0.1.4",
     "@mui/icons-material": "^5.15.0",
     "@mui/material": "5.14.14",
     "@mui/styles": "5.14.14",
     "@mui/x-date-pickers": "^6.18.5",
-    "@sentry/browser": "^7.87.0",
-    "@sentry/integrations": "^7.87.0",
+    "@sentry/browser": "^7.88.0",
+    "@sentry/integrations": "^7.88.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",