Merge pull request #890 from LAION-AI/lang

Send language when fetching available tasks

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<AvailableTasks> {
-    return this.post(`/api/v1/tasks/availability`, user);
+  async fetch_available_tasks(user: BackendUserCore, lang: string): Promise<AvailableTasks> {
+    return this.post(`/api/v1/tasks/availability`, { ...user, lang });
   }
 }
 

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;

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,

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);
 });
 

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<AvailableTasks>("/api/available_tasks", get);
+  const {
+    i18n: { language },
+  } = useTranslation();
+  const [activeLang, setLang] = useState<string>(null);
+  const { data, mutate: fetchTasks } = useSWR<AvailableTasks>("/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 ?? {});