Merge pull request #313 from dedis/internalization

feat: fix missing titles
dedis · Sep 1, 2023 · fa61577 · fa61577
2 parents 8284e45 + a3e29b5
commit fa61577
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/web/frontend/src/pages/form/components/FormRow.tsx b/web/frontend/src/pages/form/components/FormRow.tsx
@@ -15,21 +15,27 @@ const FormRow: FC<FormRowProps> = ({ form }) => {
   useEffect(() => {
     if (form.Title === '') return;
     if (isJson(form.Title)) {
-      const ts = JSON.parse(form.Title);
-      setTitles(ts);
+      setTitles(JSON.parse(form.Title));
     } else {
-      const t = { en: form.Title, fr: form.TitleFr, de: form.TitleDe };
-      setTitles(t);
+      setTitles({ en: form.Title, fr: form.TitleFr, de: form.TitleDe });
     }
   }, [form]);
+  // let i18next handle choosing the appropriate language
+  const formRowI18n = i18n.createInstance();
+  formRowI18n.init();
+  // get current language
+  formRowI18n.changeLanguage(i18n.language);
+  Object.entries(titles).forEach(([lang, title]: [string, string | undefined]) => {
+    if (title) {
+      formRowI18n.addResource(lang, 'form', 'title', title);
+    }
+  });
   return (
     <tr className="bg-white border-b hover:bg-gray-50 ">
       <td className="px-1.5 sm:px-6 py-4 font-medium text-gray-900 whitespace-nowrap truncate">
         <Link className="text-gray-700 hover:text-indigo-500" to={`/forms/${form.FormID}`}>
           <div className="max-w-[20vw] truncate">
-            {i18n.language === 'en' && titles.en}
-            {i18n.language === 'fr' && titles.fr}
-            {i18n.language === 'de' && titles.de}
+            {formRowI18n.t('title', { ns: 'form', fallbackLng: 'en' })}
           </div>
         </Link>
       </td>

diff --git a/web/frontend/src/schema/configurationValidation.ts b/web/frontend/src/schema/configurationValidation.ts
@@ -2,6 +2,11 @@ import * as yup from 'yup';
 
 const idSchema = yup.string().min(1).required();
 const titleSchema = yup.string().required();
+const formTitleSchema = yup.object({
+  en: yup.string().required(),
+  fr: yup.string(),
+  de: yup.string(),
+});
 
 const selectsSchema = yup.object({
   ID: yup.lazy(() => idSchema),
@@ -403,7 +408,7 @@ const subjectSchema = yup.object({
 });
 
 const configurationSchema = yup.object({
-  MainTitle: yup.lazy(() => titleSchema),
+  MainTitle: yup.lazy(() => formTitleSchema),
   Scaffold: yup.array().of(subjectSchema).required(),
 });