update event handler function

Author: toddtreece

src/ConfigEditor.tsx

@@ -1,50 +1,35 @@
-import React, { useState, useEffect } from 'react';
+import React, { ChangeEvent } from 'react';
 import { Form, Field, FieldSet, Input } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { MqttDataSourceOptions, MqttSecureJsonData } from './types';
-import { handleEvent } from './handleEvent';
+import { handlerFactory } from './handleEvent';
 
 interface Props extends DataSourcePluginOptionsEditorProps<MqttDataSourceOptions> {}
 
 export const ConfigEditor = (props: Props) => {
   const {
-    options,
-    options: { jsonData, secureJsonFields, secureJsonData },
     onOptionsChange,
+    options,
+    options: { jsonData, secureJsonData },
   } = props;
-  const secureData = (secureJsonData ?? {}) as MqttSecureJsonData;
-  const [host, setHost] = useState(jsonData.host ?? 'localhost');
-  const [port, setPort] = useState<number>(jsonData.port ?? 1883);
-  const [username, setUsername] = useState(jsonData.username ?? '');
-  const [password, setPassword] = useState(secureData.password ?? '');
-
-  useEffect(() => {
-    onOptionsChange({
-      ...options,
-      jsonData: {
-        ...jsonData,
-        host,
-        port,
-        username,
-      },
-      secureJsonData: {
-        ...secureData,
-        password,
-      },
-      secureJsonFields: {
-        ...secureJsonFields,
-        password: Boolean(password),
-      },
-    });
-  }, [host, port, username, password]);
+  const { host, port, username } = jsonData;
+  const { password } = (secureJsonData ?? {}) as MqttSecureJsonData;
+  const handleChange = handlerFactory(options, onOptionsChange);
 
   return (
     <Form onSubmit={() => {}}>
       {() => (
         <>
           <FieldSet label="Connection">
             <Field label="Host">
-              <Input name="host" required value={host} css="" autoComplete="off" onChange={handleEvent(setHost)} />
+              <Input
+                name="host"
+                required
+                value={host}
+                css=""
+                autoComplete="off"
+                onChange={handleChange('jsonData.host')}
+              />
             </Field>
             <Field label="Port">
               <Input
@@ -54,14 +39,20 @@ export const ConfigEditor = (props: Props) => {
                 value={port}
                 css=""
                 autoComplete="off"
-                onChange={handleEvent(Number, setPort)}
+                onChange={handleChange('jsonData.port', Number)}
               />
             </Field>
           </FieldSet>
 
           <FieldSet label="Authentication">
             <Field label="Username">
-              <Input name="username" value={username} css="" autoComplete="off" onChange={handleEvent(setUsername)} />
+              <Input
+                name="username"
+                value={username}
+                css=""
+                autoComplete="off"
+                onChange={handleChange('jsonData.username')}
+              />
             </Field>
             <Field label="Password">
               <Input
@@ -71,7 +62,10 @@ export const ConfigEditor = (props: Props) => {
                 autoComplete="off"
                 placeholder="************************"
                 value={password}
-                onChange={handleEvent(setPassword)}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  handleChange('secureJsonData.password')(event);
+                  handleChange('secureJsonFields.password', Boolean)(event);
+                }}
               />
             </Field>
           </FieldSet>

src/QueryEditor.tsx

@@ -1,16 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Form, Field, Input } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from './datasource';
 import { MqttDataSourceOptions, MqttQuery } from './types';
-import { handleEvent } from 'handleEvent';
+import { handlerFactory } from 'handleEvent';
 
 type Props = QueryEditorProps<DataSource, MqttQuery, MqttDataSourceOptions>;
 
 export const QueryEditor = (props: Props) => {
   const { query, onChange } = props;
-  const [queryText, setQueryText] = useState(query.queryText ?? '');
-  useEffect(() => onChange({ ...query, queryText, stream: true }), [queryText]);
+  const handleEvent = handlerFactory(query, onChange);
 
   return (
     <Form onSubmit={() => {}}>
@@ -19,10 +18,10 @@ export const QueryEditor = (props: Props) => {
           <Input
             name="queryText"
             required
-            value={queryText}
+            value={query.queryText}
             css=""
             autoComplete="off"
-            onChange={handleEvent(setQueryText)}
+            onChange={handleEvent('queryText')}
           />
         </Field>
       )}

src/handleEvent.test.ts

@@ -1,24 +1,36 @@
 import { ChangeEvent } from 'react';
-import { handleEvent } from './handleEvent';
+import { handlerFactory } from './handleEvent';
 
 const changeEvent = {
   currentTarget: {
     value: 'test',
   },
 } as ChangeEvent<HTMLInputElement>;
 
-describe('handleEvent', () => {
+describe('handlerFactory', () => {
   it('returns value from event', () => {
-    const handler = handleEvent();
-    expect(handler(changeEvent)).toMatchInlineSnapshot(`"test"`);
+    const cb = jest.fn();
+    const handler = handlerFactory({ a: { b: 'c' } }, cb);
+    handler('a.b')(changeEvent);
+    expect(cb.mock.calls[0][0]).toMatchInlineSnapshot(`
+      Object {
+        "a": Object {
+          "b": "test",
+        },
+      }
+    `);
   });
 
-  it('calls the handler functions left to right', () => {
-    const one = (v: string) => `${v}-1`;
-    const two = (v: string) => `${v}-2`;
-    const three = (v: string) => `${v}-3`;
-
-    const handler = handleEvent(one, two, three);
-    expect(handler(changeEvent)).toMatchInlineSnapshot(`"test-1-2-3"`);
+  it('calls the formatting function', () => {
+    const cb = jest.fn();
+    const handler = handlerFactory({ a: { b: 'c' } }, cb);
+    handler('a.b', v => v.toUpperCase())(changeEvent);
+    expect(cb.mock.calls[0][0]).toMatchInlineSnapshot(`
+      Object {
+        "a": Object {
+          "b": "TEST",
+        },
+      }
+    `);
   });
 });

src/handleEvent.ts

@@ -1,12 +1,10 @@
 import { ChangeEvent } from 'react';
+import _ from 'lodash';
 
-export type ReturnValue = string | number | boolean | null | void;
-export type EventHandler = (value: any) => ReturnValue;
-
-/**
- * calls functions passed as args with `event?.currentTarget.value`
- * passed to the first function, and the return value of the preceeding function
- * for every function after the first.
- */
-export const handleEvent = (...fns: EventHandler[]) => (event: ChangeEvent<HTMLInputElement>) =>
-  fns.reduce((result: ReturnValue, fn: EventHandler) => fn.call(null, result), event?.currentTarget.value);
+export const handlerFactory = (original: object, onChange: (copy: any) => void) => (
+  path: string,
+  format: (value: string) => string | number | boolean | null = value => value
+) => (event: ChangeEvent<HTMLInputElement>): void => {
+  const copy = _.cloneDeep(original);
+  onChange(_.set(copy, path, format(event.currentTarget.value)));
+};

src/img/logo.jpg

@@ -17,8 +17,8 @@
       "iot"
     ],
     "logos": {
-      "small": "img/logo.svg",
-      "large": "img/logo.svg"
+      "small": "img/logo.jpg",
+      "large": "img/logo.jpg"
     },
     "links": [
       {