VirtWeb/virtweb_frontend/src/routes/EditNetworkRoute.tsx

import { useNavigate, useParams } from "react-router-dom";
import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
import { useAlert } from "../hooks/providers/AlertDialogProvider";
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
import React from "react";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { NetworkDetails } from "../widgets/net/NetworkDetails";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { Button } from "@mui/material";

export function CreateNetworkRoute(): React.ReactElement {
  const alert = useAlert();
  const snackbar = useSnackbar();
  const navigate = useNavigate();

  const [network] = React.useState<NetworkInfo>({
    name: "NewNetwork",
    forward_mode: "Isolated",
  });

  const createNetwork = async (n: NetworkInfo) => {
    try {
      const res = await NetworkApi.Create(n);
      snackbar("The network was successfully created!");
      navigate(`/net/${res.uid}`);
    } catch (e) {
      console.error(e);
      alert(`Failed to create network!\n${e}`);
    }
  };

  return (
    <EditNetworkRouteInner
      network={network}
      creating={true}
      onCancel={() => navigate("/net")}
      onSave={createNetwork}
    />
  );
}

export function EditNetworkRoute(): React.ReactElement {
  const alert = useAlert();
  const snackbar = useSnackbar();

  const { uuid } = useParams();
  const navigate = useNavigate();

  const [network, setNetwork] = React.useState<NetworkInfo | undefined>();

  const load = async () => {
    setNetwork(await NetworkApi.GetSingle(uuid!));
  };

  const updateNetwork = async (n: NetworkInfo) => {
    try {
      await NetworkApi.Update(n);
      snackbar("The network was successfully updated!");
      navigate(NetworkURL(network!));
    } catch (e) {
      console.error(e);
      alert(`Failed to update network!\n${e}`);
    }
  };

  return (
    <AsyncWidget
      loadKey={uuid}
      ready={network !== undefined}
      errMsg="Failed to fetch network information!"
      load={load}
      build={() => (
        <EditNetworkRouteInner
          network={network!}
          creating={false}
          onCancel={() => navigate(`/net/${uuid}`)}
          onSave={updateNetwork}
        />
      )}
    />
  );
}

function EditNetworkRouteInner(p: {
  network: NetworkInfo;
  creating: boolean;
  onCancel: () => void;
  onSave: (vm: NetworkInfo) => Promise<void>;
}): React.ReactElement {
  const [changed, setChanged] = React.useState(false);

  const [, updateState] = React.useState<any>();
  const forceUpdate = React.useCallback(() => updateState({}), []);

  const valueChanged = () => {
    setChanged(true);
    forceUpdate();
  };
  return (
    <VirtWebRouteContainer
      label={p.creating ? "Create a Network" : "Edit Network"}
      actions={
        <span>
          {changed && (
            <Button
              variant="contained"
              onClick={() => p.onSave(p.network)}
              style={{ marginRight: "10px" }}
            >
              {p.creating ? "Create" : "Save"}
            </Button>
          )}
          <Button onClick={p.onCancel} variant="outlined">
            Cancel
          </Button>
        </span>
      }
    >
      <NetworkDetails net={p.network} editable={true} onChange={valueChanged} />
    </VirtWebRouteContainer>
  );
}