diff --git a/website/public/locales/en/leaderboard.json b/website/public/locales/en/leaderboard.json index cebe281d..2339a05d 100644 --- a/website/public/locales/en/leaderboard.json +++ b/website/public/locales/en/leaderboard.json @@ -1,18 +1,33 @@ { + "accepted": "↪ Accepted", + "accepted_prompts": "Accepted prompts", "daily": "Daily", + "day": "Day", + "good_rankings": "Good rankings", "label": "Labels", + "labels_full": "Labels (full)", + "labels_simple": "Labels (simple)", "last_updated_at": "Last updated at: {{val, datetime}}", "leaderboard": "Leaderboard", + "month": "Month", "monthly": "Monthly", "next": "Next", "overall": "Overall", "previous": "Previous", "prompt": "Prompts", "rank": "Rank", + "rankings": "Rankings", + "replies_assistant": "Replies as Assistant", + "replies_prompter": "Replies as Prompter", "reply": "Replies", + "reply_ranked_1": "Replies ranked first", "score": "Score", "top_5_contributors_today": "Top 5 Contributors Today", + "total": "Total", "user": "User", "view_all": "View all", - "weekly": "Weekly" + "week": "Week", + "weekly": "Weekly", + "your_account": "Your account", + "your_stats": "Your statistics" } diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts index 3f730b72..2aafab37 100644 --- a/website/src/lib/oasst_api_client.ts +++ b/website/src/lib/oasst_api_client.ts @@ -307,4 +307,9 @@ export class OasstApiClient { const backendUser = await this.post(`/api/v1/frontend_users/`, user); await this.put(`/api/v1/users/${backendUser.user_id}?tos_acceptance=true`); } + + async fetch_user_stats(user: BackendUserCore) { + const backendUser = await this.get(`/api/v1/frontend_users/${user.auth_method}/${user.id}`); + return this.get(`/api/v1/users/${backendUser.user_id}/stats`); + } } diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx index 25d28bd0..8a7753e1 100644 --- a/website/src/pages/account/index.tsx +++ b/website/src/pages/account/index.tsx @@ -1,18 +1,27 @@ -import { Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react"; +import { Box, Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react"; import Head from "next/head"; import Link from "next/link"; import { useSession } from "next-auth/react"; import React from "react"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; import { Pencil } from "lucide-react"; +import { useTranslation } from "react-i18next"; import { SurveyCard } from "src/components/Survey/SurveyCard"; +import { get } from "src/lib/api"; +import { getTypeSafei18nKey } from "src/lib/i18n"; +import { LeaderboardEntity, LeaderboardTimeFrame } from "src/types/Leaderboard"; +import uswSWRImmutable from "swr/immutable"; export default function Account() { + const { t } = useTranslation("leaderboard"); const { data: session } = useSession(); - + const { data } = uswSWRImmutable<{ [time in LeaderboardTimeFrame]: LeaderboardEntity }>("/api/user_stats", get); if (!session) { return; } + + console.log(data); + return ( <> @@ -23,11 +32,9 @@ export default function Account() { />
- + - - Your Account - + {t("your_account")} Username @@ -40,10 +47,71 @@ export default function Account() { Email {session.user.email ?? "(No Email)"} -

+ + + {t("your_stats")} + {[ + LeaderboardTimeFrame.total, + LeaderboardTimeFrame.day, + LeaderboardTimeFrame.week, + LeaderboardTimeFrame.month, + ].map((key) => { + const values = data[key]; + if (!values) { + return null; + } + return ( + + {t(getTypeSafei18nKey(key))} + + + + + + + + + + + + + + + + + + + + + + ); + })}
); } + +const Title = ({ children }) => ( + + {children} + +); + +const TableColumn = ({ children }) => { + return ( + + {children} + + ); +}; + +const Entry = ({ title, value }) => { + return ( + <> + {title} + {value} + + ); +}; diff --git a/website/src/pages/api/user_stats.ts b/website/src/pages/api/user_stats.ts new file mode 100644 index 00000000..cb508e8c --- /dev/null +++ b/website/src/pages/api/user_stats.ts @@ -0,0 +1,12 @@ +import { withoutRole } from "src/lib/auth"; +import { createApiClientFromUser } from "src/lib/oasst_client_factory"; +import { getBackendUserCore } from "src/lib/users"; + +const handler = withoutRole("banned", async (req, res, token) => { + const user = await getBackendUserCore(token.sub); + const oasstApiClient = createApiClientFromUser(user); + const stats = await oasstApiClient.fetch_user_stats(user); + res.status(200).json(stats); +}); + +export default handler;