MISC: enforce eslint react checks (#640)

src/DevMenu/ui/SaveFileDev.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useRef } 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 { saveObject } from "../../SaveObject";
+import { SnackbarEvents } from "../../ui/React/Snackbar";
+import { ToastVariant } from "@enums";
+import { Upload } from "@mui/icons-material";
+import { Button } from "@mui/material";
+import { OptionSwitch } from "../../ui/React/OptionSwitch";
+
+export function SaveFileDev(): React.ReactElement {
+  const importInput = useRef<HTMLInputElement>(null);
+  const [saveFile, setSaveFile] = useState("");
+  const [restoreScripts, setRestoreScripts] = useState(true);
+  const [restoreAugs, setRestoreAugs] = useState(true);
+  const [restoreSFs, setRestoreSFs] = useState(true);
+
+  async function onImport(event: React.ChangeEvent<HTMLInputElement>): Promise<void> {
+    try {
+      const base64Save = await saveObject.getImportStringFromFile(event.target.files);
+      const save = atob(base64Save);
+      setSaveFile(save);
+    } catch (e: unknown) {
+      SnackbarEvents.emit(String(e), ToastVariant.ERROR, 5000);
+    }
+  }
+
+  function startImport(): void {
+    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) return;
+    const ii = importInput.current;
+    if (ii === null) throw new Error("import input should not be null");
+    ii.click();
+  }
+
+  function doRestore(): void {
+    const save = JSON.parse(saveFile);
+    // TODO unplanned: "Continue here". Unknown what this todo is for.
+    console.error(save);
+  }
+
+  return (
+    <Accordion TransitionProps={{ unmountOnExit: true }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Save file</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Button onClick={startImport} startIcon={<Upload />} sx={{ gridArea: "import" }}>
+          Select save file
+          <input ref={importInput} type="file" hidden onChange={onImport} />
+        </Button>
+        <br />
+        {saveFile !== "" && (
+          <>
+            <OptionSwitch
+              checked={restoreScripts}
+              onChange={(v) => setRestoreScripts(v)}
+              text="Restore scripts"
+              tooltip={<>Restore the save file home computer scripts.</>}
+            />
+            <br />
+            <OptionSwitch
+              checked={restoreAugs}
+              onChange={(v) => setRestoreAugs(v)}
+              text="Restore Augmentations"
+              tooltip={<>Restore the save file installed augmentations.</>}
+            />
+            <br />
+            <OptionSwitch
+              checked={restoreSFs}
+              onChange={(v) => setRestoreSFs(v)}
+              text="Restore Source Files"
+              tooltip={<>Restore the save file acquired source files.</>}
+            />
+            <br />
+            <Button onClick={doRestore}>Restore</Button>
+          </>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}