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

Foxnouns.Frontend/app/env.server.ts

@@ -1,5 +1,11 @@
 import "dotenv/config";
 import { env } from "node:process";
+import { Limits } from "~/lib/api/meta";
 
 export const API_BASE = env.API_BASE || "https://pronouns.localhost/api";
 export const LANGUAGE = env.LANGUAGE || "en";
+
+const apiLimits: Limits = await fetch(`${API_BASE}/v2/meta`)
+	.then((resp) => resp.json())
+	.then((m) => m.limits);
+export const limits: Limits = Object.freeze(apiLimits);

Foxnouns.Frontend/app/lib/api/meta.ts

@@ -9,3 +9,8 @@ export default interface Meta {
 	};
 	members: number;
 }
+
+export type Limits = {
+	member_count: number;
+	bio_length: number;
+};

Foxnouns.Frontend/app/lib/utils.ts

@@ -1,2 +1,6 @@
+import { DateTime } from "luxon";
+
 export const defaultAvatarUrl = "https://pronouns.cc/default/512.webp";
 export const tokenCookieName = "__Host-pronounscc-token";
+export const idTimestamp = (id: string) =>
+	DateTime.fromMillis(parseInt(id, 10) / (1 << 22) + 1_640_995_200_000);

Foxnouns.Frontend/app/routes/settings._index/route.tsx

@@ -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>
+		</>
+	);
 }