diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts index 16f8ccd2..47df8584 100644 --- a/website/src/lib/oasst_api_client.ts +++ b/website/src/lib/oasst_api_client.ts @@ -269,8 +269,8 @@ export class OasstApiClient { /** * Returns the counts of all tasks (some might be zero) */ - async fetch_available_tasks(user: BackendUserCore): Promise { - return this.post(`/api/v1/tasks/availability`, user); + async fetch_available_tasks(user: BackendUserCore, lang: string): Promise { + return this.post(`/api/v1/tasks/availability`, { ...user, lang }); } } diff --git a/website/src/lib/users.ts b/website/src/lib/users.ts index 637e93a9..d9e32937 100644 --- a/website/src/lib/users.ts +++ b/website/src/lib/users.ts @@ -15,7 +15,7 @@ const LOCALE_SET = new Set(i18n.locales); * the i18n module. * 3. "en" as a final fallback. */ -const getUserLanguage = (req: NextApiRequest) => { +const getUserLanguage = (req: NextApiRequest): string => { const cookieLanguage = req.cookies["NEXT_LOCALE"]; if (cookieLanguage) { return cookieLanguage; diff --git a/website/src/pages/admin/status/index.tsx b/website/src/pages/admin/status/index.tsx index 12eb0785..54305122 100644 --- a/website/src/pages/admin/status/index.tsx +++ b/website/src/pages/admin/status/index.tsx @@ -4,12 +4,12 @@ import { CardBody, CircularProgress, SimpleGrid, - Text, Table, TableCaption, TableContainer, Tbody, Td, + Text, Th, Thead, Tr, @@ -19,9 +19,10 @@ import Head from "next/head"; import { useRouter } from "next/router"; import { useSession } from "next-auth/react"; import { useEffect } from "react"; -import useSWRImmutable from "swr/immutable"; import { getAdminLayout } from "src/components/Layout"; import { get } from "src/lib/api"; +import useSWRImmutable from "swr/immutable"; +export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; /** * Provides the admin status page that shows result of calls to several backend API endpoints, diff --git a/website/src/pages/api/available_tasks.ts b/website/src/pages/api/available_tasks.ts index 36265d25..79dcc8b9 100644 --- a/website/src/pages/api/available_tasks.ts +++ b/website/src/pages/api/available_tasks.ts @@ -1,10 +1,11 @@ import { withoutRole } from "src/lib/auth"; import { oasstApiClient } from "src/lib/oasst_api_client"; -import { getBackendUserCore } from "src/lib/users"; +import { getBackendUserCore, getUserLanguage } from "src/lib/users"; const handler = withoutRole("banned", async (req, res, token) => { const user = await getBackendUserCore(token.sub); - const availableTasks = await oasstApiClient.fetch_available_tasks(user); + const userLanguage = getUserLanguage(req); + const availableTasks = await oasstApiClient.fetch_available_tasks(user, userLanguage); res.status(200).json(availableTasks); }); diff --git a/website/src/pages/dashboard.tsx b/website/src/pages/dashboard.tsx index 4def6196..2c5bea5e 100644 --- a/website/src/pages/dashboard.tsx +++ b/website/src/pages/dashboard.tsx @@ -1,16 +1,32 @@ import { Flex } from "@chakra-ui/react"; import Head from "next/head"; -import { useMemo } from "react"; +import { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard"; import { getDashboardLayout } from "src/components/Layout"; import { TaskCategory } from "src/components/Tasks/TaskTypes"; import { get } from "src/lib/api"; import { AvailableTasks, TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -import useSWRImmutable from "swr/immutable"; +import useSWR from "swr"; const Dashboard = () => { - const { data } = useSWRImmutable("/api/available_tasks", get); + const { + i18n: { language }, + } = useTranslation(); + const [activeLang, setLang] = useState(null); + const { data, mutate: fetchTasks } = useSWR("/api/available_tasks", get, { + refreshInterval: 2 * 60 * 1000, //2 minutes + revalidateOnMount: false, // triggered in the hook below + }); + + useEffect(() => { + // re-fetch tasks if the language has changed + if (activeLang !== language) { + setLang(language); + fetchTasks(); + } + }, [activeLang, setLang, language, fetchTasks]); const availableTaskTypes = useMemo(() => { const taskTypes = filterAvailableTasks(data ?? {});