fix(extensions): update sample code

Author: nurikk

.husky/.gitignore

@@ -1 +1 @@
-_
+_

src/actions/ExtensionApi.ts

@@ -18,6 +18,6 @@ export default {
     },
 
     saveExtensionCode: (state, extension: Extension): Promise<void> => {
-        return api.send(`bridge/extension/request/save`, extension);
+        return api.send(`bridge/request/extension/save`, extension);
     }
 }

src/components/extensions-editor/example-extension.js.txt

@@ -1,8 +1,28 @@
-class MyExampleExtension%TS% {
+class MyExampleExtension_TS_ {
     constructor(zigbee, mqtt, state, publishEntityState, eventBus, settings, logger) {
-        logger.info('Loaded  MyExampleExtension%TS%');
-        mqtt.publish('example/extension', 'hello from MyExampleExtension%TS%')
+        logger.info('Loaded  MyExampleExtension_TS_');
+        mqtt.publish('example/extension', 'hello from MyExampleExtension_TS_');
+        this.eventBus = eventBus;
+        this.mqtt = mqtt;
+        this.eventBus.on('stateChange', this.onStateChange.bind(this));
     }
+
+    async onStateChange(data) {
+        const { ID, from, to } = data;
+
+        const myRemoteIeeeAddre= '0x00124b00219fb9ee'; // change this
+        const myLampIeeAddr = '0x0017880104292f0a'; // change this
+
+        //example how to toggle state
+        if (ID === myRemoteIeeeAddre) { // state changed for myRemote (clicked a button)
+            if (to.contact_l1) { // new state
+                this.mqtt.publish(`${myLampIeeAddr}/set`, JSON.stringify({state: 'toggle'}), undefined, undefined, undefined, false);
+            }
+        }
+    }
+    // async onMQTTMessage(topic, message) {
+    //     console.log({topic, message});
+    // }
 }
 
-module.exports = MyExampleExtension%TS%;
+module.exports = MyExampleExtension_TS_;

src/components/extensions-editor/index.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "unistore/react";
 import actions from "../../actions/actions";
-import { Extension, GlobalState } from "../../store";
+import { GlobalState } from "../../store";
 
 import exampleExtensionCode from './example-extension.js.txt';
 
@@ -40,7 +40,7 @@ export class ExtensionsEditorPage extends Component<GlobalState & ExtensionApi,
         const { updateExtensionCode } = this.props;
         const ts = Date.now() + '';
         const newName = prompt("Enter new extension name", `user-extension${ts}.js`);
-        const templatedCode = exampleExtensionCode.replace(/%TS%/g, ts);
+        const templatedCode = exampleExtensionCode.replace(/_TS_/g, ts);
         if (newName !== null) {
             updateExtensionCode({ name: newName, code: templatedCode });
             this.setState({ currentExtension: newName });
@@ -49,10 +49,10 @@ export class ExtensionsEditorPage extends Component<GlobalState & ExtensionApi,
     render() {
         const { currentExtension } = this.state;
         const { extensions } = this.props;
-        const code = extensions.find(e => e.name === currentExtension)?.code;
+        const code = extensions.find(e => e.name === currentExtension)?.code ?? "";
 
-        return <div className="card">
-            <div className="card-body">
+        return <div className="card h-100">
+            <div className="card-body h-100">
                 <div className="row mb-2">
                     <div className="col-6">
                         <select value={currentExtension} className="form-control" onChange={this.loadExtension}>
@@ -61,11 +61,11 @@ export class ExtensionsEditorPage extends Component<GlobalState & ExtensionApi,
                         </select>
                     </div>
                     <div className="col-6">
-                        <Button onClick={this.addNewExtension} className="btn btn-success"><i className="fa fa-plus"></i></Button>
+                        <Button onClick={this.addNewExtension} className="btn btn-success me-2"><i className="fa fa-plus"></i></Button>
+                        <Button disabled={!currentExtension} onClick={this.onSaveClick} className="btn btn-primary">Save</Button>
                     </div>
                 </div>
-                <textarea onChange={this.onExtensionCodeChange} className="form-control mb-2" rows={10} value={code}></textarea>
-                <Button disabled={!currentExtension} onClick={this.onSaveClick} className="btn btn-primary">Save</Button>
+                <textarea spellCheck={false} onChange={this.onExtensionCodeChange} className="form-control h-100" value={code} />
             </div>
         </div>