sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(frontend): add members to user page

Browse source
This commit is contained in:
sam 2024-09-25 19:48:28 +02:00
parent f81ae97821
commit 6f79d35f11
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
7 changed files with 212 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Foxnouns.Frontend/app/components/StatusIcon.tsx
View file

@ -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<string, CustomPreference>;
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();

4
Foxnouns.Frontend/app/components/StatusLine.tsx
View file

@ -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<string, CustomPreference>;
}) {
const mergedPrefs = Object.assign({}, defaultPreferences, preferences);
const mergedPrefs = mergePreferences(preferences);
const currentPref =
entry.status in mergedPrefs ? mergedPrefs[entry.status] : defaultPreferences.missing;

7
Foxnouns.Frontend/app/lib/api/user.ts
View file

@ -3,6 +3,7 @@ export type PartialUser = {
username: string;
display_name?: string | null;
avatar_url?: string | null;
custom_preferences: Record<string, CustomPreference>;
};
export type User = PartialUser & {
@ -12,7 +13,6 @@ export type User = PartialUser & {
names: FieldEntry[];
pronouns: Pronoun[];
fields: Field[];
custom_preferences: Record<string, CustomPreference>;
};
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<string, CustomPreference>) {
return Object.assign({}, defaultPreferences, prefs);
}
export const defaultPreferences = Object.freeze({
favourite: {
icon: "heart-fill",

1
Foxnouns.Frontend/app/lib/utils.ts
View file

@ -0,0 +1 @@
export const defaultAvatarUrl = "https://pronouns.cc/default/512.webp";

74
Foxnouns.Frontend/app/routes/$username/MemberCard.tsx
View file

@ -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 (
<div className="col">
<Link to={`/@${user.username}/${member.name}`}>
<img
src={member.avatar_url || defaultAvatarUrl}
alt={t("user.member-avatar-alt", { name: member.name })}
width={200}
height={200}
loading="lazy"
className="rounded-circle img-fluid"
/>
</Link>
<p className="m-2">
<Link to={`/@${user.username}/${member.name}`}>
{member.display_name ?? member.name}
{member.unlisted === true && (
<>
<OverlayTrigger
key={member.id}
placement="top"
overlay={
<Tooltip id={member.id} aria-hidden={true}>
{t("user.member-hidden")}
</Tooltip>
}
>
<span className="d-inline-block">
<Lock aria-hidden={true} style={{ pointerEvents: "none" }} />
</span>
</OverlayTrigger>
</>
)}
</Link>
{displayedPronouns && <>{displayedPronouns}</>}
</p>
</div>
);
}

45
Foxnouns.Frontend/app/routes/$username/route.tsx
View file

@ -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<typeof loader> = ({ data }) => {
const { user } = data!;
@ -39,16 +42,17 @@ export default function UserPage() {
const { user } = useLoaderData<typeof loader>();
const { meUser } = useRouteLoaderData<typeof rootLoader>("root") || { meUser: undefined };
const isMeUser = meUser && meUser.id === user.id;
const bio = renderMarkdown(user.bio);
return (
<>
{meUser && meUser.id === user.id && (
{isMeUser && (
<Alert variant="secondary">
<Trans t={t} i18nKey="user.own-profile-alert">
You are currently viewing your <strong>public</strong> profile.
<br />
<Link to={`/@${user.username}/edit`}>Edit your profile</Link>
<Link to="/edit/profile">Edit your profile</Link>
</Trans>
</Alert>
)}
@ -56,7 +60,7 @@ export default function UserPage() {
<div className="row">
<div className="col-md-4 text-center">
<img
src={user.avatar_url || "https://pronouns.cc/default/512.webp"}
src={user.avatar_url || defaultAvatarUrl}
alt={t("user.avatar-alt", { username: user.username })}
width={200}
height={200}
@ -116,6 +120,39 @@ export default function UserPage() {
))}
</div>
</div>
{user.members.length > 0 ||
(isMeUser && (
<>
<hr />
<h2>
{user.member_title || t("user.heading.members")}{" "}
{/* @ts-expect-error using as=Link causes an error here, even though it runs completely fine */}
<Button as={Link} to="/settings/members/create" variant="success">
<PersonPlusFill /> {t("user.create-member-button")}
</Button>
</h2>
<div className="grid">
{user.members.length === 0 ? (
<div>
<Trans t={t} i18nKey="user.no-members-blurb">
You don&apos;t have any members yet.
<br />
Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms.
<br />
You can create a new member with the &quot;Create member&quot; button above.{" "}
<span className="text-muted">(only you can see this)</span>
</Trans>
</div>
) : (
<div className="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 text-center">
{user.members.map((member, i) => (
<MemberCard user={user} member={member} key={i} />
))}
</div>
)}
</div>
</>
))}
</>
);
}

171
Foxnouns.Frontend/public/locales/en.json
View file

@ -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}}</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",
"theme": "Theme",
"theme-auto": "Automatic",
"theme-dark": "Dark",
"theme-light": "Light"
},
"user": {
"own-profile-alert": "You are currently viewing your <1>public</1> profile.<3></3><4>Edit your profile</4>",
"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}}</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"
}
"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": {
"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>",
"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></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>"
},
"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"
}
}