ota-admin-portal/src/components/CarUpdates/Deploy/index.jsx

import React, { useEffect, useState } from "react";
import { useParams, Redirect } from "react-router";
import { Button, Grid, Typography } from "@material-ui/core";
import {
  UpdatesProvider,
  useUpdatesContext,
} from "../../Contexts/UpdatesContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import { tsLocalDateTimeString } from "../../../utils/dates";
import SearchField from "../../Controls/SearchField";
import CarSelectionTable from "../../Cars/CarSelectionTable";
import { logger } from "../../../services/monitoring";

const MainForm = () => {
  const { packageid } = useParams();
  const { getPackages, createCarUpdates, packages, busy } = useUpdatesContext();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();
  const { setMessage, setTitle } = useStatusContext();
  const [packageName, setPackageName] = useState("");
  const [version, setVersion] = useState("");
  const [description, setDescription] = useState("");
  const [createDate, setCreateDate] = useState("");
  const [selected, setSelected] = useState([]);
  const [search, setSearch] = useState("");
  const [redirect, setRedirect] = useState("");
  const classes = useStyles();

  const handleSearch = (search) => {
    setSelected([]);
    setSearch(search);
  };

  const handleSelectAll = (cars) => {
    setSelected(cars);
  };

  const handleSelect = (event, key) => {
    try {
      let newSelected;
      if (event.target.checked) {
        newSelected = [...selected];
        newSelected.push(key);
      } else {
        newSelected = selected.filter((vin) => vin !== key);
      }
      setSelected(newSelected);
    } catch (e) {
      logger.warn(e.stack);
    }
  };

  const onSubmit = async (event) => {
    try {
      event.preventDefault();
      const data = {
        package_id: parseInt(packageid),
        vins: selected,
      };
      await createCarUpdates(data, token);
      setMessage(
        `Deployed ${packageName} ${version} to ${selected.length} cars`
      );
      setRedirect(`/carupdate-status/${packageid}`);
    } catch (e) {
      setMessage(e.message);
      logger.warn(e.stack);
    }
  };

  const getData = async () => {
    try {
      getPackages({ id: parseInt(packageid) }, token);
    } catch (e) {
      setMessage(e.message);
      logger.warn(e.stack);
    }
  };

  useEffect(() => {
    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  useEffect(() => {
    setTitle(`Deploy ${packageName} ${version}`);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [packageName, version]);

  useEffect(() => {
    if (!packages || packages.length === 0) return;
    var data = packages[0];

    setPackageName(data.package_name);
    setVersion(data.version);
    setDescription(data.desc || "");
    setCreateDate(tsLocalDateTimeString(data.timestamp));
  }, [packages]);

  if (redirect.length > 0) {
    return <Redirect to={redirect} />;
  }

  return (
    <div className={classes.paper}>
      <form className={classes.form} noValidate action="{onSubmit}">
        <Typography variant="body2">
          Created {createDate}. {description || "No description"}
        </Typography>
        <Grid container className={classes.root} spacing={2}>
          <Grid item md={10}>
            <SearchField classes={classes} onSearch={handleSearch} />
            <div
              className={classes.labelInline}
            >{`${selected.length} Selected`}</div>
          </Grid>
          <Grid item md={2} style={{ textAlign: "right" }}>
            <Button
              type="submit"
              disabled={busy || selected.length === 0}
              fullWidth
              variant="contained"
              color="primary"
              className={classes.formControl}
              onClick={onSubmit}
            >
              {busy ? "Deploying..." : "Deploy"}
            </Button>
          </Grid>
        </Grid>
        <CarSelectionTable
          classes={classes}
          token={token}
          search={{ search }}
          selected={selected}
          onSelect={handleSelect}
          onSelectAll={handleSelectAll}
        />
      </form>
    </div>
  );
};

const UpdatePackageDeployForm = () => (
  <VehicleProvider>
    <UpdatesProvider>
      <MainForm />
    </UpdatesProvider>
  </VehicleProvider>
);

export default UpdatePackageDeployForm;