Convert React to TypeScript

Author: GermanBluefox

package.json

@@ -90,7 +90,7 @@
         "test": "npm run test:declarations && npm run test:javascript",
         "translate": "translate-adapter",
         "//postinstall": "node ./install/installTypings.js",
-        "build": "node tasks",
+        "build": "node tasks && npm run tsc-backend",
         "tsc-backend": "tsc -p tsconfig.build.json",
         "release": "release-script --noPush -y --all",
         "update-packages": "ncu --upgrade && cd src && ncu --upgrade && cd ../src-admin && ncu --upgrade",

src-editor/package.json

@@ -44,7 +44,8 @@
     "scripts": {
         "start": "craco start",
         "lint": "eslint -c eslint.config.mjs",
-        "build": "craco build"
+        "build": "craco build",
+        "tsc": "tsc -p tsconfig.json"
     },
     "eslintConfig": {
         "extends": "react-app"
@@ -55,4 +56,4 @@
         "not ie <= 11",
         "not op_mini all"
     ]
-}
+}

src-editor/src/Components/RulesEditor/components/Blocks/TriggerSchedule.jsx

@@ -6,7 +6,7 @@ import {
     Schedule,
     I18n,
 } from '@iobroker/adapter-react-v5';
-import convertCronToText from '@iobroker/adapter-react-v5/Components/SimpleCron/cronText';
+import convertCronToText from '@iobroker/adapter-react-v5/build/Components/SimpleCron/cronText';
 
 import GenericBlock from '../GenericBlock';
 import Compile from '../../helpers/Compile';

src-editor/src/Components/RulesEditor/components/GenericBlock/index.jsx

@@ -8,8 +8,8 @@ import {
 } from '@mui/material';
 import { HelpOutline as IconHelp } from '@mui/icons-material';
 
-import { getSelectIdIcon } from '@iobroker/adapter-react-v5/Components/Icon';
 import {
+    getSelectIdIcon,
     I18n, Utils,
     SelectID as DialogSelectID,
     Error as DialogError,

src-editor/src/Components/RulesEditor/index.jsx

@@ -160,25 +160,21 @@ const RulesEditor = ({
                 allBlocks={allBlocks}
                 socket={socket}
             />
-            {importExport === 'export' ? (
+            {modal ? (importExport === 'export' ? (
                 <DialogExport
-                    key="dialogExport"
                     onClose={() => setModal(false)}
-                    open={modal}
                     text={JSON.stringify(userRules, null, 2)}
                 />
             ) : (
                 <DialogImport
-                    open={modal}
-                    key="dialogImport"
                     onClose={text => {
                         setModal(false);
                         if (text) {
                             onChangeBlocks(JSON.parse(text));
                         }
                     }}
                 />
-            )}
+            )) : null}
             {
                 <div className={Utils.clsx(cls.rootWrapper, addClass[835] && cls.addClass)}>
                     <Menu

src-editor/src/Dialogs/AdapterDebug.jsx renamed to src-editor/src/Dialogs/AdapterDebug.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {
     Button,
@@ -9,19 +8,19 @@ import {
     Dialog,
     ListItemIcon,
     List,
-    ListItem,
     Grid2,
     ListItemText,
     Input,
     InputAdornment,
     IconButton,
+    ListItemButton,
 } from '@mui/material';
 
 import { Check as IconOk, Cancel as IconCancel, Close as IconClose } from '@mui/icons-material';
 
-import { I18n } from '@iobroker/adapter-react-v5';
+import { type AdminConnection, I18n } from '@iobroker/adapter-react-v5';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
     buttonIcon: {
         marginRight: 8,
     },
@@ -41,8 +40,28 @@ const styles = {
     },
 };
 
-class DialogAdapterDebug extends React.Component {
-    constructor(props) {
+interface DialogAdapterDebugProps {
+    socket: AdminConnection;
+    onDebug: (instance: string, adapterToDebug: string) => void;
+    onClose: () => void;
+    title?: string;
+}
+interface DialogAdapterDebugState {
+    instances: {
+        id: string;
+        enabled: boolean;
+        host: string;
+        icon: string;
+    }[];
+    jsInstance: string;
+    filter: string;
+    showAskForStop: boolean;
+    jsInstanceHost: string;
+    adapterToDebug: string;
+}
+
+class DialogAdapterDebug extends React.Component<DialogAdapterDebugProps, DialogAdapterDebugState> {
+    constructor(props: DialogAdapterDebugProps) {
         super(props);
         this.state = {
             instances: [],
@@ -54,9 +73,14 @@ class DialogAdapterDebug extends React.Component {
         };
     }
 
-    componentDidMount() {
-        this.props.socket.getAdapterInstances().then(instances => {
-            instances = instances
+    componentDidMount(): void {
+        void this.props.socket.getAdapterInstances().then(oInstances => {
+            const instances: {
+                id: string;
+                enabled: boolean;
+                host: string;
+                icon: string;
+            }[] = oInstances
                 .filter(i => i && !i.common?.onlyWWW)
                 .map(item => {
                     const name = item._id.replace(/^system\.adapter\./, '');
@@ -69,17 +93,19 @@ class DialogAdapterDebug extends React.Component {
                     };
                 });
             instances.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
-            let jsInstance = this.state.jsInstance || '';
-            let jsInstanceObj = this.state.jsInstance && instances.find(item => item.id === this.state.jsInstance);
-            let jsInstanceHost;
+            let jsInstance: string = this.state.jsInstance || '';
+            const jsInstanceObj = this.state.jsInstance
+                ? instances.find(item => item.id === this.state.jsInstance)
+                : null;
+            let jsInstanceHost: string;
 
             // check if selected instance is in the list
             if (!this.state.jsInstance || !jsInstanceObj) {
-                jsInstance = instances.find(item => item.id.startsWith('javascript.')); // take the first one
-                jsInstanceHost = jsInstance ? jsInstance.host : '';
-                jsInstance = jsInstance ? jsInstance.id : '';
+                const oJsInstance = instances.find(item => item.id.startsWith('javascript.')); // take the first one
+                jsInstanceHost = oJsInstance?.host || '';
+                jsInstance = oJsInstance?.id || '';
             } else {
-                jsInstanceHost = jsInstanceObj ? jsInstanceObj.host : '';
+                jsInstanceHost = jsInstanceObj?.host || '';
             }
 
             let adapterToDebug = this.state.adapterToDebug || '';
@@ -91,21 +117,23 @@ class DialogAdapterDebug extends React.Component {
         });
     }
 
-    handleOk = () => {
+    handleOk = (): void => {
         // TODO
-        if (this.state.instances.find(item => item.id === this.state.adapterToDebug).enabled) {
-            return this.props.socket.getObject(`system.adapter.${this.state.adapterToDebug}`).then(obj => {
-                obj.common.enabled = false;
-                this.props.socket
-                    .setObject(obj._id, obj)
-                    .then(() => this.props.onDebug(this.state.jsInstance, this.state.adapterToDebug));
+        if (this.state.instances.find(item => item.id === this.state.adapterToDebug)?.enabled) {
+            void this.props.socket.getObject(`system.adapter.${this.state.adapterToDebug}`).then(obj => {
+                if (obj) {
+                    obj.common.enabled = false;
+                    void this.props.socket
+                        .setObject(obj._id, obj)
+                        .then(() => this.props.onDebug(this.state.jsInstance, this.state.adapterToDebug));
+                }
             });
-        } else {
-            this.props.onDebug(this.state.jsInstance, this.state.adapterToDebug);
+            return;
         }
+        this.props.onDebug(this.state.jsInstance, this.state.adapterToDebug);
     };
 
-    renderJavascriptList() {
+    renderJavascriptList(): React.JSX.Element | null {
         const js = this.state.instances.filter(item => item.id.startsWith('javascript.'));
         if (js.length < 2) {
             return null;
@@ -115,8 +143,9 @@ class DialogAdapterDebug extends React.Component {
                 <div style={styles.title}>{I18n.t('Host')}</div>
                 <List component="nav">
                     {js.map(item => (
-                        <ListItem
-                            button
+                        <ListItemButton
+                            component="div"
+                            key={item.id}
                             selected={this.state.jsInstance === item.id}
                             onClick={() => this.setState({ jsInstance: item.id, jsInstanceHost: item.host })}
                         >
@@ -128,14 +157,14 @@ class DialogAdapterDebug extends React.Component {
                                 />
                             </ListItemIcon>
                             <ListItemText primary={item.id} />
-                        </ListItem>
+                        </ListItemButton>
                     ))}
                 </List>
             </Grid2>
         );
     }
 
-    renderInstances() {
+    renderInstances(): React.JSX.Element {
         if (!this.state.jsInstance) {
             return <Grid2 />;
         }
@@ -151,8 +180,8 @@ class DialogAdapterDebug extends React.Component {
                 <div style={styles.title}>{I18n.t('Instances')}</div>
                 <List component="nav">
                     {instances.map(item => (
-                        <ListItem
-                            button
+                        <ListItemButton
+                            key={item.id}
                             selected={this.state.adapterToDebug === item.id}
                             onDoubleClick={() => this.setState({ adapterToDebug: item.id }, () => this.handleOk())}
                             onClick={() => this.setState({ adapterToDebug: item.id })}
@@ -165,14 +194,14 @@ class DialogAdapterDebug extends React.Component {
                                 />
                             </ListItemIcon>
                             <ListItemText primary={item.id} />
-                        </ListItem>
+                        </ListItemButton>
                     ))}
                 </List>
             </Grid2>
         );
     }
 
-    render() {
+    render(): React.JSX.Element {
         return (
             <Dialog
                 maxWidth="md"
@@ -245,10 +274,4 @@ class DialogAdapterDebug extends React.Component {
     }
 }
 
-DialogAdapterDebug.propTypes = {
-    socket: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onDebug: PropTypes.func.isRequired,
-};
-
 export default DialogAdapterDebug;