enable fetching of statements from database based on current UI language

Watts-Lab · Aug 23, 2024 · 832159a · 832159a
1 parent 00ac46f
commit 832159a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
@@ -22,7 +22,6 @@ function Layout() {
   // get the current language
   const { t, i18n } = useTranslation();
   const language = i18n.language;
-  console.log(language);
 
   const [statementArray, setStatementArray] = useState([]);
   const [statementsData, setStatementsData] = useStickyState(
@@ -141,15 +140,13 @@ function Layout() {
 
   useEffect(() => {
     Backend.get("/experiments", {
-      params: urlParams.reduce(
-        (acc, param) => {
+      params: {
+        ...urlParams.reduce((acc, param) => {
           acc[param.key] = param.value;
           return acc;
-        },
-        {
-          language: language, // request for statements in current language
-        }
-      ),
+        }, {}),
+        language: language, // add language parameter
+      },
     })
       .then((response) => {
         const initialAnswers = response.data.statements.map((statement) => ({
@@ -172,18 +169,19 @@ function Layout() {
               statement: { statement: string; image?: string; id: number },
               index: number
             ) => {
+              const statementText = (statement as any)[`statement_${language}`] || statement.statement; // define the statement in the current language
               return (
                 <Statement
                   key={index}
                   next={next}
                   back={back}
                   currentStep={index + 1}
                   totalSteps={response.data.statements.length}
-                  statementText={statement.statement}
+                  statementText={statementText}
                   imageUrl={statement.image}
                   statementId={statement.id}
                   onChange={handleStatementChange}
-                  onSaveStatement={handleAnswerSaving}
+                  onSaveStatement={handleAnswerSaving}i
                   data={
                     statementsData[index] || {
                       id: statement.id,

diff --git a/server/controllers/experiment.js b/server/controllers/experiment.js
@@ -12,6 +12,9 @@ const {
 const { stringy } = require("../survey/treatments/utils/id-generator");
 
 const returnStatements = async (req, res) => {
+  const language = req.query.language || "en"; // default to English if no language is provided
+  console.log('Language: ', language);
+
   const oursobject = experiments
     .flatMap((experiment) =>
       experiment.treatments.map((treatment) => {
@@ -44,7 +47,12 @@ const returnStatements = async (req, res) => {
     return stringy(treatment.params) === selectedTreatment;
   });
 
-  const result = await treatmentObject.function(treatmentObject.params);
+  const result = await treatmentObject.function(
+    {
+      ...treatmentObject.params, 
+    },
+    language // pass the language as the second argument to the treatment function
+  );
 
   const experimentData = {
     userSessionId: req.sessionID,

diff --git a/server/survey/treatments/statement-by-id.treatment.js b/server/survey/treatments/statement-by-id.treatment.js
@@ -10,15 +10,34 @@ const { stringy } = require("./utils/id-generator");
  * @param {number} [params.limit] - The maximum number of statements to return.
  * @returns {Promise<Array>} - A promise that resolves to an array of statements.
  */
-const GetStatementById = async (params) => {
+const GetStatementById = async (params, language) => {
+  console.log('Language: ', language);
+  const languageMap = {
+    en: "statement",
+    zh: "statement_zh",
+    ru: "statement_ru",
+    pt: "statement_pt",
+    ja: "statement_ja",
+    hi: "statement_hi",
+    fr: "statement_fr",
+    es: "statement_es",
+    bn: "statement_bn",
+    ar: "statement_ar",
+  };
+
+  const selectedColumn = languageMap[language] || "statement"; // default to 'statement' if column is not supported
+  console.log("Selected column: ", selectedColumn);
+
   const statementsText = await statements.findAll({
     where: {
       id: params.ids,
     },
-    attributes: ["id", "statement"],
+    attributes: ["id", selectedColumn],
     order: Sequelize.literal("rand()"),
   });
 
+  console.log("Statements: ", statementsText);
+
   return {
     id: stringy({
       params,