Naiely convert to function component

Author: robertbrignull

extensions/ql-vscode/src/view/results/ResultTables.tsx

@@ -24,6 +24,7 @@ import { vscode } from "../vscode-api";
 import { sendTelemetry } from "../common/telemetry";
 import { ResultTable } from "./ResultTable";
 import { ResultTablesHeader } from "./ResultTablesHeader";
+import { useEffect } from "react";
 
 /**
  * Properties for the `ResultTables` component.
@@ -43,14 +44,6 @@ interface ResultTablesProps {
   queryPath: string;
 }
 
-/**
- * State for the `ResultTables` component.
- */
-interface ResultTablesState {
-  selectedTable: string; // name of selected result set
-  problemsViewSelected: boolean;
-}
-
 const UPDATING_RESULTS_TEXT_CLASS_NAME =
   "vscode-codeql__result-tables-updating-text";
 
@@ -122,85 +115,71 @@ function getResultSets(
  * Displays multiple `ResultTable` tables, where the table to be displayed is selected by a
  * dropdown.
  */
-export class ResultTables extends React.Component<
-  ResultTablesProps,
-  ResultTablesState
-> {
-  constructor(props: ResultTablesProps) {
-    super(props);
-    const selectedTable =
-      props.parsedResultSets.selectedTable ||
-      getDefaultResultSet(
-        getResultSets(props.rawResultSets, props.interpretation),
-      );
-    this.state = {
-      selectedTable,
-      problemsViewSelected: false,
-    };
-  }
+export function ResultTables(props: ResultTablesProps) {
+  const {
+    parsedResultSets,
+    rawResultSets,
+    interpretation,
+    database,
+    resultsPath,
+    metadata,
+    origResultsPaths,
+    isLoadingNewResults,
+    sortStates,
+  } = props;
 
-  handleMessage(msg: IntoResultsViewMsg): void {
+  const [selectedTable, setSelectedTable] = React.useState(
+    parsedResultSets.selectedTable ||
+      getDefaultResultSet(getResultSets(rawResultSets, interpretation)),
+  );
+  const [problemsViewSelected, setProblemsViewSelected] = React.useState(false);
+
+  const handleMessage = (msg: IntoResultsViewMsg): void => {
     switch (msg.t) {
       case "untoggleShowProblems":
-        this.setState({
-          problemsViewSelected: false,
-        });
+        setProblemsViewSelected(false);
         break;
 
       default:
       // noop
     }
-  }
+  };
 
-  private vscodeMessageHandler(evt: MessageEvent) {
+  const vscodeMessageHandler = (evt: MessageEvent): void => {
     // sanitize origin
     const origin = evt.origin.replace(/\n|\r/g, "");
     evt.origin === window.origin
-      ? this.handleMessage(evt.data as IntoResultsViewMsg)
+      ? handleMessage(evt.data as IntoResultsViewMsg)
       : console.error(`Invalid event origin ${origin}`);
-  }
+  };
 
   // TODO: Duplicated from results.tsx consider a way to
   // avoid this duplication
-  componentDidMount(): void {
-    this.vscodeMessageHandler = this.vscodeMessageHandler.bind(this);
-    window.addEventListener("message", this.vscodeMessageHandler);
-  }
+  useEffect(() => {
+    window.addEventListener("message", vscodeMessageHandler);
 
-  componentWillUnmount(): void {
-    if (this.vscodeMessageHandler) {
-      window.removeEventListener("message", this.vscodeMessageHandler);
-    }
-  }
+    return () => {
+      window.removeEventListener("message", vscodeMessageHandler);
+    };
+  }, []);
 
-  componentDidUpdate(
-    prevProps: Readonly<ResultTablesProps>,
-    prevState: Readonly<ResultTablesState>,
-    snapshot?: any,
-  ) {
+  useEffect(() => {
     const resultSetExists =
-      this.props.parsedResultSets.resultSetNames.some(
-        (v) => this.state.selectedTable === v,
-      ) ||
-      getResultSets(this.props.rawResultSets, this.props.interpretation).some(
-        (v) => this.state.selectedTable === v.schema.name,
+      parsedResultSets.resultSetNames.some((v) => selectedTable === v) ||
+      getResultSets(rawResultSets, interpretation).some(
+        (v) => selectedTable === v.schema.name,
       );
 
     // If the selected result set does not exist, select the default result set.
     if (!resultSetExists) {
-      this.setState((state, props) => {
-        const selectedTable =
-          props.parsedResultSets.selectedTable ||
-          getDefaultResultSet(
-            getResultSets(props.rawResultSets, props.interpretation),
-          );
-
-        return { selectedTable };
-      });
+      setSelectedTable(
+        parsedResultSets.selectedTable ||
+          getDefaultResultSet(getResultSets(rawResultSets, interpretation)),
+      );
     }
-  }
+  });
 
-  private onTableSelectionChange = (
+  const onTableSelectionChange = (
     event: React.ChangeEvent<HTMLSelectElement>,
   ): void => {
     const selectedTable = event.target.value;
@@ -212,16 +191,13 @@ export class ResultTables extends React.Component<
     sendTelemetry("local-results-table-selection");
   };
 
-  private alertTableExtras(): JSX.Element | undefined {
-    const { database, resultsPath, metadata, origResultsPaths } = this.props;
+  const alertTableExtras = (): JSX.Element | undefined => {
     const handleCheckboxChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.checked === this.state.problemsViewSelected) {
+      if (e.target.checked === problemsViewSelected) {
         // no change
         return;
       }
-      this.setState({
-        problemsViewSelected: e.target.checked,
-      });
+      setProblemsViewSelected(e.target.checked);
       if (e.target.checked) {
         sendTelemetry("local-results-show-results-in-problems-view");
       }
@@ -244,85 +220,69 @@ export class ResultTables extends React.Component<
             id="toggle-diagnostics"
             name="toggle-diagnostics"
             onChange={handleCheckboxChanged}
-            checked={this.state.problemsViewSelected}
+            checked={problemsViewSelected}
           />
           <label htmlFor="toggle-diagnostics">
             Show results in Problems view
           </label>
         </div>
       </div>
     );
-  }
+  };
 
-  getOffset(): number {
-    const { parsedResultSets } = this.props;
+  const getOffset = (): number => {
     return parsedResultSets.pageNumber * parsedResultSets.pageSize;
-  }
+  };
 
-  render(): React.ReactNode {
-    const { selectedTable } = this.state;
-    const resultSets = getResultSets(
-      this.props.rawResultSets,
-      this.props.interpretation,
-    );
-    const resultSetNames = getResultSetNames(
-      this.props.interpretation,
-      this.props.parsedResultSets,
-    );
+  const resultSets = getResultSets(rawResultSets, interpretation);
+  const resultSetNames = getResultSetNames(interpretation, parsedResultSets);
 
-    const resultSet = resultSets.find(
-      (resultSet) => resultSet.schema.name === selectedTable,
-    );
-    const nonemptyRawResults = resultSets.some(
-      (resultSet) =>
-        resultSet.t === "RawResultSet" && resultSet.rows.length > 0,
-    );
-    const numberOfResults = resultSet && renderResultCountString(resultSet);
+  const resultSet = resultSets.find(
+    (resultSet) => resultSet.schema.name === selectedTable,
+  );
+  const nonemptyRawResults = resultSets.some(
+    (resultSet) => resultSet.t === "RawResultSet" && resultSet.rows.length > 0,
+  );
+  const numberOfResults = resultSet && renderResultCountString(resultSet);
 
-    const resultSetOptions = resultSetNames.map((name) => (
-      <option key={name} value={name}>
-        {name}
-      </option>
-    ));
-    return (
-      <div>
-        <ResultTablesHeader
-          {...this.props}
-          selectedTable={this.state.selectedTable}
-        />
-        <div className={tableHeaderClassName}></div>
-        <div className={tableHeaderClassName}>
-          <select value={selectedTable} onChange={this.onTableSelectionChange}>
-            {resultSetOptions}
-          </select>
-          {numberOfResults}
-          {selectedTable === ALERTS_TABLE_NAME
-            ? this.alertTableExtras()
-            : undefined}
-          {this.props.isLoadingNewResults ? (
-            <span className={UPDATING_RESULTS_TEXT_CLASS_NAME}>
-              Updating results…
-            </span>
-          ) : null}
-        </div>
-        {resultSet && (
-          <ResultTable
-            key={resultSet.schema.name}
-            resultSet={resultSet}
-            databaseUri={this.props.database.databaseUri}
-            resultsPath={this.props.resultsPath}
-            sortState={this.props.sortStates.get(resultSet.schema.name)}
-            nonemptyRawResults={nonemptyRawResults}
-            showRawResults={() => {
-              this.setState({ selectedTable: SELECT_TABLE_NAME });
-              sendTelemetry("local-results-show-raw-results");
-            }}
-            offset={this.getOffset()}
-          />
-        )}
+  const resultSetOptions = resultSetNames.map((name) => (
+    <option key={name} value={name}>
+      {name}
+    </option>
+  ));
+  return (
+    <div>
+      <ResultTablesHeader {...props} selectedTable={selectedTable} />
+      <div className={tableHeaderClassName}></div>
+      <div className={tableHeaderClassName}>
+        <select value={selectedTable} onChange={onTableSelectionChange}>
+          {resultSetOptions}
+        </select>
+        {numberOfResults}
+        {selectedTable === ALERTS_TABLE_NAME ? alertTableExtras() : undefined}
+        {isLoadingNewResults ? (
+          <span className={UPDATING_RESULTS_TEXT_CLASS_NAME}>
+            Updating results…
+          </span>
+        ) : null}
       </div>
-    );
-  }
+      {resultSet && (
+        <ResultTable
+          key={resultSet.schema.name}
+          resultSet={resultSet}
+          databaseUri={database.databaseUri}
+          resultsPath={resultsPath}
+          sortState={sortStates.get(resultSet.schema.name)}
+          nonemptyRawResults={nonemptyRawResults}
+          showRawResults={() => {
+            setSelectedTable(SELECT_TABLE_NAME);
+            sendTelemetry("local-results-show-raw-results");
+          }}
+          offset={getOffset()}
+        />
+      )}
+    </div>
+  );
 }
 
 function getDefaultResultSet(resultSets: readonly ResultSet[]): string {