From 63d9a5b53b7a15dfe28ca2f29ca0b64203fe829a Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sun, 17 Jul 2022 11:52:35 +0300 Subject: [PATCH] Set translated title on client side for FAQ --- app/hooks/useSetTitle.ts | 9 +++++++++ app/routes/admin.tsx | 3 ++- app/routes/contributions.tsx | 2 +- app/routes/faq.tsx | 7 +++++-- app/routes/plus/suggestions.tsx | 3 ++- app/routes/plus/voting/index.tsx | 3 ++- app/routes/plus/voting/results.tsx | 2 +- app/routes/u.$identifier.tsx | 3 ++- app/utils/remix.ts | 4 ---- app/utils/strings.ts | 4 ++++ 10 files changed, 28 insertions(+), 12 deletions(-) create mode 100644 app/hooks/useSetTitle.ts diff --git a/app/hooks/useSetTitle.ts b/app/hooks/useSetTitle.ts new file mode 100644 index 000000000..a7a467dca --- /dev/null +++ b/app/hooks/useSetTitle.ts @@ -0,0 +1,9 @@ +import { useEffect } from "react"; +import { makeTitle } from "~/utils/strings"; + +/** Set title on mount. Used for showing a translated title on pages without loader. */ +export function useSetTitle(title: string) { + useEffect(() => { + document.title = makeTitle(title); + }, [title]); +} diff --git a/app/routes/admin.tsx b/app/routes/admin.tsx index d95a16bf2..4b67ffa76 100644 --- a/app/routes/admin.tsx +++ b/app/routes/admin.tsx @@ -18,7 +18,8 @@ import { Main } from "~/components/Main"; import { requireUser } from "~/modules/auth"; import { getUser, isImpersonating } from "~/modules/auth/user.server"; import { canPerformAdminActions } from "~/permissions"; -import { makeTitle, parseRequestFormData, validate } from "~/utils/remix"; +import { parseRequestFormData, validate } from "~/utils/remix"; +import { makeTitle } from "~/utils/strings"; import { impersonateUrl, STOP_IMPERSONATING_URL } from "~/utils/urls"; import { db } from "~/db"; import { z } from "zod"; diff --git a/app/routes/contributions.tsx b/app/routes/contributions.tsx index 1b338baa9..bff00e53d 100644 --- a/app/routes/contributions.tsx +++ b/app/routes/contributions.tsx @@ -1,6 +1,6 @@ import type { MetaFunction } from "@remix-run/node"; import { Main } from "~/components/Main"; -import { makeTitle } from "~/utils/remix"; +import { makeTitle } from "~/utils/strings"; import { BORZOIC_TWITTER, GITHUB_CONTRIBUTORS_URL, diff --git a/app/routes/faq.tsx b/app/routes/faq.tsx index 6fddedfe0..91125ffea 100644 --- a/app/routes/faq.tsx +++ b/app/routes/faq.tsx @@ -1,8 +1,9 @@ import type { LinksFunction, MetaFunction } from "@remix-run/node"; import { useTranslation } from "react-i18next"; import { Main } from "~/components/Main"; +import { useSetTitle } from "~/hooks/useSetTitle"; import styles from "~/styles/faq.css"; -import { makeTitle } from "~/utils/remix"; +import { makeTitle } from "~/utils/strings"; const AMOUNT_OF_QUESTIONS = 3; @@ -22,7 +23,9 @@ export const handle = { }; export default function FAQPage() { - const { t } = useTranslation("faq"); + const { t } = useTranslation(["faq", "common"]); + useSetTitle(t("pages.faq", { ns: "common" })); + return (
{new Array(AMOUNT_OF_QUESTIONS).fill(null).map((_, i) => { diff --git a/app/routes/plus/suggestions.tsx b/app/routes/plus/suggestions.tsx index 0bd3047f7..b64cb3b25 100644 --- a/app/routes/plus/suggestions.tsx +++ b/app/routes/plus/suggestions.tsx @@ -25,7 +25,8 @@ import { canDeleteComment, canDeleteSuggestionOfThemselves, } from "~/permissions"; -import { makeTitle, parseRequestFormData, validate } from "~/utils/remix"; +import { parseRequestFormData, validate } from "~/utils/remix"; +import { makeTitle } from "~/utils/strings"; import { discordFullName } from "~/utils/strings"; import { actualNumber } from "~/utils/zod"; import { FAQ_PAGE, LOG_IN_URL, userPage } from "~/utils/urls"; diff --git a/app/routes/plus/voting/index.tsx b/app/routes/plus/voting/index.tsx index c9304ac77..b9682eeb5 100644 --- a/app/routes/plus/voting/index.tsx +++ b/app/routes/plus/voting/index.tsx @@ -23,7 +23,8 @@ import { usePlusVoting, } from "~/modules/plus-server"; import { isVotingActive } from "~/permissions"; -import { makeTitle, parseRequestFormData } from "~/utils/remix"; +import { parseRequestFormData } from "~/utils/remix"; +import { makeTitle } from "~/utils/strings"; import { discordFullName } from "~/utils/strings"; import { assertType, assertUnreachable } from "~/utils/types"; import { safeJSONParse } from "~/utils/zod"; diff --git a/app/routes/plus/voting/results.tsx b/app/routes/plus/voting/results.tsx index 60bc59bdb..b7e395ae6 100644 --- a/app/routes/plus/voting/results.tsx +++ b/app/routes/plus/voting/results.tsx @@ -10,7 +10,7 @@ import { db } from "~/db"; import type { PlusVotingResultByMonthYear } from "~/db/models/plusVotes.server"; import type { PlusVotingResult } from "~/db/types"; import { roundToTwoDecimalPlaces } from "~/utils/number"; -import { makeTitle } from "~/utils/remix"; +import { makeTitle } from "~/utils/strings"; import type { Unpacked } from "~/utils/types"; import styles from "~/styles/plus-history.css"; import { discordFullName } from "~/utils/strings"; diff --git a/app/routes/u.$identifier.tsx b/app/routes/u.$identifier.tsx index c425dabdc..9ab0274e5 100644 --- a/app/routes/u.$identifier.tsx +++ b/app/routes/u.$identifier.tsx @@ -9,7 +9,8 @@ import { db } from "~/db"; import type { CountsByUserId } from "~/db/models/badges.server"; import type { User } from "~/db/types"; import { useUser } from "~/modules/auth"; -import { makeTitle, notFoundIfFalsy } from "~/utils/remix"; +import { notFoundIfFalsy } from "~/utils/remix"; +import { makeTitle } from "~/utils/strings"; import { discordFullName } from "~/utils/strings"; export const meta: MetaFunction = ({ data }: { data: UserPageLoaderData }) => { diff --git a/app/utils/remix.ts b/app/utils/remix.ts index 27c239956..9da939bd5 100644 --- a/app/utils/remix.ts +++ b/app/utils/remix.ts @@ -45,7 +45,3 @@ export function validate(condition: any): asserts condition { throw new Response(null, { status: 400 }); } - -export function makeTitle(title: string) { - return `${title} | sendou.ink`; -} diff --git a/app/utils/strings.ts b/app/utils/strings.ts index e163546cd..977a29c97 100644 --- a/app/utils/strings.ts +++ b/app/utils/strings.ts @@ -5,3 +5,7 @@ export function discordFullName( ) { return `${user.discordName}#${user.discordDiscriminator}`; } + +export function makeTitle(title: string) { + return `${title} | sendou.ink`; +}