[editor] Switch to a stateful SqlScratchpad component in the SQL Scratchpad example
-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,42 +10,65 @@ 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;
+}
+
+export class SqlScratchpad extends React.Component<{}, SqlScratchpadState> {
+ state = {
+ activeExecutable: undefined,
+ executor: undefined
+ }
- React.useEffect(() => {
+ 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({
+ 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')
})
+ }
+
+ 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={setActiveExecutable}/>
+ <QueryEditor executor={executor} setActiveExecutable={this.setActiveExecutable}/>
</div>
<div className="executable-progress-bar">
- <ExecuteProgress activeExecutable={activeExecutable}/>
+ <ExecuteProgress activeExecutable={this.state.activeExecutable}/>
</div>
<div className="executable-actions">
- <ExecuteActions activeExecutable={activeExecutable}/>
+ <ExecuteActions activeExecutable={this.state.activeExecutable}/>
</div>
<div className="result-table">
<ResultTable/>
@@ -54,5 +77,5 @@ export const SqlScratchpad: FC = () => {
} else {
return <div>Loading Config...</div>
}
-
-};
\ No newline at end of file
+ }
+}
\ No newline at end of file
