From f4fa525d6aa128942de1536b1d1a192836f13538 Mon Sep 17 00:00:00 2001
From: nobeeakon <nobeeakon@gmail.com>
Date: Tue, 26 Jul 2022 14:54:57 -0500
Subject: [PATCH] fix: questions page, rephrase remaining annotations (#69)

Co-authored-by: Daniel Torres <dtorresgonzalez@tripadvisor.com>
---
 src/i18n/common.json             | 2 +-
 src/pages/questions/UserData.jsx | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/i18n/common.json b/src/i18n/common.json
index 2a14dc2d24..2f57652220 100644
--- a/src/i18n/common.json
+++ b/src/i18n/common.json
@@ -20,7 +20,7 @@
     "display_images": "Display images",
     "annotations": "Annotations",
     "last_annotations": "Last annotations",
-    "remaining_annotations": "Remaining:",
+    "remaining_annotations": "Remaining questions",
     "annotated_annotations": "Annotated",
     "filters": {
       "short_label": {
diff --git a/src/pages/questions/UserData.jsx b/src/pages/questions/UserData.jsx
index f32b22b3e6..dbfb4a43e1 100644
--- a/src/pages/questions/UserData.jsx
+++ b/src/pages/questions/UserData.jsx
@@ -4,15 +4,16 @@ import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Link from "@mui/material/Link";
-
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
 
+import { useTranslation } from "react-i18next";
+
 import offService from "../../off";
 
 const NB_DISPLAYED_QUESTIONS = 30;
-const UserData = (props) => {
-  const { remainingQuestionNb = 0, answers = [] } = props;
+const UserData = ({ remainingQuestionNb = 0, answers = [] }) => {
+  const { t } = useTranslation();
 
   let displayedAnswers = answers.filter(
     (question) => question.validationValue !== -1
@@ -26,7 +27,7 @@ const UserData = (props) => {
   return (
     <Box>
       <Stack spacing={1}>
-        <Typography sx={{ my: 2 }}>Remaining: {remainingQuestionNb}</Typography>
+        <Typography sx={{ my: 2 }}>{t("questions.remaining_annotations")}: {remainingQuestionNb}</Typography>
         {displayedAnswers.map(
           ({ insight_id, barcode, value, insight_type, validationValue }) => (
             <Stack key={insight_id} direction="row">