MISC: enforce eslint react checks (#640)

src/DevMenu/ui/ProgramsDev.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import { Player } from "@player";
+import MenuItem from "@mui/material/MenuItem";
+import { CompletedProgramName } from "@enums";
+
+export function ProgramsDev(): React.ReactElement {
+  const [program, setProgram] = useState(CompletedProgramName.bruteSsh);
+  function setProgramDropdown(event: SelectChangeEvent): void {
+    setProgram(event.target.value as CompletedProgramName);
+  }
+  function addProgram(): void {
+    if (!Player.hasProgram(program)) Player.getHomeComputer().programs.push(program);
+  }
+
+  function addAllPrograms(): void {
+    for (const name of Object.values(CompletedProgramName)) {
+      if (!Player.hasProgram(name)) Player.getHomeComputer().programs.push(name);
+    }
+  }
+
+  return (
+    <Accordion TransitionProps={{ unmountOnExit: true }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Programs</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <Typography>Program:</Typography>
+              </td>
+              <td>
+                <Select onChange={setProgramDropdown} value={program}>
+                  {Object.values(CompletedProgramName).map((name) => (
+                    <MenuItem key={name} value={name}>
+                      {name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Typography>Add:</Typography>
+              </td>
+              <td>
+                <Button onClick={addProgram}>One</Button>
+                <Button onClick={addAllPrograms}>All</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}