Procházet zdrojové kódy

[frontend] Prevent rerender of react components in the SQL Scratchpad example

Johan Ahlen před 4 roky
rodič
revize
54086cbe8c

+ 5 - 5
tools/examples/components/sql-scratchpad/src/components/ExecuteActions.tsx

@@ -1,17 +1,17 @@
 import React, { FC } from 'react';
 
 import 'gethue/lib/components/query-editor-components';
-import Executable from 'gethue/src/apps/editor/execution/executable';
+import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 export interface ExecuteActionsProps {
-  activeExecutable?: Executable
+  activeExecutable?: SqlExecutable
 }
 
 interface ExecuteActionsElement extends HTMLElement {
-  executable?: Executable;
+  executable?: SqlExecutable;
 }
 
-export const ExecuteActions: FC<ExecuteActionsProps> = ({ activeExecutable }) => {
+export const ExecuteActions: FC<ExecuteActionsProps> = React.memo(({ activeExecutable }) => {
   const newNode = document.createElement('query-editor-actions');
   newNode.setAttribute('executable', '');
   (newNode as ExecuteActionsElement).executable = activeExecutable;
@@ -26,4 +26,4 @@ export const ExecuteActions: FC<ExecuteActionsProps> = ({ activeExecutable }) =>
       }
     }
   />
-};
+});

+ 5 - 5
tools/examples/components/sql-scratchpad/src/components/ExecuteProgress.tsx

@@ -1,17 +1,17 @@
 import React, { FC } from 'react';
 
 import 'gethue/lib/components/query-editor-components';
-import Executable from 'gethue/src/apps/editor/execution/executable';
+import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 export interface ExecuteProgressProps {
-  activeExecutable?: Executable
+  activeExecutable?: SqlExecutable
 }
 
 interface ProgressBarElement extends HTMLElement {
-  executable?: Executable;
+  executable?: SqlExecutable;
 }
 
-export const ExecuteProgress: FC<ExecuteProgressProps> = ({ activeExecutable }) => {
+export const ExecuteProgress: FC<ExecuteProgressProps> = React.memo(({ activeExecutable }) => {
   const newNode = document.createElement('query-editor-progress-bar');
   newNode.setAttribute('executable', '');
   (newNode as ProgressBarElement).executable = activeExecutable;
@@ -26,4 +26,4 @@ export const ExecuteProgress: FC<ExecuteProgressProps> = ({ activeExecutable })
       }
     }
   />
-};
+});

+ 4 - 4
tools/examples/components/sql-scratchpad/src/components/QueryEditor.tsx

@@ -5,7 +5,7 @@ import 'gethue/lib/components/query-editor-components';
 import hiveSyntaxParser from 'gethue/lib/parsers/hiveSyntaxParser';
 import hiveAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';
 import Executor from 'gethue/lib/execution/executor';
-import Executable from 'gethue/src/apps/editor/execution/executable';
+import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 import { SetOptions, SqlReferenceProvider, UdfCategory } from 'gethue/src/sql/reference/types'
 import { ActiveStatementChangedEvent } from 'gethue/src/apps/editor/components/aceEditor/types';
 
@@ -42,10 +42,10 @@ interface QueryEditorElement extends HTMLElement {
 interface QueryEditorProps {
   executor: Executor;
   id?: string; // Set a unique ID to allow multiple query editors on one page
-  setActiveExecutable(executable: Executable): void;
+  setActiveExecutable(executable: SqlExecutable): void;
 }
 
-export const QueryEditor: FC<QueryEditorProps> = ({ executor, id, setActiveExecutable }) => {
+export const QueryEditor: FC<QueryEditorProps> = React.memo(({ executor, id, setActiveExecutable }) => {
   const nodeElement = document.createElement('query-editor') as QueryEditorElement;
   nodeElement.setAttribute('hue-base-url', 'http://localhost:8888');
   nodeElement.setAttribute('executor', '');
@@ -93,4 +93,4 @@ export const QueryEditor: FC<QueryEditorProps> = ({ executor, id, setActiveExecu
       }
     }
   />;
-}
+});

+ 5 - 5
tools/examples/components/sql-scratchpad/src/components/ResultTable.tsx

@@ -1,17 +1,17 @@
 import React, { FC } from 'react';
 
 import 'gethue/lib/components/query-editor-components';
-import Executable from 'gethue/src/apps/editor/execution/executable';
+import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 export interface ResultTableProps {
-  activeExecutable?: Executable
+  activeExecutable?: SqlExecutable
 }
 
 interface ResultTableElement extends HTMLElement {
-  executable?: Executable;
+  executable?: SqlExecutable;
 }
 
-export const ResultTable: FC<ResultTableProps> = ({ activeExecutable }) => {
+export const ResultTable: FC<ResultTableProps> = React.memo(({ activeExecutable }) => {
   const newNode = document.createElement('query-editor-result-table');
   newNode.setAttribute('executable', '');
   (newNode as ResultTableElement).executable = activeExecutable;
@@ -26,4 +26,4 @@ export const ResultTable: FC<ResultTableProps> = ({ activeExecutable }) => {
       }
     }
   />
-}
+})

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

@@ -8,7 +8,7 @@ import { QueryEditor } from './QueryEditor';
 import { ExecuteActions } from './ExecuteActions';
 import { ExecuteProgress } from './ExecuteProgress';
 import { ResultTable } from './ResultTable';
-import Executable from 'gethue/src/apps/editor/execution/executable';
+import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 const executor = new Executor({
   compute: (() => ({ id: 'default' })) as KnockoutObservable<any>,
@@ -22,7 +22,7 @@ const executor = new Executor({
 });
 
 export const SqlScratchpad: FC = () => {
-  const [activeExecutable, setActiveExecutable] = useState<Executable | undefined>(undefined);
+  const [activeExecutable, setActiveExecutable] = useState<SqlExecutable | undefined>(undefined);
 
   return <React.Fragment>
     <div className="ace-editor">
@@ -32,7 +32,7 @@ export const SqlScratchpad: FC = () => {
       <ExecuteProgress activeExecutable={activeExecutable}/>
     </div>
     <div className="executable-actions">
-      <ExecuteActions/>
+      <ExecuteActions activeExecutable={activeExecutable}/>
     </div>
     <div className="result-table">
       <ResultTable/>