From ad6c8bc71b0679a3b4a4649b19286dde52668f81 Mon Sep 17 00:00:00 2001
From: Carine Dengler <git@carine-dengler.de>
Date: Fri, 1 Mar 2024 10:56:09 +0100
Subject: [PATCH] refactor: refactor choice display

---
 .../src/pages/form/components/RankResult.tsx  | 18 +++------------
 .../pages/form/components/SelectResult.tsx    | 22 +++----------------
 .../src/pages/form/components/TextResult.tsx  | 11 ++--------
 .../pages/form/components/utils/display.tsx   | 17 ++++++++++++++
 4 files changed, 25 insertions(+), 43 deletions(-)
 create mode 100644 web/frontend/src/pages/form/components/utils/display.tsx

diff --git a/web/frontend/src/pages/form/components/RankResult.tsx b/web/frontend/src/pages/form/components/RankResult.tsx
index ef8d5646..5327994f 100644
--- a/web/frontend/src/pages/form/components/RankResult.tsx
+++ b/web/frontend/src/pages/form/components/RankResult.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { RankQuestion } from 'types/configuration';
 import { ProgressBar } from './ProgressBar';
 import { countRankResult } from './utils/countResult';
-import { default as i18n } from 'i18next';
+import { prettifyChoice } from './utils/display';
 
 type RankResultProps = {
   rank: RankQuestion;
@@ -20,12 +20,7 @@ const RankResult: FC<RankResultProps> = ({ rank, rankResult }) => {
       return (
         <React.Fragment key={index}>
           <div className="px-2 sm:px-4 break-words max-w-xs w-max">
-            <span>
-              {i18n.language === 'en' && rank.ChoicesMap.ChoicesMap.get('en')[index]}
-              {i18n.language === 'fr' && rank.ChoicesMap.ChoicesMap.get('fr')[index]}
-              {i18n.language === 'de' && rank.ChoicesMap.ChoicesMap.get('de')[index]}
-            </span>
-            :
+            <span>{prettifyChoice(rank.ChoicesMap, index)}</span>:
           </div>
           <ProgressBar isBest={isBest}>{percent}</ProgressBar>
         </React.Fragment>
@@ -48,14 +43,7 @@ export const IndividualRankResult: FC<RankResultProps> = ({ rank, rankResult })
           <React.Fragment key={`rank_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="mr-2 font-bold">{index + 1}:</div>
-              <div>
-                {i18n.language === 'en' &&
-                  rank.ChoicesMap.ChoicesMap.get('en')[rankResult[0].indexOf(index)]}
-                {i18n.language === 'fr' &&
-                  rank.ChoicesMap.ChoicesMap.get('fr')[rankResult[0].indexOf(index)]}
-                {i18n.language === 'de' &&
-                  rank.ChoicesMap.ChoicesMap.get('de')[rankResult[0].indexOf(index)]}
-              </div>
+              <div>{prettifyChoice(rank.ChoicesMap, rankResult[0].indexOf(index))}</div>
             </div>
           </React.Fragment>
         );
diff --git a/web/frontend/src/pages/form/components/SelectResult.tsx b/web/frontend/src/pages/form/components/SelectResult.tsx
index bf86f632..6957aaff 100644
--- a/web/frontend/src/pages/form/components/SelectResult.tsx
+++ b/web/frontend/src/pages/form/components/SelectResult.tsx
@@ -2,29 +2,13 @@ import React, { FC } from 'react';
 import { SelectQuestion } from 'types/configuration';
 import { SelectProgressBar } from './ProgressBar';
 import { countSelectResult } from './utils/countResult';
-import { default as i18n } from 'i18next';
+import { prettifyChoice } from './utils/display';
 
 type SelectResultProps = {
   select: SelectQuestion;
   selectResult: number[][];
 };
 
-const prettifyChoice = (select, index) => {
-  const choice = (
-    select.ChoicesMap.ChoicesMap.has(i18n.language)
-      ? select.ChoicesMap.ChoicesMap.get(i18n.language)
-      : select.ChoicesMap.ChoicesMap.get('en')
-  )[index];
-  const url = select.ChoicesMap.URLs[index];
-  return url ? (
-    <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
-      {choice}
-    </a>
-  ) : (
-    choice
-  );
-};
-
 // Display the results of a select question.
 const SelectResult: FC<SelectResultProps> = ({ select, selectResult }) => {
   const sortedResults = countSelectResult(selectResult)
@@ -40,7 +24,7 @@ const SelectResult: FC<SelectResultProps> = ({ select, selectResult }) => {
       return (
         <React.Fragment key={index}>
           <div className="px-2 sm:px-4 break-words max-w-xs w-max">
-            <span>{prettifyChoice(select, origIndex)}</span>:
+            <span>{prettifyChoice(select.ChoicesMap, origIndex)}</span>:
           </div>
           <SelectProgressBar
             percent={percent}
@@ -74,7 +58,7 @@ export const IndividualSelectResult: FC<SelectResultProps> = ({ select, selectRe
           <React.Fragment key={`select_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="h-4 w-4 mr-2 accent-indigo-500 ">{displayChoices(result, index)}</div>
-              <div>{prettifyChoice(select, index)}</div>
+              <div>{prettifyChoice(select.ChoicesMap, index)}</div>
             </div>
           </React.Fragment>
         );
diff --git a/web/frontend/src/pages/form/components/TextResult.tsx b/web/frontend/src/pages/form/components/TextResult.tsx
index f002fd5c..121f50e9 100644
--- a/web/frontend/src/pages/form/components/TextResult.tsx
+++ b/web/frontend/src/pages/form/components/TextResult.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TextQuestion } from 'types/configuration';
 import { ProgressBar } from './ProgressBar';
 import { countTextResult } from './utils/countResult';
-import { default as i18n } from 'i18next';
+import { prettifyChoice } from './utils/display';
 
 type TextResultProps = {
   textResult: string[][];
@@ -45,14 +45,7 @@ export const IndividualTextResult: FC<IndividualTextResultProps> = ({ text, text
         return (
           <React.Fragment key={`txt_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
-              <div className="mr-2 font-bold">
-                {
-                  (text.ChoicesMap.ChoicesMap.has(i18n.language)
-                    ? text.ChoicesMap.ChoicesMap.get(i18n.language)
-                    : text.ChoicesMap.ChoicesMap.get('en'))[index]
-                }
-                :
-              </div>
+              <div className="mr-2 font-bold">{prettifyChoice(text.ChoicesMap, index)}:</div>
               <div>{result}</div>
             </div>
           </React.Fragment>
diff --git a/web/frontend/src/pages/form/components/utils/display.tsx b/web/frontend/src/pages/form/components/utils/display.tsx
new file mode 100644
index 00000000..b84a6c3c
--- /dev/null
+++ b/web/frontend/src/pages/form/components/utils/display.tsx
@@ -0,0 +1,17 @@
+import { default as i18n } from 'i18next';
+
+export const prettifyChoice = (choicesMap, index) => {
+  const choice = (
+    choicesMap.ChoicesMap.has(i18n.language)
+      ? choicesMap.ChoicesMap.get(i18n.language)
+      : choicesMap.ChoicesMap.get('en')
+  )[index];
+  const url = choicesMap.URLs[index];
+  return url ? (
+    <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
+      {choice}
+    </a>
+  ) : (
+    choice
+  );
+};