45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import { Link, Outlet, useNavigate } from "react-router-dom";
|
||
|
|
import styles from "./Root.module.scss";
|
||
|
|
import { useQuery } from "react-query";
|
||
|
|
import { MenuItem } from "@blueprintjs/core";
|
||
|
|
import { getServices } from "./lib/api";
|
||
|
|
|
||
|
|
export default function Root() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const servicesQuery = useQuery("service/list", getServices);
|
||
|
|
|
||
|
|
if (servicesQuery.status !== "success") {
|
||
|
|
console.log("SHIET", servicesQuery);
|
||
|
|
return <>Loading...</>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.container}>
|
||
|
|
<div className={styles.sidebar}>
|
||
|
|
<h1 style={{ margin: "6px" }}>
|
||
|
|
<Link to="/">aah</Link>
|
||
|
|
</h1>
|
||
|
|
<small>"no honey, we have aws at home" ~mom</small>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<p>Services:</p>
|
||
|
|
{servicesQuery.data.map((service) => {
|
||
|
|
let icon;
|
||
|
|
if (service.status === "New") {
|
||
|
|
icon = "clean";
|
||
|
|
}
|
||
|
|
const text = `${service.name} (${service.id})`;
|
||
|
|
const goto = () => navigate(`/service/${service.id}`);
|
||
|
|
return (
|
||
|
|
<MenuItem icon={icon} text={text} key={service.id} onClick={goto} />
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
<div className={styles.mainContent}>
|
||
|
|
<Outlet />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|