unify the way engine loads pages

src/ui/ActiveScripts/Root.tsx

@@ -2,7 +2,7 @@
  * Root React Component for the "Active Scripts" UI page. This page displays
  * and provides information about all of the player's scripts that are currently running
  */
-import * as React from "react";
+import React, { useState, useEffect } from "react";
 
 import { ScriptProduction } from "./ScriptProduction";
 import { ServerAccordions } from "./ServerAccordions";
@@ -15,23 +15,28 @@ type IProps = {
   workerScripts: Map<number, WorkerScript>;
 };
 
-export class ActiveScriptsRoot extends React.Component<IProps> {
-  constructor(props: IProps) {
-    super(props);
+export function ActiveScriptsRoot(props: IProps): React.ReactElement {
+  const setRerender = useState(false)[1];
+  function rerender(): void {
+    setRerender((old) => !old);
   }
+  const [divisionName, setDivisionName] = useState("Overview");
 
-  render(): React.ReactNode {
-    return (
-      <>
-        <p>
-          This page displays a list of all of your scripts that are currently running across every machine. It also
-          provides information about each script's production. The scripts are categorized by the hostname of the
-          servers on which they are running.
-        </p>
+  useEffect(() => {
+    const id = setInterval(rerender, 20);
+    return () => clearInterval(id);
+  }, []);
 
-        <ScriptProduction {...this.props} />
-        <ServerAccordions {...this.props} />
-      </>
-    );
-  }
+  return (
+    <>
+      <p>
+        This page displays a list of all of your scripts that are currently running across every machine. It also
+        provides information about each script's production. The scripts are categorized by the hostname of the servers
+        on which they are running.
+      </p>
+
+      <ScriptProduction {...props} />
+      <ServerAccordions {...props} />
+    </>
+  );
 }