When loading recent messages, filter by the user's stored language. (#…

…1292) A simple short term fix. Applies to #962. To fully fix a small backend change is needed.
LAION-AI · Feb 9, 2023 · 7b16ee9 · 7b16ee9
1 parent 3f30e1f
commit 7b16ee9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/website/public/locales/en/message.json b/website/public/locales/en/message.json
@@ -8,7 +8,7 @@
   "open_new_tab_action": "Open in new tab",
   "parent": "Parent",
   "reactions": "Reactions",
-  "recent_messages": "Recent Messages",
+  "recent_messages": "Recent Messages in {{language}}",
   "report_action": "Report",
   "report_placeholder": "Why should this message be reviewed?",
   "report_title": "Report",

diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts
@@ -314,8 +314,8 @@ export class OasstApiClient {
     return this.get<Message[]>(`/api/v1/messages?${params}`);
   }
 
-  fetch_recent_messages() {
-    return this.get<Message[]>(`/api/v1/messages`);
+  fetch_recent_messages(lang: string) {
+    return this.get<Message[]>(`/api/v1/messages`, { lang });
   }
 
   fetch_message_children(messageId: string) {

diff --git a/website/src/pages/api/messages/index.ts b/website/src/pages/api/messages/index.ts
@@ -1,9 +1,11 @@
 import { withoutRole } from "src/lib/auth";
 import { createApiClient } from "src/lib/oasst_client_factory";
+import { getUserLanguage } from "src/lib/users";
 
 const handler = withoutRole("banned", async (req, res, token) => {
   const client = await createApiClient(token);
-  const messages = await client.fetch_recent_messages();
+  const userLanguage = getUserLanguage(req);
+  const messages = await client.fetch_recent_messages(userLanguage);
   res.status(200).json(messages);
 });
 

diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx
@@ -1,6 +1,7 @@
 import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useTranslation } from "next-i18next";
+import { useCookies } from "react-cookie";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { get } from "src/lib/api";
@@ -15,6 +16,8 @@ const MessagesDashboard = () => {
   const { data: messages } = useSWRImmutable("/api/messages", get, { revalidateOnMount: true });
   const { data: userMessages } = useSWRImmutable(`/api/messages/user`, get, { revalidateOnMount: true });
 
+  const [cookies] = useCookies(["NEXT_LOCALE"]);
+  const currentLanguage = cookies["NEXT_LOCALE"] || "en";
   return (
     <>
       <Head>
@@ -24,7 +27,9 @@ const MessagesDashboard = () => {
       <SimpleGrid columns={[1, 1, 1, 1, 1, 2]} gap={4}>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
-            {t("recent_messages")}
+            {t("recent_messages", {
+              language: new Intl.DisplayNames([currentLanguage], { type: "language" }).of(currentLanguage),
+            })}
           </Text>
           <Box
             backgroundColor={boxBgColor}