VirtWeb/virtweb_frontend/src/routes/EditAPITokenRoute.tsx

import { Button } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  APIToken,
  APITokenURL,
  CreatedAPIToken,
  TokensApi,
} from "../api/TokensApi";
import { CreatedTokenDialog } from "../dialogs/CreatedTokenDialog";
import { useAlert } from "../hooks/providers/AlertDialogProvider";
import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
import { time } from "../utils/DateUtils";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import {
  APITokenDetails,
  TokenWidgetStatus,
} from "../widgets/tokens/APITokenDetails";

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

  const [createdToken, setCreatedToken] = React.useState<
    CreatedAPIToken | undefined
  >();

  const [token] = React.useState<APIToken>({
    id: "",
    name: "",
    description: "",
    created: time(),
    updated: time(),
    last_used: time(),
    rights: [],
  });

  const createApiToken = async (n: APIToken) => {
    try {
      const res = await TokensApi.Create(n);
      snackbar("The api token was successfully created!");
      setCreatedToken(res);
    } catch (e) {
      console.error(e);
      alert(`Failed to create API token!\n${e}`);
    }
  };

  return (
    <>
      {createdToken && <CreatedTokenDialog createdToken={createdToken} />}

      <EditApiTokenRouteInner
        token={token}
        creating={true}
        onCancel={() => navigate("/tokens")}
        onSave={createApiToken}
      />
    </>
  );
}

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

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

  const [token, setToken] = React.useState<APIToken | undefined>();

  const load = async () => {
    setToken(await TokensApi.GetSingle(id!));
  };

  const updateApiToken = async (n: APIToken) => {
    try {
      await TokensApi.Update(n);
      snackbar("The token was successfully updated!");
      navigate(APITokenURL(token!));
    } catch (e) {
      console.error(e);
      alert(`Failed to update token!\n${e}`);
    }
  };

  return (
    <AsyncWidget
      loadKey={id}
      ready={token !== undefined}
      errMsg="Failed to fetch API token informations!"
      load={load}
      build={() => (
        <EditApiTokenRouteInner
          token={token!}
          creating={false}
          onCancel={() => navigate(`/token/${id}`)}
          onSave={updateApiToken}
        />
      )}
    />
  );
}

function EditApiTokenRouteInner(p: {
  token: APIToken;
  creating: boolean;
  onCancel: () => void;
  onSave: (token: APIToken) => Promise<void>;
}): React.ReactElement {
  const loadingMessage = useLoadingMessage();

  const [changed, setChanged] = React.useState(false);

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

  const valueChanged = () => {
    setChanged(true);
    forceUpdate();
  };

  const save = async () => {
    loadingMessage.show("Saving API token configuration...");
    await p.onSave(p.token);
    loadingMessage.hide();
  };

  return (
    <VirtWebRouteContainer
      label={p.creating ? "Create an API Token" : "Edit API Token"}
      actions={
        <span>
          {changed && (
            <Button
              variant="contained"
              onClick={save}
              style={{ marginRight: "10px" }}
            >
              {p.creating ? "Create" : "Save"}
            </Button>
          )}
          <Button onClick={p.onCancel} variant="outlined">
            Cancel
          </Button>
        </span>
      }
    >
      <APITokenDetails
        token={p.token}
        status={
          p.creating ? TokenWidgetStatus.Create : TokenWidgetStatus.Update
        }
        onChange={valueChanged}
      />
    </VirtWebRouteContainer>
  );
}