SolarEnergy/central_frontend/src/routes/RelaysListRoute.tsx

import CheckIcon from "@mui/icons-material/Check";
import DeleteIcon from "@mui/icons-material/Delete";
import RefreshIcon from "@mui/icons-material/Refresh";
import {
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tooltip,
} from "@mui/material";
import React from "react";
import { Device, DeviceApi, DeviceRelay } from "../api/DeviceApi";
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
import { TimeWidget } from "../widgets/TimeWidget";
import { RelayApi } from "../api/RelayApi";

export function RelaysListRoute(): React.ReactElement {
  const loadKey = React.useRef(1);

  const [list, setList] = React.useState<DeviceRelay[] | undefined>();

  const load = async () => {
    setList(await RelayApi.GetList());
  };

  const reload = () => {
    loadKey.current += 1;
    setList(undefined);
  };

  return (
    <SolarEnergyRouteContainer
      label="Relays list"
      actions={
        <Tooltip title="Refresh list">
          <IconButton onClick={reload}>
            <RefreshIcon />
          </IconButton>
        </Tooltip>
      }
    >
      <AsyncWidget
        loadKey={loadKey.current}
        ready={!!list}
        errMsg="Failed to load the list of relays!"
        load={load}
        build={() => <RelaysList onReload={reload} list={list!} />}
      />
    </SolarEnergyRouteContainer>
  );
}

function RelaysList(p: {
  list: DeviceRelay[];
  onReload: () => void;
}): React.ReactElement {
  return <>todo</>;
}