sidebar is react, fix a few bugs

src/Programs/ProgramHelpers.js

@@ -1,36 +0,0 @@
-import { Programs } from "./Programs";
-
-import { Player } from "../Player";
-import { createElement } from "../../utils/uiHelpers/createElement";
-
-//Returns the number of programs that are currently available to be created
-function getNumAvailableCreateProgram() {
-  var count = 0;
-  for (const key in Programs) {
-    // Non-creatable program
-    if (Programs[key].create == null) {
-      continue;
-    }
-
-    // Already has program
-    if (Player.hasProgram(Programs[key].name)) {
-      continue;
-    }
-
-    // Does not meet requirements
-    if (!Programs[key].create.req(Player)) {
-      continue;
-    }
-
-    count++;
-  }
-
-  if (Player.firstProgramAvailable === false && count > 0) {
-    Player.firstProgramAvailable = true;
-    document.getElementById("hacking-menu-header").click();
-    document.getElementById("hacking-menu-header").click();
-  }
-  return count;
-}
-
-export { getNumAvailableCreateProgram };

src/Programs/ProgramHelpers.ts

@@ -0,0 +1,25 @@
+import { Programs } from "./Programs";
+import { Program } from "./Program";
+
+import { IPlayer } from "../PersonObjects/IPlayer";
+import { createElement } from "../../utils/uiHelpers/createElement";
+
+//Returns the programs this player can create.
+export function getAvailableCreatePrograms(player: IPlayer): Program[] {
+  const programs: Program[] = [];
+  for (const key in Programs) {
+    // Non-creatable program
+    const create = Programs[key].create;
+    if (create == null) continue;
+
+    // Already has program
+    if (player.hasProgram(Programs[key].name)) continue;
+
+    // Does not meet requirements
+    if (!create.req(player)) continue;
+
+    programs.push(Programs[key]);
+  }
+
+  return programs;
+}

src/Programs/ui/ProgramsRoot.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { Programs } from "../Programs";
+import { getAvailableCreatePrograms } from "../ProgramHelpers";
 
 interface IProps {
   player: IPlayer;
@@ -11,10 +12,9 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
   function rerender(): void {
     setRerender((old) => !old);
   }
-  const [divisionName, setDivisionName] = useState("Overview");
 
   useEffect(() => {
-    const id = setInterval(rerender, 20);
+    const id = setInterval(rerender, 1000);
     return () => clearInterval(id);
   }, []);
 
@@ -27,14 +27,13 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
       </p>
 
       <ul id="create-program-list">
-        {Object.keys(Programs).map((programName) => {
-          const program = Programs[programName];
-          if (program == null) return <></>;
+        {getAvailableCreatePrograms(props.player).map((program) => {
           const create = program.create;
           if (create === null) return <></>;
+
           return (
             <a
-              key={programName}
+              key={program.name}
               className="a-link-button tooltip"
               onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)}
             >