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

Foxnouns.Frontend/package.json

@@ -30,6 +30,7 @@
 		"i18next-fs-backend": "^2.3.2",
 		"i18next-http-backend": "^2.6.1",
 		"isbot": "^4.1.0",
+		"luxon": "^3.5.0",
 		"markdown-it": "^14.1.0",
 		"morgan": "^1.10.0",
 		"react": "^18.2.0",
@@ -46,6 +47,7 @@
 		"@types/compression": "^1.7.5",
 		"@types/cookie": "^0.6.0",
 		"@types/express": "^4.17.21",
+		"@types/luxon": "^3.4.2",
 		"@types/markdown-it": "^14.1.2",
 		"@types/morgan": "^1.9.9",
 		"@types/react": "^18.2.20",

Foxnouns.Frontend/public/locales/en.json

@@ -92,7 +92,9 @@
 	},
 	"settings": {
 		"general": {
-      "id": "Your user ID"
+			"id": "Your user ID",
+			"created": "Account created at",
+			"member-count": "Members"
 		},
 		"title": "Settings",
 		"nav": {

Foxnouns.Frontend/yarn.lock

@@ -1341,6 +1341,11 @@
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
   integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
 
+"@types/luxon@^3.4.2":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"
+  integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==
+
 "@types/markdown-it@^14.1.2":
   version "14.1.2"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
@@ -4499,6 +4504,11 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
   integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
 
+luxon@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.5.0.tgz#6b6f65c5cd1d61d1fd19dbf07ee87a50bf4b8e20"
+  integrity sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==
+
 markdown-extensions@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-1.1.1.tgz#fea03b539faeaee9b4ef02a3769b455b189f7fc3"