70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import { LoaderFunctionArgs, json, redirect, MetaFunction } from "@remix-run/node";
|
|
import i18n from "~/i18next.server";
|
|
import serverRequest, { getToken } from "~/lib/request.server";
|
|
import { MeUser } from "~/lib/api/user";
|
|
import { Link, Outlet, useLocation } from "@remix-run/react";
|
|
import { Nav } from "react-bootstrap";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
|
return [{ title: `${data?.meta.title || "Settings"} • pronouns.cc` }];
|
|
};
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const t = await i18n.getFixedT(request);
|
|
const token = getToken(request);
|
|
|
|
if (token) {
|
|
try {
|
|
const user = await serverRequest<MeUser>("GET", "/users/@me", { token });
|
|
return json({ user, meta: { title: t("settings.title") } });
|
|
} catch (e) {
|
|
return redirect("/auth/log-in");
|
|
}
|
|
}
|
|
|
|
return redirect("/auth/log-in");
|
|
};
|
|
|
|
export default function SettingsLayout() {
|
|
const { t } = useTranslation();
|
|
const { pathname } = useLocation();
|
|
|
|
const isActive = (matches: string[] | string, startsWith: boolean = false) =>
|
|
startsWith
|
|
? typeof matches === "string"
|
|
? pathname.startsWith(matches)
|
|
: matches.some((m) => pathname.startsWith(m))
|
|
: typeof matches === "string"
|
|
? matches === pathname
|
|
: matches.includes(pathname);
|
|
|
|
return (
|
|
<>
|
|
<Nav variant="pills" justify fill className="flex-column flex-md-row">
|
|
<Nav.Link
|
|
active={isActive(["/settings", "/settings/force-log-out"])}
|
|
as={Link}
|
|
to="/settings"
|
|
>
|
|
{t("settings.nav.general-information")}
|
|
</Nav.Link>
|
|
<Nav.Link active={isActive("/settings/profile", true)} as={Link} to="/settings/profile">
|
|
{t("settings.nav.profile")}
|
|
</Nav.Link>
|
|
<Nav.Link active={isActive("/settings/members", true)} as={Link} to="/settings/members">
|
|
{t("settings.nav.members")}
|
|
</Nav.Link>
|
|
<Nav.Link active={isActive("/settings/auth", true)} as={Link} to="/settings/auth">
|
|
{t("settings.nav.authentication")}
|
|
</Nav.Link>
|
|
<Nav.Link active={isActive("/settings/export")} as={Link} to="/settings/export">
|
|
{t("settings.nav.export")}
|
|
</Nav.Link>
|
|
</Nav>
|
|
<div className="my-3">
|
|
<Outlet />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|