From 6f79d35f11c86d938dc3b3c6b42cc4cc3775f61a Mon Sep 17 00:00:00 2001 From: sam Date: Wed, 25 Sep 2024 19:48:28 +0200 Subject: [PATCH] feat(frontend): add members to user page --- .../app/components/StatusIcon.tsx | 4 +- .../app/components/StatusLine.tsx | 4 +- Foxnouns.Frontend/app/lib/api/user.ts | 7 +- Foxnouns.Frontend/app/lib/utils.ts | 1 + .../app/routes/$username/MemberCard.tsx | 74 ++++++++ .../app/routes/$username/route.tsx | 45 ++++- Foxnouns.Frontend/public/locales/en.json | 171 +++++++++--------- 7 files changed, 212 insertions(+), 94 deletions(-) diff --git a/Foxnouns.Frontend/app/components/StatusIcon.tsx b/Foxnouns.Frontend/app/components/StatusIcon.tsx index d7a068e..9f2fa89 100644 --- a/Foxnouns.Frontend/app/components/StatusIcon.tsx +++ b/Foxnouns.Frontend/app/components/StatusIcon.tsx @@ -1,4 +1,4 @@ -import { CustomPreference, defaultPreferences } from "~/lib/api/user"; +import { CustomPreference, defaultPreferences, mergePreferences } from "~/lib/api/user"; import { OverlayTrigger, Tooltip } from "react-bootstrap"; import Icon from "~/components/KeyedIcon"; @@ -9,7 +9,7 @@ export default function StatusIcon({ preferences: Record; status: string; }) { - const mergedPrefs = Object.assign({}, defaultPreferences, preferences); + const mergedPrefs = mergePreferences(preferences); const currentPref = status in mergedPrefs ? mergedPrefs[status] : defaultPreferences.missing; const id = crypto.randomUUID(); diff --git a/Foxnouns.Frontend/app/components/StatusLine.tsx b/Foxnouns.Frontend/app/components/StatusLine.tsx index b39222f..704df75 100644 --- a/Foxnouns.Frontend/app/components/StatusLine.tsx +++ b/Foxnouns.Frontend/app/components/StatusLine.tsx @@ -2,11 +2,11 @@ import { CustomPreference, defaultPreferences, FieldEntry, + mergePreferences, PreferenceSize, Pronoun, } from "~/lib/api/user"; import classNames from "classnames"; -import { ReactNode } from "react"; import StatusIcon from "~/components/StatusIcon"; import PronounLink from "~/components/PronounLink"; @@ -17,7 +17,7 @@ export default function StatusLine({ entry: FieldEntry | Pronoun; preferences: Record; }) { - const mergedPrefs = Object.assign({}, defaultPreferences, preferences); + const mergedPrefs = mergePreferences(preferences); const currentPref = entry.status in mergedPrefs ? mergedPrefs[entry.status] : defaultPreferences.missing; diff --git a/Foxnouns.Frontend/app/lib/api/user.ts b/Foxnouns.Frontend/app/lib/api/user.ts index 0487ea6..5dc969c 100644 --- a/Foxnouns.Frontend/app/lib/api/user.ts +++ b/Foxnouns.Frontend/app/lib/api/user.ts @@ -3,6 +3,7 @@ export type PartialUser = { username: string; display_name?: string | null; avatar_url?: string | null; + custom_preferences: Record; }; export type User = PartialUser & { @@ -12,7 +13,6 @@ export type User = PartialUser & { names: FieldEntry[]; pronouns: Pronoun[]; fields: Field[]; - custom_preferences: Record; }; export type UserWithMembers = User & { members: PartialMember[] }; @@ -35,6 +35,7 @@ export type PartialMember = { avatar_url: string | null; names: FieldEntry[]; pronouns: Pronoun[]; + unlisted: boolean | null; }; export type FieldEntry = { @@ -63,6 +64,10 @@ export enum PreferenceSize { Small = "SMALL", } +export function mergePreferences(prefs: Record) { + return Object.assign({}, defaultPreferences, prefs); +} + export const defaultPreferences = Object.freeze({ favourite: { icon: "heart-fill", diff --git a/Foxnouns.Frontend/app/lib/utils.ts b/Foxnouns.Frontend/app/lib/utils.ts index e69de29..9a8d8b5 100644 --- a/Foxnouns.Frontend/app/lib/utils.ts +++ b/Foxnouns.Frontend/app/lib/utils.ts @@ -0,0 +1 @@ +export const defaultAvatarUrl = "https://pronouns.cc/default/512.webp"; diff --git a/Foxnouns.Frontend/app/routes/$username/MemberCard.tsx b/Foxnouns.Frontend/app/routes/$username/MemberCard.tsx index e69de29..893782e 100644 --- a/Foxnouns.Frontend/app/routes/$username/MemberCard.tsx +++ b/Foxnouns.Frontend/app/routes/$username/MemberCard.tsx @@ -0,0 +1,74 @@ +import { + defaultPreferences, + mergePreferences, + PartialMember, + PartialUser, + Pronoun, +} from "~/lib/api/user"; +import { Link } from "@remix-run/react"; +import { defaultAvatarUrl } from "~/lib/utils"; +import { useTranslation } from "react-i18next"; +import { OverlayTrigger, Tooltip } from "react-bootstrap"; +import { Lock } from "react-bootstrap-icons"; + +export default function MemberCard({ user, member }: { user: PartialUser; member: PartialMember }) { + const { t } = useTranslation(); + + const mergedPrefs = mergePreferences(user.custom_preferences); + const pronouns: Pronoun[] = []; + for (const pronoun of member.pronouns) { + const pref = + pronoun.status in mergedPrefs ? mergedPrefs[pronoun.status] : defaultPreferences.missing; + if (pref.favourite) pronouns.push(pronoun); + } + + const displayedPronouns = pronouns + .map((pronoun) => { + if (pronoun.display_text) { + return pronoun.display_text; + } else { + const split = pronoun.value.split("/"); + if (split.length === 5) return split.splice(0, 2).join("/"); + return pronoun.value; + } + }) + .join(", "); + + return ( +
+ + {t("user.member-avatar-alt", + +

+ + {member.display_name ?? member.name} + {member.unlisted === true && ( + <> + + {t("user.member-hidden")} + + } + > + + + + + + )} + + {displayedPronouns && <>{displayedPronouns}} +

+
+ ); +} diff --git a/Foxnouns.Frontend/app/routes/$username/route.tsx b/Foxnouns.Frontend/app/routes/$username/route.tsx index 6a40dad..b2d6406 100644 --- a/Foxnouns.Frontend/app/routes/$username/route.tsx +++ b/Foxnouns.Frontend/app/routes/$username/route.tsx @@ -3,11 +3,14 @@ import { Link, redirect, useLoaderData, useRouteLoaderData } from "@remix-run/re import { UserWithMembers } from "~/lib/api/user"; import serverRequest from "~/lib/request.server"; import { loader as rootLoader } from "~/root"; -import { Alert } from "react-bootstrap"; +import { Alert, Button } from "react-bootstrap"; import { Trans, useTranslation } from "react-i18next"; import { renderMarkdown } from "~/lib/markdown"; import ProfileLink from "~/components/ProfileLink"; import ProfileField from "~/components/ProfileField"; +import { PersonPlusFill } from "react-bootstrap-icons"; +import { defaultAvatarUrl } from "~/lib/utils"; +import MemberCard from "~/routes/$username/MemberCard"; export const meta: MetaFunction = ({ data }) => { const { user } = data!; @@ -39,16 +42,17 @@ export default function UserPage() { const { user } = useLoaderData(); const { meUser } = useRouteLoaderData("root") || { meUser: undefined }; + const isMeUser = meUser && meUser.id === user.id; const bio = renderMarkdown(user.bio); return ( <> - {meUser && meUser.id === user.id && ( + {isMeUser && ( You are currently viewing your public profile.
- Edit your profile + Edit your profile )} @@ -56,7 +60,7 @@ export default function UserPage() {
{t("user.avatar-alt",
+ {user.members.length > 0 || + (isMeUser && ( + <> +
+

+ {user.member_title || t("user.heading.members")}{" "} + {/* @ts-expect-error using as=Link causes an error here, even though it runs completely fine */} + +

+
+ {user.members.length === 0 ? ( +
+ + You don't have any members yet. +
+ Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms. +
+ You can create a new member with the "Create member" button above.{" "} + (only you can see this) + +
+ ) : ( +
+ {user.members.map((member, i) => ( + + ))} +
+ )} +
+ + ))} ); } diff --git a/Foxnouns.Frontend/public/locales/en.json b/Foxnouns.Frontend/public/locales/en.json index afebe1a..20a1fa0 100644 --- a/Foxnouns.Frontend/public/locales/en.json +++ b/Foxnouns.Frontend/public/locales/en.json @@ -1,87 +1,88 @@ { - "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", - "theme": "Theme", - "theme-auto": "Automatic", - "theme-dark": "Dark", - "theme-light": "Light" - }, - "user": { - "own-profile-alert": "You are currently viewing your <1>public profile.<3><4>Edit your profile", - "avatar-alt": "Avatar for @{{username}}", - "heading": { - "names": "Names", - "pronouns": "Pronouns" - } - }, - "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" - } + "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": { + "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", + "avatar-alt": "Avatar for @{{username}}", + "heading": { + "names": "Names", + "pronouns": "Pronouns", + "members": "Members" + }, + "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)" + }, + "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" + } }