sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(frontend): grab limits from API, add created time + member count to settings

Browse source
This commit is contained in:
sam 2024-09-30 22:05:14 +02:00
parent 4002893323
commit 562ecc46bd
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
7 changed files with 174 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

51
Foxnouns.Frontend/app/routes/settings._index/route.tsx
View file

@ -1,18 +1,49 @@
import { Table } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { useRouteLoaderData } from "@remix-run/react";
import { useLoaderData, useRouteLoaderData } from "@remix-run/react";
import { loader as settingsLoader } from "../settings/route";
import { LoaderFunctionArgs, json } from "@remix-run/node";
import serverRequest, { getToken } from "~/lib/request.server";
import { PartialMember } from "~/lib/api/user";
import { limits } from "~/env.server";
import { DateTime } from "luxon";
import { idTimestamp } from "~/lib/utils";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const token = getToken(request);
const members = await serverRequest<PartialMember[]>("GET", "/users/@me/members", { token });
return json({ members, maxMemberCount: limits.member_count });
};
export default function SettingsIndex() {
const { members, maxMemberCount } = useLoaderData<typeof loader>();
const { user } = useRouteLoaderData<typeof settingsLoader>("routes/settings")!;
const { t } = useTranslation();
return <>
<Table striped bordered>
<tr>
<th scope="row">{t("settings.general.id")}</th>
<td><code>{user.id}</code></td>
</tr>
</Table>
</>
const createdAt = idTimestamp(user.id);
return (
<>
<Table striped bordered>
<tbody>
<tr>
<th scope="row">{t("settings.general.id")}</th>
<td>
<code>{user.id}</code>
</td>
</tr>
<tr>
<th scope="row">{t("settings.general.created")}</th>
<td>{createdAt.toLocaleString(DateTime.DATETIME_MED)}</td>
</tr>
<tr>
<th scope="row">{t("settings.general.member-count")}</th>
<td>
{members.length}/{maxMemberCount}
</td>
</tr>
</tbody>
</Table>
</>
);
}