Refactored several React class components as functional components

frontend/javascripts/components/disable_generic_dnd.ts

@@ -1,22 +1,20 @@
 import window from "libs/window";
 import React from "react";
-import type { EmptyObject } from "types/globals";
-export default class DisableGenericDnd extends React.Component<EmptyObject> {
-  componentDidMount() {
-    window.addEventListener("dragover", this.preventDefault, false);
-    window.addEventListener("drop", this.preventDefault, false);
-  }
 
-  componentWillUnmount() {
-    window.removeEventListener("dragover", this.preventDefault);
-    window.removeEventListener("drop", this.preventDefault);
-  }
+const preventDefault = (e: Event) => {
+  e.preventDefault();
+};
 
-  preventDefault = (e: Event) => {
-    e.preventDefault();
-  };
+export default function DisableGenericDnd() {
+  React.useEffect(() => {
+    window.addEventListener("dragover", preventDefault, false);
+    window.addEventListener("drop", preventDefault, false);
 
-  render() {
-    return null;
-  }
+    return () => {
+      window.removeEventListener("dragover", preventDefault);
+      window.removeEventListener("drop", preventDefault);
+    };
+  }, []);
+
+  return null;
 }

frontend/javascripts/components/fixed_expandable_table.tsx

@@ -1,11 +1,7 @@
 import { Button, Table, type TableProps } from "antd";
 import type { ColumnsType, GetRowKey } from "antd/lib/table/interface";
-import React from "react";
+import React, { useEffect } from "react";
 
-type State = {
-  expandedRows: Array<string>;
-  className?: string;
-};
 /** This is a wrapper for large tables that have fixed columns and support expanded rows.
  *  This wrapper ensures that when rows are expanded no column is fixed as this creates rendering bugs.
  *  If you are using this wrapper, you do not need to set the class "large-table"
@@ -17,72 +13,70 @@ type OwnTableProps<RecordType = any> = TableProps<RecordType> & {
   columns: ColumnsType<RecordType>;
 };
 
-const EMPTY_ARRAY: string[] = [] as const;
+const EMPTY_ARRAY: readonly string[] = [] as const;
 
-export default class FixedExpandableTable extends React.PureComponent<OwnTableProps, State> {
-  state: State = {
-    expandedRows: EMPTY_ARRAY,
-  };
+const getAllRowIds = (
+  dataSource: readonly any[] | undefined,
+  rowKey: string | number | symbol | GetRowKey<any> | undefined,
+) => {
+  const canUseRowKey = typeof rowKey === "string";
+  return dataSource != null && canUseRowKey ? dataSource.map((row) => row[rowKey]) : [];
+};
 
-  getAllRowIds(
-    dataSource: readonly any[] | undefined,
-    rowKey: string | number | symbol | GetRowKey<any> | undefined,
-  ) {
-    const canUseRowKey = typeof rowKey === "string";
-    return dataSource != null && canUseRowKey ? dataSource.map((row) => row[rowKey]) : [];
-  }
+export default function FixedExpandableTable<RecordType>({
+  className,
+  expandable,
+  dataSource,
+  rowKey,
+  columns,
+  ...restProps
+}: OwnTableProps<RecordType>) {
+  const [expandedRows, setExpandedRows] = React.useState(EMPTY_ARRAY);
 
-  componentDidUpdate(prevProps: Readonly<TableProps<any>>): void {
-    if (prevProps.dataSource !== this.props.dataSource) {
-      this.setState({ expandedRows: EMPTY_ARRAY });
-    }
-  }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Collapse all rows when source changes
+  useEffect(() => {
+    setExpandedRows(EMPTY_ARRAY);
+  }, [dataSource]);
 
-  render() {
-    const { expandedRows } = this.state;
-    const { className, expandable, ...restProps } = this.props;
-    const { dataSource, rowKey } = this.props;
-    const areAllRowsExpanded =
-      dataSource != null && this.state.expandedRows.length === dataSource?.length;
+  const areAllRowsExpanded = dataSource != null && expandedRows.length === dataSource?.length;
 
-    const columnTitleCollapsed = (
-      <Button
-        className="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
-        title="Expand all rows"
-        onClick={() => this.setState({ expandedRows: this.getAllRowIds(dataSource, rowKey) })}
-      />
-    );
-    const columnTitleExpanded = (
-      <Button
-        className="ant-table-row-expand-icon ant-table-row-expand-icon-expanded"
-        title="Collapse all rows"
-        onClick={() => this.setState({ expandedRows: EMPTY_ARRAY })}
-      />
-    );
-    const columnsWithAdjustedFixedProp: TableProps["columns"] = this.props.columns.map((column) => {
-      const columnFixed = expandedRows.length > 0 ? false : column.fixed;
-      return { ...column, fixed: columnFixed };
-    });
-    const expandableProp = {
-      ...expandable,
-      expandedRowKeys: expandedRows,
-      onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
-        this.setState({
-          expandedRows: selectedRows as string[],
-        });
-      },
-      columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
-    };
-    return (
-      <Table
-        {...restProps}
-        expandable={expandableProp}
-        scroll={{
-          x: "max-content",
-        }}
-        className={`large-table ${className}`}
-        columns={columnsWithAdjustedFixedProp}
-      />
-    );
-  }
+  const columnTitleCollapsed = (
+    <Button
+      className="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
+      title="Expand all rows"
+      onClick={() => setExpandedRows(getAllRowIds(dataSource, rowKey))}
+    />
+  );
+  const columnTitleExpanded = (
+    <Button
+      className="ant-table-row-expand-icon ant-table-row-expand-icon-expanded"
+      title="Collapse all rows"
+      onClick={() => setExpandedRows(EMPTY_ARRAY)}
+    />
+  );
+  const columnsWithAdjustedFixedProp = columns.map((column) => {
+    const columnFixed = expandedRows.length > 0 ? false : column.fixed;
+    return { ...column, fixed: columnFixed };
+  });
+  const expandableProp = {
+    ...expandable,
+    expandedRowKeys: expandedRows,
+    onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
+      setExpandedRows(selectedRows as string[]);
+    },
+    columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
+  };
+  return (
+    <Table
+      {...restProps}
+      dataSource={dataSource}
+      rowKey={rowKey}
+      expandable={expandableProp}
+      scroll={{
+        x: "max-content",
+      }}
+      className={`large-table ${className}`}
+      columns={columnsWithAdjustedFixedProp}
+    />
+  );
 }

frontend/javascripts/components/highlightable_row.tsx

@@ -1,33 +1,28 @@
-import * as React from "react";
+import type React from "react";
+import { useState } from "react";
+
 type Props = {
   shouldHighlight: boolean;
   children: React.ReactNode;
   style?: Record<string, any>;
 };
-type State = {
-  persistedShouldHighlight: boolean;
-}; // This component is able to highlight a newly rendered row.
+
+// This component is able to highlight a newly rendered row.
 // Internally, it persists the initially passed props, since that
 // prop can change faster than the animation is executed. Not saving
 // the initial prop, would abort the animation too early.
+export default function HighlightableRow({ shouldHighlight, style, ...restProps }: Props) {
+  const [persistedShouldHighlight] = useState(shouldHighlight);
 
-export default class HighlightableRow extends React.PureComponent<Props, State> {
-  state: State = {
-    persistedShouldHighlight: this.props.shouldHighlight,
-  };
-
-  render() {
-    const { shouldHighlight, style, ...restProps } = this.props;
-    return (
-      <tr
-        {...restProps}
-        style={{
-          ...style,
-          animation: this.state.persistedShouldHighlight ? "highlight-background 2.0s ease" : "",
-        }}
-      >
-        {this.props.children}
-      </tr>
-    );
-  }
+  return (
+    <tr
+      {...restProps}
+      style={{
+        ...style,
+        animation: persistedShouldHighlight ? "highlight-background 2.0s ease" : "",
+      }}
+    >
+      {restProps.children}
+    </tr>
+  );
 }

frontend/javascripts/components/loop.ts

@@ -1,28 +1,19 @@
 import window from "libs/window";
-import { Component } from "react";
-import type { EmptyObject } from "types/globals";
+import { useEffect } from "react";
+
 type LoopProps = {
   interval: number;
   onTick: (...args: Array<any>) => any;
 };
 
-class Loop extends Component<LoopProps, EmptyObject> {
-  intervalId: number | null | undefined = null;
-
-  componentDidMount() {
-    this.intervalId = window.setInterval(this.props.onTick, this.props.interval);
-  }
+export default function Loop({ interval, onTick }: LoopProps) {
+  useEffect(() => {
+    const intervalId = window.setInterval(onTick, interval);
 
-  componentWillUnmount() {
-    if (this.intervalId != null) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
-    }
-  }
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [interval, onTick]);
 
-  render() {
-    return null;
-  }
+  return null;
 }
-
-export default Loop;