refactor: use Title object instead of MainTitle, TitleDe and TitleFr

web/frontend/src/components/utils/FillFormInfo.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { ID } from 'types/configuration';
-import { FormInfo, LightFormInfo, Results, Status } from 'types/form';
+import { FormInfo, LightFormInfo, Results, Status, Title } from 'types/form';
 
 const useFillFormInfo = (formData: FormInfo) => {
   const [id, setId] = useState<ID>('');
@@ -52,9 +52,7 @@ const useFillFormInfo = (formData: FormInfo) => {
 
 const useFillLightFormInfo = (formData: LightFormInfo) => {
   const [id, setId] = useState<ID>('');
-  const [title, setTitle] = useState<string>('');
-  const [titleFr, setTitleFr] = useState<string>('');
-  const [titleDe, setTitleDe] = useState<string>('');
+  const [title, setTitle] = useState<Title>({ en: '', fr: '', de: '' });
   const [status, setStatus] = useState<Status>(null);
   const [pubKey, setPubKey] = useState<string>('');
 
@@ -64,16 +62,12 @@ const useFillLightFormInfo = (formData: LightFormInfo) => {
       setTitle(formData.Title);
       setStatus(formData.Status);
       setPubKey(formData.Pubkey);
-      setTitleFr(formData.TitleFr);
-      setTitleDe(formData.TitleDe);
     }
   }, [formData]);
 
   return {
     id,
     title,
-    titleFr,
-    titleDe,
     status,
     setStatus,
     pubKey,

web/frontend/src/mocks/mockData.ts

@@ -23,8 +23,8 @@ const mockRoster: string[] = [
 ];
 
 const mockForm1: any = {
-  MainTitle:
-    '{ "en" : "Life on the campus", "fr" : "Vie sur le campus", "de" : "Life on the campus"}',
+  Title:
+    { "en" : "Life on the campus", "fr" : "Vie sur le campus", "de" : "Life on the campus"},
   Scaffold: [
     {
       ID: (0xa2ab).toString(),
@@ -33,15 +33,15 @@ const mockForm1: any = {
       Subjects: [
         {
           Title:
-            '{ "en" : "Let s talk about the food", "fr" : "Parlons de la nourriture", "de" : "Let s talk about food"}',
+            { "en" : "Let s talk about the food", "fr" : "Parlons de la nourriture", "de" : "Let s talk about food"},
           ID: (0xff31).toString(),
           Order: [(0xa319).toString(), (0x19c7).toString()],
           Subjects: [],
           Texts: [],
           Selects: [
             {
               Title:
-                '{ "en" : "Select your ingredients", "fr" : "Choisi tes ingrédients", "de" : "Select your ingredients"}',
+                { "en" : "Select your ingredients", "fr" : "Choisi tes ingrédients", "de" : "Select your ingredients"},
               ID: (0xa319).toString(),
               MaxN: 2,
               MinN: 1,
@@ -56,7 +56,7 @@ const mockForm1: any = {
           Ranks: [
             {
               Title:
-                '{ "en" : "Rank the cafeteria", "fr" : "Ordonne les cafet", "de" : "Rank the cafeteria"}',
+                { "en" : "Rank the cafeteria", "fr" : "Ordonne les cafet", "de" : "Rank the cafeteria"},
               ID: (0x19c7).toString(),
               MaxN: 3,
               MinN: 3,
@@ -74,7 +74,7 @@ const mockForm1: any = {
       Selects: [
         {
           Title:
-            '{"en" : "How did you find the provided material, from 1 (bad) to 5 (excellent) ?", "fr" : "Comment trouves-tu le matériel fourni, de 1 (mauvais) à 5 (excellent) ?", "de" : "How did you find the provided material, from 1 (bad) to 5 (excellent) ?"}',
+            {"en" : "How did you find the provided material, from 1 (bad) to 5 (excellent) ?", "fr" : "Comment trouves-tu le matériel fourni, de 1 (mauvais) à 5 (excellent) ?", "de" : "How did you find the provided material, from 1 (bad) to 5 (excellent) ?"},
           ID: (0x3fb2).toString(),
           MaxN: 1,
           MinN: 1,
@@ -89,7 +89,7 @@ const mockForm1: any = {
         },
         {
           Title:
-            '{"en": "How did you find the teaching ?","fr": "Comment trouves-tu l enseignement ?","de": "How did you find the teaching ?"}',
+            {"en": "How did you find the teaching ?","fr": "Comment trouves-tu l enseignement ?","de": "How did you find the teaching ?"},
           ID: (0x41e2).toString(),
           MaxN: 1,
           MinN: 1,
@@ -104,7 +104,7 @@ const mockForm1: any = {
       Texts: [
         {
           Title:
-            '{ "en" : "Who were the two best TAs ?", "fr" : "Quels sont les deux meilleurs TA ?", "de" : "Who were the two best TAs ?"} ',
+            { "en" : "Who were the two best TAs ?", "fr" : "Quels sont les deux meilleurs TA ?", "de" : "Who were the two best TAs ?"} ,
           ID: (0xcd13).toString(),
           MaxLength: 20,
           MaxN: 2,
@@ -153,13 +153,13 @@ const mockForm2: any = {
   Scaffold: [
     {
       ID: (0xa2ab).toString(),
-      Title: '{"en": "Rate the course", "fr": "Note le cours", "de": "Rate the course"}',
+      Title: {"en": "Rate the course", "fr": "Note le cours", "de": "Rate the course"},
       Order: [(0x3fb2).toString(), (0xcd13).toString()],
 
       Selects: [
         {
           Title:
-            '{"en": "How did you find the provided material, from 1 (bad) to 5 (excellent) ?", "fr" : "Comment trouves-tu le matériel fourni, de 1 (mauvais) à 5 (excellent) ?", "de" : "How did you find the provided material, from 1 (bad) to 5 (excellent) ?"}',
+            {"en": "How did you find the provided material, from 1 (bad) to 5 (excellent) ?", "fr" : "Comment trouves-tu le matériel fourni, de 1 (mauvais) à 5 (excellent) ?", "de" : "How did you find the provided material, from 1 (bad) to 5 (excellent) ?"},
           ID: (0x3fb2).toString(),
           MaxN: 1,
           MinN: 1,
@@ -176,7 +176,7 @@ const mockForm2: any = {
       Texts: [
         {
           Title:
-            '{"en" : "Who were the two best TAs ?", "fr" : "Quels sont les deux meilleurs TA ?", "de" : "Who were the two best TAs ?"}',
+            {"en" : "Who were the two best TAs ?", "fr" : "Quels sont les deux meilleurs TA ?", "de" : "Who were the two best TAs ?"},
           ID: (0xcd13).toString(),
           MaxLength: 40,
           MaxN: 2,
@@ -195,12 +195,12 @@ const mockForm2: any = {
     },
     {
       ID: (0x1234).toString(),
-      Title: '{"en": "Tough choices", "fr": "Choix difficiles", "de": "Tough choices"}',
+      Title: {"en": "Tough choices", "fr": "Choix difficiles", "de": "Tough choices"},
       Order: [(0xa319).toString(), (0xcafe).toString(), (0xbeef).toString()],
       Selects: [
         {
           Title:
-            '{"en": "Select your ingredients", "fr": "Choisis tes ingrédients", "de": "Select your ingredients"}',
+            {"en": "Select your ingredients", "fr": "Choisis tes ingrédients", "de": "Select your ingredients"},
           ID: (0xa319).toString(),
           MaxN: 3,
           MinN: 0,
@@ -217,7 +217,7 @@ const mockForm2: any = {
       Ranks: [
         {
           Title:
-            '{"en": "Which cafeteria serves the best coffee ?", "fr": "Quelle cafétéria sert le meilleur café ?", "de": "Which cafeteria serves the best coffee ?"}',
+            {"en": "Which cafeteria serves the best coffee ?", "fr": "Quelle cafétéria sert le meilleur café ?", "de": "Which cafeteria serves the best coffee ?"},
           ID: (0xcafe).toString(),
           MaxN: 4,
           MinN: 1,
@@ -230,7 +230,7 @@ const mockForm2: any = {
           Hint: '{"en": "", "fr": "", "de": ""}',
         },
         {
-          Title: '{"en": "IN or SC ?", "fr": "IN ou SC ?", "de": "IN or SC ?"}',
+          Title: {"en": "IN or SC ?", "fr": "IN ou SC ?", "de": "IN or SC ?"},
           ID: (0xbeef).toString(),
           MaxN: 2,
           MinN: 1,
@@ -249,15 +249,15 @@ const mockForm3: any = {
   Scaffold: [
     {
       ID: '3cVHIxpx',
-      Title: '{"en": "Choose your lunch", "fr": "Choisis ton déjeuner", "de": "Choose your lunch"}',
+      Title: {"en": "Choose your lunch", "fr": "Choisis ton déjeuner", "de": "Choose your lunch"},
       Order: ['PGP'],
       Ranks: [],
       Selects: [],
       Texts: [
         {
           ID: 'PGP',
           Title:
-            '{"en": "Select what you want", "fr": "Choisis ce que tu veux", "de": "Select what you want"}',
+            {"en": "Select what you want", "fr": "Choisis ce que tu veux", "de": "Select what you want"},
           MaxN: 4,
           MinN: 0,
           MaxLength: 50,

web/frontend/src/mocks/setupMockForms.ts

@@ -99,9 +99,7 @@ const toLightFormInfo = (mockForms: Map<ID, FormInfo>, formID: ID): LightFormInf
 
   return {
     FormID: formID,
-    Title: form.Configuration.MainTitle,
-    TitleFr: form.Configuration.TitleFr,
-    TitleDe: form.Configuration.TitleDe,
+    Title: form.Configuration.Title,
     Status: form.Status,
     Pubkey: form.Pubkey,
   };

web/frontend/src/pages/ballot/components/BallotDisplay.tsx

@@ -5,7 +5,6 @@ import Rank, { handleOnDragEnd } from './Rank';
 import Select from './Select';
 import Text from './Text';
 import { DragDropContext } from 'react-beautiful-dnd';
-import { isJson } from 'types/JSONparser';
 
 type BallotDisplayProps = {
   configuration: Configuration;
@@ -24,18 +23,8 @@ const BallotDisplay: FC<BallotDisplayProps> = ({
 }) => {
   const [titles, setTitles] = useState<any>({});
   useEffect(() => {
-    if (configuration.MainTitle === '') return;
-    if (isJson(configuration.MainTitle)) {
-      const ts = JSON.parse(configuration.MainTitle);
-      setTitles(ts);
-    } else {
-      const t = {
-        en: configuration.MainTitle,
-        fr: configuration.TitleFr,
-        de: configuration.TitleDe,
-      };
-      setTitles(t);
-    }
+    if (configuration.Title === undefined) return;
+    setTitles(configuration.Title);
   }, [configuration]);
 
   const SubjectElementDisplay = (element: types.SubjectElement) => {
@@ -65,17 +54,12 @@ const BallotDisplay: FC<BallotDisplayProps> = ({
   };
 
   const SubjectTree = (subject: types.Subject) => {
-    let sbj;
-    if (isJson(subject.Title)) {
-      sbj = JSON.parse(subject.Title);
-    }
-    if (sbj === undefined) sbj = { en: subject.Title, fr: subject.TitleFr, de: subject.TitleDe };
     return (
       <div key={subject.ID}>
         <h3 className="text-xl break-all pt-1 pb-1 sm:pt-2 sm:pb-2 border-t font-bold text-gray-600">
-          {language === 'en' && sbj.en}
-          {language === 'fr' && sbj.fr}
-          {language === 'de' && sbj.de}
+          {language === 'en' && subject.Title.en}
+          {language === 'fr' && subject.Title.fr}
+          {language === 'de' && subject.Title.de}
         </h3>
         {subject.Order.map((id: ID) => (
           <div key={id}>

web/frontend/src/pages/ballot/components/Rank.tsx

@@ -3,7 +3,6 @@ import { Draggable, DropResult, Droppable } from 'react-beautiful-dnd';
 import { Answers, ID, RankQuestion } from 'types/configuration';
 import { answersFrom } from 'types/getObjectType';
 import HintButton from 'components/buttons/HintButton';
-import { isJson } from 'types/JSONparser';
 
 export const handleOnDragEnd = (
   result: DropResult,
@@ -59,12 +58,7 @@ const Rank: FC<RankProps> = ({ rank, answers, language }) => {
   };
   const [titles, setTitles] = useState<any>({});
   useEffect(() => {
-    if (isJson(rank.Title)) {
-      const ts = JSON.parse(rank.Title);
-      setTitles(ts);
-    } else {
-      setTitles({ en: rank.Title, fr: rank.TitleFr, de: rank.TitleDe });
-    }
+    setTitles(rank.Title);
   }, [rank]);
   const choiceDisplay = (choice: string, rankIndex: number) => {
     return (

web/frontend/src/pages/ballot/components/Select.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { Answers, SelectQuestion } from 'types/configuration';
 import { answersFrom } from 'types/getObjectType';
 import HintButton from 'components/buttons/HintButton';
-import { isJson } from 'types/JSONparser';
 type SelectProps = {
   select: SelectQuestion;
   answers: Answers;
@@ -57,12 +56,7 @@ const Select: FC<SelectProps> = ({ select, answers, setAnswers, language }) => {
   };
   const [titles, setTitles] = useState<any>({});
   useEffect(() => {
-    if (isJson(select.Title)) {
-      const ts = JSON.parse(select.Title);
-      setTitles(ts);
-    } else {
-      setTitles({ en: select.Title, fr: select.TitleFr, de: select.TitleDe });
-    }
+    setTitles(select.Title);
   }, [select]);
 
   const choiceDisplay = (isChecked: boolean, choice: string, choiceIndex: number) => {

web/frontend/src/pages/ballot/components/Text.tsx

@@ -101,9 +101,9 @@ const Text: FC<TextProps> = ({ text, answers, setAnswers, language }) => {
       <div className="grid grid-rows-1 grid-flow-col">
         <div>
           <h3 className="text-lg break-words text-gray-600 w-96">
-            {language === 'en' && text.Title}
-            {language === 'fr' && text.TitleFr}
-            {language === 'de' && text.TitleDe}
+            {language === 'en' && text.Title.en}
+            {language === 'fr' && text.Title.fr}
+            {language === 'de' && text.Title.de}
           </h3>
         </div>
         <div className="text-right">