VirtWeb/virtweb_frontend/src/widgets/VirtWebAppBar.tsx

import { mdiLogout, mdiServer } from "@mdi/js";
import Icon from "@mdi/react";
import { AppBar, IconButton, Toolbar, Typography } from "@mui/material";
import { RouterLink } from "./RouterLink";
import { AsyncWidget } from "./AsyncWidget";
import { AuthApi, AuthInfo } from "../api/AuthApi";
import React from "react";
import { useAuth } from "../App";
import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";

export function VirtWebAppBar(): React.ReactElement {
  const loadingMessage = useLoadingMessage();

  const auth = useAuth();

  const [info, setInfo] = React.useState<null | AuthInfo>(null);

  const load = async () => {
    setInfo(await AuthApi.GetAuthInfo());
  };

  const signOut = async () => {
    loadingMessage.show("Signing out...");
    try {
      await AuthApi.SignOut();
    } catch (e) {
      console.error(e);
    }

    auth.setSignedIn(false);
    loadingMessage.hide();

    window.location.href = "/";
  };

  return (
    <AsyncWidget
      loadKey={0}
      load={load}
      errMsg="Failed to load user information!"
      build={() => (
        <AppBar position="sticky">
          <Toolbar>
            <Icon
              path={mdiServer}
              style={{ height: "1.2rem", marginRight: "1rem" }}
            />
            <Typography variant="h6" color="inherit" noWrap>
              <RouterLink to={"/"}>VirtWeb</RouterLink>
            </Typography>
            <div style={{ flex: 1 }}></div>

            <Typography variant="body1">{info?.id}</Typography>

            <IconButton onClick={signOut}>
              <Icon path={mdiLogout} size={1} />
            </IconButton>
          </Toolbar>
        </AppBar>
      )}
    />
  );
}