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

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

View file

@ -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);

View file

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

View file

@ -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);

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

View file

@ -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",

View file

@ -1,106 +1,108 @@
{
"error": {
"heading": "An error occurred",
"validation": {
"too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.",
"too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.",
"disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>",
"generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}",
"generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}"
},
"errors": {
"authentication-error": "There was an error validating your credentials.",
"authentication-required": "You need to log in.",
"bad-request": "Server rejected your input, please check anything for errors.",
"forbidden": "You are not allowed to perform that action.",
"generic-error": "An unknown error occurred.",
"internal-server-error": "Server experienced an internal error, please try again later.",
"member-not-found": "Member not found, please check your spelling and try again.",
"user-not-found": "User not found, please check your spelling and try again."
},
"title": "An error occurred",
"more-info": "Click here for a more detailed error"
},
"navbar": {
"view-profile": "View profile",
"settings": "Settings",
"log-out": "Log out",
"log-in": "Log in or sign up"
},
"user": {
"avatar-alt": "Avatar for @{{username}}",
"heading": {
"names": "Names",
"pronouns": "Pronouns",
"members": "Members"
},
"member-avatar-alt": "Avatar for {{name}}",
"member-hidden": "This member is unlisted, and not shown in your public member list.",
"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
"create-member-button": "Create member",
"no-members-blurb": "You don't have any members yet.<1></1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3></3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)</6>"
},
"member": {
"avatar-alt": "Avatar for {{name}}",
"own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit profile</6>",
"back": "Back to {{name}}"
},
"log-in": {
"callback": {
"title": {
"discord-success": "Log in with Discord",
"discord-register": "Register with Discord"
},
"success": "Successfully logged in!",
"success-link": "Welcome back, <1>@{{username}}</1>!",
"redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
"remote-username": {
"discord": "Your discord username"
},
"username": "Username",
"sign-up-button": "Sign up",
"invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.",
"invalid-username": "Invalid username",
"username-taken": "That username is already taken, please try something else."
},
"title": "Log in",
"form-title": "Log in with email",
"email": "Email address",
"password": "Password",
"log-in-button": "Log in",
"register-with-email": "Register with email",
"3rd-party": {
"title": "Log in with another service",
"desc": "If you prefer, you can also log in with one of these services:",
"discord": "Log in with Discord",
"google": "Log in with Google",
"tumblr": "Log in with Tumblr"
},
"invalid-credentials": "Invalid email address or password, please check your spelling and try again."
},
"welcome": {
"title": "Welcome",
"header": "Welcome to pronouns.cc!",
"blurb": "{welcome.blurb}",
"customize-profile": "Customize your profile",
"customize-profile-blurb": "{welcome.customize-profile-blurb}",
"create-members": "Create members",
"create-members-blurb": "{welcome.create-members-blurb}",
"custom-preferences": "Customize your preferences",
"custom-preferences-blurb": "{welcome.custom-preferences-blurb}",
"profile-button": "Go to your profile"
},
"settings": {
"general": {
"id": "Your user ID"
},
"title": "Settings",
"nav": {
"general-information": "General information",
"profile": "Base profile",
"members": "Members",
"authentication": "Authentication",
"export": "Export your data"
}
}
"error": {
"heading": "An error occurred",
"validation": {
"too-long": "Value is too long, maximum length is {{maxLength}}, current length is {{actualLength}}.",
"too-short": "Value is too short, minimum length is {{minLength}}, current length is {{actualLength}}.",
"disallowed-value": "The value <1>{{actualValue}}</1> is not allowed here. Allowed values are: <4>{{allowedValues}}</4>",
"generic": "The value <1>{{actualValue}}</1> is not allowed here. Reason: {{reason}}",
"generic-no-value": "The value you entered is not allowed here. Reason: {{reason}}"
},
"errors": {
"authentication-error": "There was an error validating your credentials.",
"authentication-required": "You need to log in.",
"bad-request": "Server rejected your input, please check anything for errors.",
"forbidden": "You are not allowed to perform that action.",
"generic-error": "An unknown error occurred.",
"internal-server-error": "Server experienced an internal error, please try again later.",
"member-not-found": "Member not found, please check your spelling and try again.",
"user-not-found": "User not found, please check your spelling and try again."
},
"title": "An error occurred",
"more-info": "Click here for a more detailed error"
},
"navbar": {
"view-profile": "View profile",
"settings": "Settings",
"log-out": "Log out",
"log-in": "Log in or sign up"
},
"user": {
"avatar-alt": "Avatar for @{{username}}",
"heading": {
"names": "Names",
"pronouns": "Pronouns",
"members": "Members"
},
"member-avatar-alt": "Avatar for {{name}}",
"member-hidden": "This member is unlisted, and not shown in your public member list.",
"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
"create-member-button": "Create member",
"no-members-blurb": "You don't have any members yet.<1></1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3></3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)</6>"
},
"member": {
"avatar-alt": "Avatar for {{name}}",
"own-profile-alert": "You are currently viewing the <1>public</1> profile of {{memberName}}.<5></5><6>Edit profile</6>",
"back": "Back to {{name}}"
},
"log-in": {
"callback": {
"title": {
"discord-success": "Log in with Discord",
"discord-register": "Register with Discord"
},
"success": "Successfully logged in!",
"success-link": "Welcome back, <1>@{{username}}</1>!",
"redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
"remote-username": {
"discord": "Your discord username"
},
"username": "Username",
"sign-up-button": "Sign up",
"invalid-ticket": "Invalid ticket (it might have been too long since you logged in with Discord), please <2>try again</2>.",
"invalid-username": "Invalid username",
"username-taken": "That username is already taken, please try something else."
},
"title": "Log in",
"form-title": "Log in with email",
"email": "Email address",
"password": "Password",
"log-in-button": "Log in",
"register-with-email": "Register with email",
"3rd-party": {
"title": "Log in with another service",
"desc": "If you prefer, you can also log in with one of these services:",
"discord": "Log in with Discord",
"google": "Log in with Google",
"tumblr": "Log in with Tumblr"
},
"invalid-credentials": "Invalid email address or password, please check your spelling and try again."
},
"welcome": {
"title": "Welcome",
"header": "Welcome to pronouns.cc!",
"blurb": "{welcome.blurb}",
"customize-profile": "Customize your profile",
"customize-profile-blurb": "{welcome.customize-profile-blurb}",
"create-members": "Create members",
"create-members-blurb": "{welcome.create-members-blurb}",
"custom-preferences": "Customize your preferences",
"custom-preferences-blurb": "{welcome.custom-preferences-blurb}",
"profile-button": "Go to your profile"
},
"settings": {
"general": {
"id": "Your user ID",
"created": "Account created at",
"member-count": "Members"
},
"title": "Settings",
"nav": {
"general-information": "General information",
"profile": "Base profile",
"members": "Members",
"authentication": "Authentication",
"export": "Export your data"
}
}
}

View file

@ -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"