diff --git a/website/public/locales/en/common.json b/website/public/locales/en/common.json index 82f378c9..99edf6c3 100644 --- a/website/public/locales/en/common.json +++ b/website/public/locales/en/common.json @@ -13,6 +13,5 @@ "sign_in": "Sign In", "sign_out": "Sign Out", "terms_of_service": "Terms of Service", - "title": "Open Assistant", - "last_updated_at": "Last updated at: {{val, datetime}}" + "title": "Open Assistant" } diff --git a/website/public/locales/en/leaderboard.json b/website/public/locales/en/leaderboard.json index 78600248..c2dd0832 100644 --- a/website/public/locales/en/leaderboard.json +++ b/website/public/locales/en/leaderboard.json @@ -1,5 +1,6 @@ { "daily": "Daily", + "last_updated_at": "Last updated at: {{val, datetime}}", "leaderboard": "Leaderboard", "monthly": "Monthly", "overall": "Overall", diff --git a/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx b/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx index 887c9122..2c576e51 100644 --- a/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx +++ b/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx @@ -6,19 +6,19 @@ import { get } from "src/lib/api"; import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard"; import useSWRImmutable from "swr/immutable"; -const columns = [ +const getColumns = (t) => [ { - Header: "Rank", + Header: t("rank"), accessor: "rank", style: { width: "90px" }, }, { - Header: "Score", + Header: t("score"), accessor: "leader_score", style: { width: "90px" }, }, { - Header: "User", + Header: t("user"), accessor: "display_name", }, ]; @@ -27,11 +27,13 @@ const columns = [ * Presents a grid of leaderboard entries with more detailed information. */ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => { - const { t } = useTranslation(); + const { t } = useTranslation(["leaderboard", "common"]); const { data: reply } = useSWRImmutable(`/api/leaderboard?time_frame=${timeFrame}`, get, { revalidateOnMount: true, }); + const columns = useMemo(() => getColumns(t), [t]); + const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data: reply?.leaderboard ?? [],