Firmware upload is functional

central_frontend/src/dialogs/UploadUpdateDialog.tsx

@@ -1,3 +1,4 @@
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import {
   Button,
   Dialog,
@@ -12,9 +13,12 @@ import {
   styled,
 } from "@mui/material";
 import React from "react";
+import { OTAAPI } from "../api/OTAApi";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+import { checkVersion } from "../utils/StringsUtils";
 import { TextInput } from "../widgets/forms/TextInput";
-import { SemVer } from "semver";
-import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 
 const VisuallyHiddenInput = styled("input")({
   clip: "rect(0 0 0 0)",
@@ -33,9 +37,32 @@ export function UploadUpdateDialog(p: {
   onClose: () => void;
   onCreated: () => void;
 }): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
+
   const [platform, setPlatform] = React.useState<string | undefined>();
   const [version, setVersion] = React.useState<string | undefined>();
   const [file, setFile] = React.useState<File | undefined>();
+
+  const canSubmit = platform && version && checkVersion(version) && file;
+
+  const upload = async () => {
+    try {
+      loadingMessage.show("Uploading firmware...");
+      await OTAAPI.UploadFirmware(platform!, version!, file!);
+
+      snackbar("Successfully uploaded new firmware!");
+
+      p.onCreated();
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to upload firmware: ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   return (
     <Dialog open={true} onClose={p.onClose}>
       <DialogTitle>Submit a new update</DialogTitle>
@@ -67,15 +94,7 @@ export function UploadUpdateDialog(p: {
           helperText="The version shall follow semantics requirements"
           value={version}
           onValueChange={setVersion}
-          checkValue={(v) => {
-            try {
-              new SemVer(v, { loose: false });
-              return true;
-            } catch (e) {
-              console.error(e);
-              return false;
-            }
-          }}
+          checkValue={checkVersion}
         />
 
         <br />
@@ -104,7 +123,9 @@ export function UploadUpdateDialog(p: {
       </DialogContent>
       <DialogActions>
         <Button onClick={p.onClose}>Cancel</Button>
-        <Button type="submit">Subscribe</Button>
+        <Button type="submit" disabled={!canSubmit} onClick={upload}>
+          Upload
+        </Button>
       </DialogActions>
     </Dialog>
   );