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

feat(frontend): add member pagination

Browse source
This commit is contained in:
sam 2024-09-26 02:15:54 +02:00
parent a4a62fa6b6
commit 6ea8861da2
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
2 changed files with 150 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import { Link, redirect, useLoaderData, useRouteLoaderData } from "@remix-run/re
import { UserWithMembers } from "~/lib/api/user"; import { UserWithMembers } from "~/lib/api/user";
import serverRequest from "~/lib/request.server"; import serverRequest from "~/lib/request.server";
import { loader as rootLoader } from "~/root"; import { loader as rootLoader } from "~/root";
import { Alert, Button } from "react-bootstrap"; import { Alert, Button, Pagination } from "react-bootstrap";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { renderMarkdown } from "~/lib/markdown"; import { renderMarkdown } from "~/lib/markdown";
import ProfileLink from "~/components/ProfileLink"; import ProfileLink from "~/components/ProfileLink";
@ -11,6 +11,7 @@ import ProfileField from "~/components/ProfileField";
import { PersonPlusFill } from "react-bootstrap-icons"; import { PersonPlusFill } from "react-bootstrap-icons";
import { defaultAvatarUrl } from "~/lib/utils"; import { defaultAvatarUrl } from "~/lib/utils";
import MemberCard from "~/routes/$username/MemberCard"; import MemberCard from "~/routes/$username/MemberCard";
import { ReactNode } from "react";
export const meta: MetaFunction<typeof loader> = ({ data }) => { export const meta: MetaFunction<typeof loader> = ({ data }) => {
const { user } = data!; const { user } = data!;
@ -34,17 +35,44 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
memberPage = 0; memberPage = 0;
} }
console.log(JSON.stringify(members));
return json({ user, members, currentPage: memberPage, pageCount }); return json({ user, members, currentPage: memberPage, pageCount });
}; };
export default function UserPage() { export default function UserPage() {
const { t } = useTranslation(); const { t } = useTranslation();
const { user } = useLoaderData<typeof loader>(); const { user, members, currentPage, pageCount } = useLoaderData<typeof loader>();
const { meUser } = useRouteLoaderData<typeof rootLoader>("root") || { meUser: undefined }; const { meUser } = useRouteLoaderData<typeof rootLoader>("root") || { meUser: undefined };
const isMeUser = meUser && meUser.id === user.id; const isMeUser = meUser && meUser.id === user.id;
const bio = renderMarkdown(user.bio); const bio = renderMarkdown(user.bio);
const paginationItems: ReactNode[] = [];
for (let i = 0; i < pageCount; i++) {
paginationItems.push(
<Pagination.Item key={i} as={Link} to={`/@${user.username}?page=${i}`}>
{i + 1}
</Pagination.Item>,
);
}
const pagination = (
<Pagination className="justify-content-center">
<Pagination.Prev
as={Link}
to={`/@${user.username}?page=${currentPage - 1}`}
disabled={currentPage === 0}
/>
{paginationItems}
<Pagination.Next
as={Link}
to={`/@${user.username}?page=${currentPage + 1}`}
disabled={currentPage === pageCount - 1}
/>
</Pagination>
);
return ( return (
<> <>
{isMeUser && ( {isMeUser && (
@ -120,39 +148,43 @@ export default function UserPage() {
))} ))}
</div> </div>
</div> </div>
{user.members.length > 0 || {(members.length > 0 || isMeUser) && (
(isMeUser && ( <>
<> <hr />
<hr /> <h2>
<h2> {user.member_title || t("user.heading.members")}{" "}
{user.member_title || t("user.heading.members")}{" "} {isMeUser && (
{/* @ts-expect-error using as=Link causes an error here, even though it runs completely fine */} // @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"> <Button as={Link} to="/settings/members/create" variant="success">
<PersonPlusFill /> {t("user.create-member-button")} <PersonPlusFill /> {t("user.create-member-button")}
</Button> </Button>
</h2> )}
<div className="grid"> </h2>
{user.members.length === 0 ? ( {pageCount > 1 && pagination}
<div> <div className="grid">
<Trans t={t} i18nKey="user.no-members-blurb"> {members.length === 0 ? (
You don&apos;t have any members yet. <div>
<br /> <Trans t={t} i18nKey="user.no-members-blurb">
Members are sub-profiles that can have their own avatar, names, pronouns, and preferred terms. You don&apos;t have any members yet.
<br /> <br />
You can create a new member with the &quot;Create member&quot; button above.{" "} Members are sub-profiles that can have their own avatar, names, pronouns, and
<span className="text-muted">(only you can see this)</span> preferred terms.
</Trans> <br />
</div> You can create a new member with the &quot;Create member&quot; button above.{" "}
) : ( <span className="text-muted">(only you can see this)</span>
<div className="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 text-center"> </Trans>
{user.members.map((member, i) => ( </div>
<MemberCard user={user} member={member} key={i} /> ) : (
))} <div className="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 text-center">
</div> {members.map((member, i) => (
)} <MemberCard user={user} member={member} key={i} />
</div> ))}
</> </div>
))} )}
</div>
{pageCount > 1 && pagination}
</>
)}
</> </>
); );
} }

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

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