Common Translations

[manudous]

There are different ways to approach the translation problem. We have different constants in manfred-common. Let's look at the example in experience-section.constants to understand the issue, but this extrapolates to all others.

import { Type } from "./experience-section.vm";

export const types: Type[] = [
  { key: "freelance", value: "Autónomo" },
  { key: "publicAdministration", value: "Administración pública" },
  { key: "NGO", value: "ONG" },
  { key: "startup", value: "Startup" },
  { key: "SME", value: "PYME" },
  { key: "bigCorp", value: "Gran empresa" },
  { key: "academicalInstitution", value: "Institución académica" },
  { key: "other", value: "Otro" },
];

In this case, we are already using the value according to what we receive from JSON. But now there is a need to have it in English. How do we do it? Several options come to mind:

1. Add a new field with the English translation. But this forces us to maintain two fields. Also, if we want to add more languages, it complicates things.

./packages/manfred-common/src/experience-section/experience-section.constants.ts

import { Type } from "./experience-section.vm";

export const types: Type[] = [
  { key: "freelance", es: "Autónomo", en: "Freelance" },
  { key: "publicAdministration", es: "Administración pública", en: "Public administration" },
  { key: "NGO", es: "ONG", en: "NGO" },
  { key: "startup", es: "Startup", en: "Startup" },
  { key: "SME", es: "PYME", en: "SME" },
  { key: "bigCorp", es: "Gran empresa", en: "Big corp" },
  { key: "academicalInstitution", es: "Institución académica", en: "Academical institution" },
  { key: "other", es: "Otro", en: "Other" },
];

2. Remove the types and directly add what comes from JSON in the mapper, which would be the key, and then translate it as needed in each application. The only thing we would pass is the key we had in the types, i.e., freelance, publicAdministration, etc.

./packages/manfred-awesomic-cv/src/mappers/experience/experience.mapper.ts

export const mapJobToExperience = (job: JobManfredAwesomicCV): ExperienceVm => ({
  name: job.organization?.name ?? '',
  description: job.organization?.description ?? '',
-  type: mapOrganizationType(job.type, types),
+  type: job.type ?? '',
  roles: job.roles?.map(role => role),
});

This way, we can pass the type in each application and translate it as needed. But this forces us to do it in each application. Also, if we want to add more languages, we would have to do it in each application.

3. As a third option, I suggest doing the translations in manfred-common and serving them to the different applications. In each application, we would already have access to the translations. With this, we would only have to add common translations in one place, and they would be available in all applications. Additionally, if we want to add more languages, we only need to add them in one place.

The biggest problem I see is how to do it; I think it can be done by detecting the browser's language and, based on that, loading the translations. However, I'm not sure if this is the best way to do it. Since these are independent packages, we would need to investigate whether it can be done.