refactor: Converts VariableQueryEditor to Component class

Author: NeedleInAJayStack

src/components/VariableQueryEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { PureComponent } from 'react';
 import { HaystackVariableQuery } from '../types';
 import { HaystackQueryTypeSelector } from './HaystackQueryTypeSelector';
 import { HaystackQueryInput } from './HaystackQueryInput';
@@ -9,91 +9,104 @@ interface VariableQueryProps {
   onChange: (query: HaystackVariableQuery, definition: string) => void;
 }
 
+interface VariableState {
+  query: HaystackVariableQuery;
+  refId?: string;
+}
+
 const refId = "variable";
 
-export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query: variableQuery }) => {
-  let variableInputWidth = 30;
-  const [query, setState] = useState(variableQuery);
+export class VariableQueryEditor extends PureComponent<VariableQueryProps, VariableState> {
+  constructor(props: VariableQueryProps) {
+    super(props);
+    this.state = { 
+        query: props.query
+    };
+  }
 
-  const saveQuery = () => {
+  variableInputWidth = 30;
+
+  saveQuery() {
     // refId must match but doesn't get set originally so set should set it on every change
-    setState({ ...query, refId: refId});
+    this.setState({ ...this.state, refId: refId});
 
-    let type = query.type;
+    let type = this.state.query.type;
     let queryCmd = "";
-    if (query.type === "eval") {
-      queryCmd = query.eval
-    } else if (query.type === "hisRead") {
-      queryCmd = query.hisRead
-    } else if (query.type === "hisReadFilter") {
-      queryCmd = query.hisReadFilter
-    } else if (query.type === "read") {
-      queryCmd = query.read
+    if (this.state.query.type === "eval") {
+      queryCmd = this.state.query.eval
+    } else if (this.state.query.type === "hisRead") {
+      queryCmd = this.state.query.hisRead
+    } else if (this.state.query.type === "hisReadFilter") {
+      queryCmd = this.state.query.hisReadFilter
+    } else if (this.state.query.type === "read") {
+      queryCmd = this.state.query.read
     }
     let column = "none";
-    if (query.column !== undefined && query.column !== '') {
-      column = `'${query.column}'`;
+    if (this.state.query.column !== undefined && this.state.query.column !== '') {
+      column = `'${this.state.query.column}'`;
     }
     let displayColumn = "none";
-    if (query.displayColumn !== undefined && query.displayColumn !== '') {
-      displayColumn = `'${query.displayColumn}'`;
+    if (this.state.query.displayColumn !== undefined && this.state.query.displayColumn !== '') {
+      displayColumn = `'${this.state.query.displayColumn}'`;
     }
     let displayString = `${type}: '${queryCmd}', Column: ${column}, Display: ${displayColumn}`
-    onChange(query, displayString);
+    this.props.onChange(this.state.query, displayString);
   };
 
-  const onTypeChange = (newType: string) => {
-    setState({ ...query, type: newType});
+  onTypeChange(newType: string) {
+    this.setState({ ...this.state, query: {...this.state.query, type: newType}});
   };
 
-  const onQueryChange = (newQuery: string) => {
-    if (query.type === "eval") {
-      setState({ ...query, eval: newQuery });
-    } else if (query.type === "hisRead") {
-      setState({ ...query, hisRead: newQuery });
-    } else if (query.type === "hisReadFilter") {
-      setState({ ...query, hisReadFilter: newQuery });
-    } else if (query.type === "read") {
-      setState({ ...query, read: newQuery });
+  onQueryChange(newQuery: string) {
+    if (this.props.query.type === "eval") {
+      this.setState({ ...this.state, query: { ...this.props.query, eval: newQuery }});
+    } else if (this.props.query.type === "hisRead") {
+      this.setState({ ...this.state, query: { ...this.props.query, hisRead: newQuery }});
+    } else if (this.props.query.type === "hisReadFilter") {
+      this.setState({ ...this.state, query: { ...this.props.query, hisReadFilter: newQuery }});
+    } else if (this.props.query.type === "read") {
+      this.setState({ ...this.state, query: { ...this.props.query, read: newQuery }});
     }
   };
 
-  const onColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
-    setState({...query, column: event.currentTarget.value,});
+  onColumnChange(event: React.FormEvent<HTMLInputElement>) {
+    this.setState({ ...this.state, query: {...this.props.query, column: event.currentTarget.value,}});
   };
 
-  const onDisplayColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
-    setState({...query, displayColumn: event.currentTarget.value,});
+  onDisplayColumnChange(event: React.FormEvent<HTMLInputElement>) {
+    this.setState({ ...this.state, query: {...this.props.query, displayColumn: event.currentTarget.value,}});
   };
 
-  return (
-    <div onBlur={saveQuery}>
-      <HaystackQueryTypeSelector
-        datasource={null}
-        type={query.type}
-        refId={query.refId ?? refId}
-        onChange={onTypeChange}
-      />
-      <HaystackQueryInput
-        query={query}
-        onChange={onQueryChange}
-      />
-      <InlineField label="Column">
-        <Input
-          width={variableInputWidth}
-          onChange={onColumnChange}
-          value={query.column}
-          placeholder="Defaults to 'id' or first column"
+  render() {
+    return (
+      <div onBlur={() => this.saveQuery()}>
+        <HaystackQueryTypeSelector
+          datasource={null}
+          type={this.state.query.type}
+          refId={this.state.query.refId ?? refId}
+          onChange={(e) => this.onTypeChange(e)}
         />
-      </InlineField>
-      <InlineField label="Display Column">
-        <Input
-          width={variableInputWidth}
-          onChange={onDisplayColumnChange}
-          value={query.displayColumn}
-          placeholder="Defaults to 'Column'"
+        <HaystackQueryInput
+          query={this.state.query}
+          onChange={(e) => this.onQueryChange(e)}
         />
-      </InlineField>
-    </div>
-  );
-};
+        <InlineField label="Column">
+          <Input
+            width={this.variableInputWidth}
+            onChange={(e) => this.onColumnChange(e)}
+            value={this.state.query.column}
+            placeholder="Defaults to 'id' or first column"
+          />
+        </InlineField>
+        <InlineField label="Display Column">
+          <Input
+            width={this.variableInputWidth}
+            onChange={(e) => this.onDisplayColumnChange(e)}
+            value={this.state.query.displayColumn}
+            placeholder="Defaults to 'Column'"
+          />
+        </InlineField>
+      </div>
+    );
+  }
+}