From 562ecc46bd64ae1142cb203c86944e50dc148687 Mon Sep 17 00:00:00 2001 From: sam Date: Mon, 30 Sep 2024 22:05:14 +0200 Subject: [PATCH] feat(frontend): grab limits from API, add created time + member count to settings --- Foxnouns.Frontend/app/env.server.ts | 6 + Foxnouns.Frontend/app/lib/api/meta.ts | 5 + Foxnouns.Frontend/app/lib/utils.ts | 4 + .../app/routes/settings._index/route.tsx | 51 ++++- Foxnouns.Frontend/package.json | 2 + Foxnouns.Frontend/public/locales/en.json | 210 +++++++++--------- Foxnouns.Frontend/yarn.lock | 10 + 7 files changed, 174 insertions(+), 114 deletions(-) diff --git a/Foxnouns.Frontend/app/env.server.ts b/Foxnouns.Frontend/app/env.server.ts index 2add747..24870fe 100644 --- a/Foxnouns.Frontend/app/env.server.ts +++ b/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); diff --git a/Foxnouns.Frontend/app/lib/api/meta.ts b/Foxnouns.Frontend/app/lib/api/meta.ts index 89f1aa3..8f67ada 100644 --- a/Foxnouns.Frontend/app/lib/api/meta.ts +++ b/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; +}; diff --git a/Foxnouns.Frontend/app/lib/utils.ts b/Foxnouns.Frontend/app/lib/utils.ts index 89b9f0f..f91176d 100644 --- a/Foxnouns.Frontend/app/lib/utils.ts +++ b/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); diff --git a/Foxnouns.Frontend/app/routes/settings._index/route.tsx b/Foxnouns.Frontend/app/routes/settings._index/route.tsx index 38ccd19..de202a3 100644 --- a/Foxnouns.Frontend/app/routes/settings._index/route.tsx +++ b/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("GET", "/users/@me/members", { token }); + return json({ members, maxMemberCount: limits.member_count }); +}; export default function SettingsIndex() { + const { members, maxMemberCount } = useLoaderData(); const { user } = useRouteLoaderData("routes/settings")!; const { t } = useTranslation(); - - return <> - - - - - -
{t("settings.general.id")}{user.id}
- + + const createdAt = idTimestamp(user.id); + + return ( + <> + + + + + + + + + + + + + + + +
{t("settings.general.id")} + {user.id} +
{t("settings.general.created")}{createdAt.toLocaleString(DateTime.DATETIME_MED)}
{t("settings.general.member-count")} + {members.length}/{maxMemberCount} +
+ + ); } diff --git a/Foxnouns.Frontend/package.json b/Foxnouns.Frontend/package.json index af6e5cd..6db78c8 100644 --- a/Foxnouns.Frontend/package.json +++ b/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", diff --git a/Foxnouns.Frontend/public/locales/en.json b/Foxnouns.Frontend/public/locales/en.json index da882a8..0baebf2 100644 --- a/Foxnouns.Frontend/public/locales/en.json +++ b/Foxnouns.Frontend/public/locales/en.json @@ -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}} is not allowed here. Allowed values are: <4>{{allowedValues}}", - "generic": "The value <1>{{actualValue}} 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 profile.<3><4>Edit your profile", - "create-member-button": "Create member", - "no-members-blurb": "You don't have any members yet.<1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)" - }, - "member": { - "avatar-alt": "Avatar for {{name}}", - "own-profile-alert": "You are currently viewing the <1>public profile of {{memberName}}.<5><6>Edit profile", - "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}}!", - "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.", - "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}} is not allowed here. Allowed values are: <4>{{allowedValues}}", + "generic": "The value <1>{{actualValue}} 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 profile.<3><4>Edit your profile", + "create-member-button": "Create member", + "no-members-blurb": "You don't have any members yet.<1>Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.<3>You can create a new member with the \"Create member\" button above. <6>(only you can see this)" + }, + "member": { + "avatar-alt": "Avatar for {{name}}", + "own-profile-alert": "You are currently viewing the <1>public profile of {{memberName}}.<5><6>Edit profile", + "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}}!", + "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.", + "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" + } + } } diff --git a/Foxnouns.Frontend/yarn.lock b/Foxnouns.Frontend/yarn.lock index 4596d08..a987e09 100644 --- a/Foxnouns.Frontend/yarn.lock +++ b/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"