瀏覽代碼

[editor] Switch to a stateful SqlScratchpad component in the SQL Scratchpad example

Johan Ahlen 4 年之前
父節點
當前提交
ed1f759545
共有 1 個文件被更改,包括 55 次插入32 次删除
  1. 55 32
      tools/examples/components/sql-scratchpad/src/components/SqlScratchpad.tsx

+ 55 - 32
tools/examples/components/sql-scratchpad/src/components/SqlScratchpad.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useState} from 'react';
+import React from 'react';
 
 import hueComponents from 'gethue/lib/components/QueryEditorWebComponents';
 import hueConfig from 'gethue/lib/config/hueConfig';
@@ -10,49 +10,72 @@ import { ExecuteProgress } from './ExecuteProgress';
 import { ResultTable } from './ResultTable';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
-const HUE_BASE_URL = 'http://localhost:8888/'
+const HUE_BASE_URL = 'http://localhost:8888'
 
 hueComponents.configure({
   baseUrl: HUE_BASE_URL
 });
 
-export const SqlScratchpad: FC = () => {
-  const [activeExecutable, setActiveExecutable] = useState<SqlExecutable | undefined>(undefined);
-  const [executor, setExecutor] = useState<Executor | undefined>(undefined);
+interface SqlScratchpadState {
+  activeExecutable?: SqlExecutable;
+  executor?: Executor;
+}
 
-  React.useEffect(() => {
+export class SqlScratchpad extends React.Component<{}, SqlScratchpadState> {
+  state = {
+    activeExecutable: undefined,
+    executor: undefined
+  }
+
+  constructor(props: {}) {
+    super(props);
+    this.setActiveExecutable = this.setActiveExecutable.bind(this);
+  }
+
+  componentDidMount() {
     console.info('Refreshing config');
+
     hueConfig.refreshConfig(HUE_BASE_URL).then(() => {
       const connector = hueConfig.findEditorConnector(() => true); // Returns the first connector
 
-      setExecutor(new Executor({
-        compute: (() => ({ id: 'default' })) as KnockoutObservable<any>,
-        connector: (() => connector) as KnockoutObservable<any>,
-        database: (() => 'default') as KnockoutObservable<any>,
-        namespace: (() => ({ id: 'default' })) as KnockoutObservable<any>,
-      }));
+      this.setState({
+        executor: new Executor({
+          compute: (() => ({ id: 'default' })) as KnockoutObservable<any>,
+          connector: (() => connector) as KnockoutObservable<any>,
+          database: (() => 'default') as KnockoutObservable<any>,
+          namespace: (() => ({ id: 'default' })) as KnockoutObservable<any>,
+        })
+      })
     }).catch(err => {
       console.warn('Failed loading the Hue config')
     })
-  })
-
-  if (executor) {
-    return <React.Fragment>
-      <div className="ace-editor">
-        <QueryEditor executor={executor} setActiveExecutable={setActiveExecutable}/>
-      </div>
-      <div className="executable-progress-bar">
-        <ExecuteProgress activeExecutable={activeExecutable}/>
-      </div>
-      <div className="executable-actions">
-        <ExecuteActions activeExecutable={activeExecutable}/>
-      </div>
-      <div className="result-table">
-        <ResultTable/>
-      </div>
-    </React.Fragment>
-  } else {
-    return <div>Loading Config...</div>
   }
 
-};
+  setActiveExecutable(activeExecutable: SqlExecutable) {
+    this.setState({
+      activeExecutable
+    })
+  }
+
+  render() {
+    const executor = this.state.executor;
+    if (executor) {
+      return <React.Fragment>
+        <div className="ace-editor">
+          <QueryEditor executor={executor} setActiveExecutable={this.setActiveExecutable}/>
+        </div>
+        <div className="executable-progress-bar">
+          <ExecuteProgress activeExecutable={this.state.activeExecutable}/>
+        </div>
+        <div className="executable-actions">
+          <ExecuteActions activeExecutable={this.state.activeExecutable}/>
+        </div>
+        <div className="result-table">
+          <ResultTable/>
+        </div>
+      </React.Fragment>
+    } else {
+      return <div>Loading Config...</div>
+    }
+  }
+}