Add package updates, car updates, and vehicle screens (#25)

2021-03-31 17:42:31 -07:00
parent 2d1faa8fb7
commit 17f81822c0
33 changed files with 2409 additions and 699 deletions
--- a/src/components/UpdatePackages/Create/index.jsx
+++ b/src/components/UpdatePackages/Create/index.jsx
@@ -0,0 +1,152 @@
+import React, { useRef } from "react";
+import { Button, TextField, Typography } from "@material-ui/core";
+import { DropzoneArea } from "material-ui-dropzone";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import {
+  useFileUploadContext,
+  FileUploadProvider,
+} from "../../Contexts/FileUploadContext";
+import ModalProgressBar from "../../ModalProgressBar";
+import useStyles from "../../useStyles";
+
+const FileUploadZone = ({ classes, token }) => {
+  const { setFiles } = useFileUploadContext();
+  const { setMessage } = useStatusContext();
+
+  return (
+    <>
+      <DropzoneArea
+        id="dropzone"
+        showPreviews={true}
+        showPreviewsInDropzone={false}
+        useChipsForPreview
+        previewGridProps={{ container: { spacing: 1, direction: "row" } }}
+        previewChipProps={{ classes: { root: classes.previewChip } }}
+        previewText="Selected files"
+        maxFileSize={1e9}
+        filesLimit={1}
+        showAlerts={false}
+        onChange={(files) => setFiles(files)}
+        onDelete={(files) => setFiles(files)}
+        onDropRejected={(files) => {
+          setMessage(`Rejected ${files[0].name} too large`);
+        }}
+      />
+      <ModalProgressBar />
+    </>
+  );
+};
+
+const MainForm = () => {
+  const { uploading, upload, files } = useFileUploadContext();
+  const { token } = useUserContext();
+  const { setMessage } = useStatusContext();
+  const classes = useStyles();
+  const packagenameEl = useRef(null);
+  const versionEl = useRef(null);
+  const descEl = useRef(null);
+  const releasenotesEl = useRef(null);
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const {
+        idToken: { jwtToken: authToken },
+      } = token;
+      const formData = {
+        packagename: packagenameEl.current.value,
+        version: versionEl.current.value,
+        description: descEl.current.value,
+        releasenotes: releasenotesEl.current.value,
+      };
+
+      await upload(formData, authToken, files);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  return (
+    <div className={classes.paper}>
+      <Typography component="h1" variant="h5">
+        Upload Update Package
+      </Typography>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="packagename"
+          name="packagename"
+          label="Package name"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          inputRef={packagenameEl}
+        />
+        <TextField
+          id="version"
+          name="version"
+          label="Version"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          inputRef={versionEl}
+        />
+        <TextField
+          id="description"
+          name="description"
+          label="Description"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "5120",
+          }}
+          fullWidth
+          multiline
+          rows={4}
+          placeholder="Package description"
+          inputRef={descEl}
+        />
+        <TextField
+          id="releasenotes"
+          name="releasenotes"
+          label="Release Notes URL"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "1024",
+          }}
+          fullWidth
+          placeholder="Release Notes URL"
+          inputRef={releasenotesEl}
+        />
+        <FileUploadZone classes={classes} />
+        <Button
+          type="submit"
+          disabled={uploading}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {uploading ? "Uploading..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default function FileUploadForm() {
+  return (
+    <FileUploadProvider>
+      <MainForm />
+    </FileUploadProvider>
+  );
+}