SolarEnergy/central_frontend/src/routes/DevicesRoute.tsx

import RefreshIcon from "@mui/icons-material/Refresh";
import VisibilityIcon from "@mui/icons-material/Visibility";
import {
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tooltip,
} from "@mui/material";
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { Device, DeviceApi, DevicesState, DeviceURL } from "../api/DeviceApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
import { TimeWidget } from "../widgets/TimeWidget";

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

  const [list, setList] = React.useState<Device[] | undefined>();
  const [states, setStates] = React.useState<DevicesState | undefined>();

  const load = async () => {
    setList(await DeviceApi.ValidatedList());
    setStates(await DeviceApi.DevicesState());
  };

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

  return (
    <SolarEnergyRouteContainer
      label="Devices"
      actions={
        <Tooltip title="Refresh table">
          <IconButton onClick={reload}>
            <RefreshIcon />
          </IconButton>
        </Tooltip>
      }
    >
      <AsyncWidget
        loadKey={loadKey.current}
        ready={!!list && !!states}
        errMsg="Failed to load the list of validated devices!"
        load={load}
        build={() => (
          <ValidatedDevicesList
            onReload={reload}
            list={list!}
            states={states!}
          />
        )}
      />
    </SolarEnergyRouteContainer>
  );
}

function ValidatedDevicesList(p: {
  list: Device[];
  states: DevicesState;
  onReload: () => void;
}): React.ReactElement {
  const navigate = useNavigate();

  if (p.list.length === 0) {
    return <p>There is no device validated yet.</p>;
  }

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>#</TableCell>
            <TableCell>Model</TableCell>
            <TableCell>Version</TableCell>
            <TableCell>Max number of relays</TableCell>
            <TableCell>Created</TableCell>
            <TableCell>Updated</TableCell>
            <TableCell>Status</TableCell>
            <TableCell></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {p.list.map((dev) => (
            <TableRow
              hover
              key={dev.id}
              onDoubleClick={() => navigate(DeviceURL(dev))}
            >
              <TableCell component="th" scope="row">
                {dev.id}
              </TableCell>
              <TableCell>{dev.info.reference}</TableCell>
              <TableCell>{dev.info.version}</TableCell>
              <TableCell>{dev.info.max_relays}</TableCell>
              <TableCell>
                <TimeWidget time={dev.time_create} />
              </TableCell>
              <TableCell>
                <TimeWidget time={dev.time_update} />
              </TableCell>
              <TableCell align="center">
                {p.states.get(dev.id)!.online ? (
                  <strong>Online</strong>
                ) : (
                  <em>Offline</em>
                )}
                <br />
                <TimeWidget diff time={p.states.get(dev.id)!.last_ping} />
              </TableCell>
              <TableCell>
                <Tooltip title="Open device page">
                  <Link to={DeviceURL(dev)}>
                    <IconButton>
                      <VisibilityIcon />
                    </IconButton>
                  </Link>
                </Tooltip>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}