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