Fix localization in for labelling (#1132)

website/src/components/Messages/LabelInputGroup.tsx

@@ -1,9 +1,9 @@
-import { Text, VStack } from "@chakra-ui/react";
+import { Box, Text, VStack } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import { Explain } from "src/components/Explain";
 import { LabelFlagGroup } from "src/components/Messages/LabelFlagGroup";
-import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
 import { LabelYesNoGroup } from "src/components/Messages/LabelYesNoGroup";
+import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 import { Label } from "src/types/Tasks";
 
@@ -55,8 +55,10 @@ export const LabelInputGroup = ({
       )}
       {flagIndexes.length > 0 && (
         <VStack alignItems="stretch" spacing={2}>
-          <Text>
-            {instructions.flagInstruction}
+          <Box>
+            <Text display="inline-block" paddingEnd={1}>
+              {instructions.flagInstruction}
+            </Text>
             <Explain
               explanation={flagIndexes.map(
                 (idx) =>
@@ -64,8 +66,8 @@ export const LabelInputGroup = ({
                     getTypeSafei18nKey(`${labels[idx].name}.explanation`)
                   )}`
               )}
-            />{" "}
-          </Text>
+            />
+          </Box>
           <LabelFlagGroup
             values={flagIndexes.map((idx) => values[idx])}
             labelNames={flagIndexes.map((idx) => labels[idx].name)}

website/src/components/Messages/LabelPopup.tsx

@@ -9,7 +9,7 @@ import {
   ModalOverlay,
 } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
 import { get, post } from "src/lib/api";
 import { Label } from "src/types/Tasks";
@@ -29,7 +29,7 @@ interface ValidLabelsResponse {
 export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopupProps) => {
   const { t } = useTranslation();
   const { data: response } = useSWRImmutable<ValidLabelsResponse>(`/api/valid_labels?message_id=${messageId}`, get);
-  const valid_labels = response?.valid_labels ?? [];
+  const valid_labels = useMemo(() => response?.valid_labels ?? [], [response]);
   const [values, setValues] = useState<number[]>(new Array(valid_labels.length).fill(null));
 
   useEffect(() => {
@@ -38,7 +38,7 @@ export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopu
 
   const { trigger: setLabels } = useSWRMutation("/api/set_label", post);
 
-  const submit = () => {
+  const submit = useCallback(() => {
     const label_map: Map<string, number> = new Map();
     console.assert(valid_labels.length === values.length);
     values.forEach((value, idx) => {
@@ -53,7 +53,7 @@ export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopu
 
     setValues(new Array(values.length).fill(null));
     onClose();
-  };
+  }, [messageId, onClose, setLabels, valid_labels, values]);
 
   return (
     <Modal isOpen={show} onClose={onClose}>

website/src/pages/messages/[id]/index.tsx

@@ -14,7 +14,9 @@ const MessageDetail = ({ id }: { id: string }) => {
   const { t } = useTranslation(["message", "common"]);
   const backgroundColor = useColorModeValue("white", "gray.800");
 
-  const { isLoading: isLoadingParent, data: parent } = useSWRImmutable<Message>(`/api/messages/${id}/parent`, get);
+  const { isLoading: isLoadingParent, data: parent } = useSWRImmutable<Message>(`/api/messages/${id}/parent`, get, {
+    refreshInterval: 30 * 1000, // 30 seconds
+  });
 
   if (isLoadingParent) {
     return <MessageLoading />;
@@ -29,20 +31,16 @@ const MessageDetail = ({ id }: { id: string }) => {
         />
       </Head>
       <Box width="full">
-        <Box>
-          {parent && (
-            <>
-              <Box pb="4">
-                <Text fontWeight="bold" fontSize="xl" pb="2">
-                  {t("parent")}
-                </Text>
-                <Card bg={backgroundColor} padding="4" width="fit-content">
-                  <MessageTableEntry enabled message={parent} />
-                </Card>
-              </Box>
-            </>
-          )}
-        </Box>
+        {parent && (
+          <Box pb="4">
+            <Text fontWeight="bold" fontSize="xl" pb="2">
+              {t("parent")}
+            </Text>
+            <Card bg={backgroundColor} padding="4" width="fit-content">
+              <MessageTableEntry enabled message={parent} />
+            </Card>
+          </Box>
+        )}
         <Box pb="4">
           <MessageWithChildren id={id} maxDepth={2} />
         </Box>
@@ -56,7 +54,7 @@ MessageDetail.getLayout = (page) => getDashboardLayout(page);
 export const getServerSideProps = async ({ locale, query }) => ({
   props: {
     id: query.id,
-    ...(await serverSideTranslations(locale, ["common", "message"])),
+    ...(await serverSideTranslations(locale, ["common", "message", "labelling"])),
   },
 });