52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { useQuery } from "react-query";
|
|
import { fetchGuildInfo } from "../../api";
|
|
import { GuildError } from "./GuildError";
|
|
import { createPortal, PropsWithChildren } from "preact/compat";
|
|
import { Import } from "../Import";
|
|
import { useGuild } from "../App/useGuild";
|
|
import { Link } from "wouter";
|
|
import { usePathname } from "wouter/use-browser-location";
|
|
|
|
import "./index.scss";
|
|
|
|
export const Guild = ({ children }: PropsWithChildren) => {
|
|
const guild = useGuild();
|
|
const { isSuccess, data: guildInfo } = useQuery(fetchGuildInfo(guild));
|
|
|
|
if (!isSuccess) {
|
|
return <></>;
|
|
} else if (guildInfo.error) {
|
|
return <GuildError />;
|
|
} else {
|
|
const importModal = createPortal(<Import />, document.getElementById("bottom-sidebar"));
|
|
const path = usePathname();
|
|
|
|
return (
|
|
<>
|
|
{importModal}
|
|
<div class="page-links">
|
|
<Link
|
|
class={`button is-outlined is-success is-small ${path.endsWith("reminders") && "is-focused"}`}
|
|
href={`/${guild}/reminders`}
|
|
>
|
|
<span>Reminders</span>
|
|
<span class="icon">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</span>
|
|
</Link>
|
|
<Link
|
|
class={`button is-outlined is-success is-small ${path.endsWith("todos") && "is-focused"}`}
|
|
href={`/${guild}/todos`}
|
|
>
|
|
<span>Todo lists</span>
|
|
<span class="icon">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
{children}
|
|
</>
|
|
);
|
|
}
|
|
};
|