feat: Prepare for multilingual support (#357)

* Add fallback to each route

Not sure if this causes any side effects

* Move action texts for basic recommendations to translation file

* Run prettier

* Add component to support line breaks (\n) in translations

* Replace custom component by simple css style

* Remove unnecessary white space

* Move texts for charts to translation file

* Move texts for contact behavior to translation file

* Open links in new tab

* Set rel to noopener

* Move texts for credits to translation file

* Move texts for faqs to translation file

* Add missing attributes (target, rel) to links

* Run prettier

* Move texts for imprint to translation file

* Move texts for legal information to translation file

* Move texts for privacy to translation file

* Move texts for rki to translation file

* Move texts for symptom level to translation file

* Move texts for risk recommendation to translation file

* Move texts for cov map feature info to translation file

* Run prettier

* Add fallback component to routes of embedded app

* Move texts for welcome to common translation file

* Move texts for install promt to common translation file

* Move texts for lazy error to common translation file

* Move text for copying to clipboard to common translation file

* Move texts for welcome info to common translation file

* Run prettier

* Add suspense with fallback to installPromt

Author: jnnwnk

apps/official/components/CovMapFeatureInfo.tsx

@@ -24,6 +24,7 @@ import ContactsLowIcon from "../static/images/contacts-low.svg";
 import ContactsMediumIcon from "../static/images/contacts-medium.svg";
 import SymptomsLowIcon from "../static/images/symptoms-low.svg";
 import { usePathPreservingQueryChange } from "app-config/components/customHistoryHooks";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
   action: {
@@ -148,19 +149,21 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
   );
 
   const ContactsIcon = ({ score }: { score: ContactScore }) => {
+    const { t } = useTranslation("translation");
+
     switch (score) {
       case ContactScore.Low:
         return (
           <div className={center}>
             <ContactsLowIcon />
-            <Typography variant="body2">reduziert</Typography>
+            <Typography variant="body2">{t("contacts-indicator.reduced")}</Typography>
           </div>
         );
       case ContactScore.Medium:
         return (
           <div className={center}>
             <ContactsMediumIcon />
-            <Typography variant="body2">erhöht</Typography>
+            <Typography variant="body2">{t("contacts-indicator.increased")}</Typography>
           </div>
         );
       default:

apps/official/components/basic-recommendations/BasicRecommendations.tsx

@@ -13,8 +13,8 @@ import HygieneIcon from "../../static/images/hand-washing.svg";
 import MaskIcon from "../../static/images/mask.svg";
 import VentilationIcon from "../../static/images/fresh-air.svg";
 import RegionalIcon from "../../static/images/checklist.svg";
-import { ActionTexts } from "../../static/texts/ActionTexts";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles({
   teaser: {
@@ -35,11 +35,14 @@ const useStyles = makeStyles({
     textAlign: "left",
     fontWeight: "bold",
   },
+  multiLineText: {
+    whiteSpace: "break-spaces",
+  },
 });
 
 const CountyTeaser = ({ county, url }: { county: string; url: string }): JSX.Element => {
   const classes = useStyles();
-  const teaser = `${ActionTexts.COUNTY_TEASER_1}${county}${ActionTexts.COUNTY_TEASER_2}`;
+  const { t } = useTranslation("translation");
 
   return (
     <Button href={url} target="_blank" disableRipple>
@@ -48,7 +51,7 @@ const CountyTeaser = ({ county, url }: { county: string; url: string }): JSX.Ele
           <Grid container direction="row" alignItems="center" spacing={2}>
             <Grid item xs={10}>
               <Typography variant="body1" className={classes.leftText}>
-                {teaser}
+                {t("basic-recommendations.county-teaser", { county })}
               </Typography>
             </Grid>
             <Grid item xs={2}>
@@ -63,11 +66,13 @@ const CountyTeaser = ({ county, url }: { county: string; url: string }): JSX.Ele
 
 const FinalTeaser = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <Card className={classes.teaser}>
       <CardContent>
-        <Typography variant="body1" className={classes.leftText}>
-          {ActionTexts.FINAL_TEASER}
+        <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+          {t("basic-recommendations.final-teaser")}
         </Typography>
       </CardContent>
     </Card>
@@ -76,16 +81,18 @@ const FinalTeaser = (): JSX.Element => {
 
 const Intro = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <Grid container direction="column" spacing={4}>
       <Grid item>
         <Typography variant="body1" className={classes.leftText}>
-          {ActionTexts.INTRO_TEASER_1}
+          {t("basic-recommendations.intro-teaser-1")}
         </Typography>
       </Grid>
       <Grid item>
         <Typography variant="body1" className={classes.subHeader}>
-          {ActionTexts.INTRO_TEASER_2}
+          {t("basic-recommendations.intro-teaser-2")}
         </Typography>
       </Grid>
     </Grid>
@@ -94,6 +101,8 @@ const Intro = (): JSX.Element => {
 
 const ContactSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <div>
       <Grid container direction="row">
@@ -102,19 +111,21 @@ const ContactSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.CONTACT_HEADLINE}
+            {t("basic-recommendations.contact.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.CONTACT_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.contact.text")}
       </Typography>
     </div>
   );
 };
 
 const DistanceSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <div>
       <Grid container direction="row">
@@ -123,19 +134,21 @@ const DistanceSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.DISTANCE_HEADLINE}
+            {t("basic-recommendations.distance.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.DISTANCE_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.distance.text")}
       </Typography>
     </div>
   );
 };
 
 const MaskSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <div>
       <Grid container direction="row">
@@ -144,19 +157,21 @@ const MaskSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.MASK_HEADLINE}
+            {t("basic-recommendations.mask.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.MASK_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.mask.text")}
       </Typography>
     </div>
   );
 };
 
 const VentilationSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   return (
     <div>
       <Grid container direction="row">
@@ -165,19 +180,21 @@ const VentilationSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.VENTILATION_HEADLINE}
+            {t("basic-recommendations.ventilation.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.VENTILATION_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.ventilation.text")}
       </Typography>
     </div>
   );
 };
 
 const HygieneSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   return (
     <div>
       <Grid container direction="row">
@@ -186,19 +203,20 @@ const HygieneSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.HYGIENE_HEADLINE}
+            {t("basic-recommendations.hygiene.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.HYGIENE_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.hygiene.text")}
       </Typography>
     </div>
   );
 };
 
 const RegionalSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation();
   return (
     <div>
       <Grid container direction="row">
@@ -207,12 +225,12 @@ const RegionalSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.REGIONAL_HEADLINE}
+            {t("basic-recommendations.regional.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.REGIONAL_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.regional.text")}
       </Typography>
     </div>
   );
@@ -245,12 +263,13 @@ function loadDistrictData(location): DistrictData | undefined {
 export const BasicRecommendations = (): JSX.Element => {
   const location = useLocation();
   const districtData = loadDistrictData(location);
+  const { t } = useTranslation("translation");
 
   return (
     <>
       <main className="sections">
         <section>
-          <NavigationTitle title={ActionTexts.TITLE} backToExpandedFeatureInfo={true} />
+          <NavigationTitle title={t("basic-recommendations.title")} backToExpandedFeatureInfo={true} />
         </section>
         <section>
           {districtData !== undefined ? (

apps/official/components/pages/Charts.tsx

@@ -7,9 +7,11 @@ import { AppApi } from "../../../../src/state/app";
 
 import { formatUTCDate } from "../../../../src/lib/formatUTCDate";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { useTranslation } from "react-i18next";
 
 export const Charts = () => {
   const dispatch = useThunkDispatch();
+  const { t } = useTranslation("translation");
   const currentDate = useSelector((state: State) => state.app.currentDate);
   const dateKey = formatUTCDate(currentDate);
   const dataUrl =
@@ -43,7 +45,7 @@ export const Charts = () => {
         justifyContent: "center",
       }}
     >
-      <NavigationTitle title={"Deutschlandweite Graphen"} />
+      <NavigationTitle title={t("pages.charts")} />
       <div style={{ width: "100%", height: "calc(100vh - 150px)" }}>
         <ResponsiveContainer>
           <LineChart
@@ -67,15 +69,15 @@ export const Charts = () => {
               dataKey={"CI"}
               stroke="#8884d8"
               strokeWidth="4px"
-              name="Kontaktindex C"
+              name={t("charts.contact-index") as string}
             />
             <Line
               yAxisId="right"
               type="monotone"
               dataKey={"R"}
               stroke="#f01a8d"
               strokeWidth="4px"
-              name="Reproduktionszahl R"
+              name={t("charts.reproduction-rate") as string}
             />
           </LineChart>
         </ResponsiveContainer>

apps/official/components/pages/ContactBehavior.tsx

@@ -1,56 +1,40 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { Trans, useTranslation } from "react-i18next";
 
 const ContactBehavior = () => {
+  const { t } = useTranslation("translation");
+
   return (
     <main className="sections">
       <section>
-        <NavigationTitle title="Kontaktverhalten" backToExpandedFeatureInfo={true} />
+        <NavigationTitle title={t("pages.contact-behavior")} backToExpandedFeatureInfo={true} />
       </section>
 
       <section>
-        <Typography>Was ist das Kontaktverhalten und warum ist es wichtig?</Typography>
-        <Typography>
-          Das Virus wird von Mensch zu Mensch übertragen. Indem wir Kontakte reduzieren, können wir es dem Virus
-          erschweren, sich in der Bevölkerung zu verbreiten. Dabei ist der{" "}
-          <a href="https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/Projekte_RKI/R-Wert-Erlaeuterung.pdf?__blob=publicationFile">
-            R-Wert
-          </a>{" "}
-          ist eine wichtige Maßzahl, mit der wir beurteilen können, ob wir es dem Virus schwer genug gemacht haben.
-        </Typography>
-        <Typography>
-          Der R-Wert besagt, wie viele Personen von einer infizierten Person im Durchschnitt angesteckt werden. Wenn der
-          R-Wert 1 beträgt, bedeutet dies, dass eine infizierte Person im Schnitt nur eine weitere ansteckt. Ziel ist
-          es, durch Maßnahmen einen R Wert unter 1 zu erreichen, d.h., dass eine infizierte Person im Durchschnitt
-          weniger als eine weitere Person ansteckt. Ein R-Wert oberhalb von 1 führt dagegen zu einer Kettenreaktion mit
-          einem unkontrollierten Anstieg der Fallzahlen. Der R-Wert hängt einerseits von der Biologie des Virus ab ("wie
-          ansteckungsfähig ist das Virus?"), andererseits von unserem Kontaktverhalten ("auf wie viele Personen treffe
-          ich?"). Während wir die Biologie des Virus nicht ändern können, können wir durch unser Kontaktverhalten einen
-          großen Einfluss auf das Infektionsgeschehen nehmen. Indem wir unsere Kontakte reduzieren, können wir es auch
-          einem hoch ansteckenden Virus so schwer machen, eine weitere Person zu infizieren, dass der R-Wert unter 1
-          sinkt.
-        </Typography>
-        <Typography>
-          Das Problem des R-Werts ist es, dass er das Infektionsgeschehen mit mehreren Tage Verzögerung abbildet, da er
-          aus der Zahl der bestätigten Infektionen berechnet wird. Dies erscheint auch logisch, wenn man bedenkt, dass
-          man nach einer Ansteckung mit dem Coronavirus nicht sofort Symptome entwickelt und auch das Ergebnis eines
-          Labortests mit mehreren Tagen Verzögerung dem Robert-Koch-Institut mitgeteilt wird. Der R-Wert ist somit immer
-          ein Blick in die Vergangenheit.
-        </Typography>
+        <Typography>{t("contact-behavior.intro")}</Typography>
         <Typography>
-          Unsere Gruppe hat ein{" "}
-          <a href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2">
-            Modell für das Kontaktverhalten auf Basis von GPS Daten
-          </a>{" "}
-          entwickelt. Über die Berechnung eines sogenannten Kontakt-Index können wir den R-Wert vorhersagen. Der Vorteil
-          vom Kontakt-Index ist nun, dass er fast ohne Verzögerung berechnet werden kann.
+          <Trans i18nKey="contact-behavior.text-1">
+            part-0
+            <a href={t("contact-behavior.external-explanation-reproduction-rate")} target="_blank" rel="noopener">
+              link-title
+            </a>
+            part-2
+          </Trans>
         </Typography>
+        <Typography>{t("contact-behavior.text-2")}</Typography>
+        <Typography>{t("contact-behavior.text-3")}</Typography>
         <Typography>
-          Von einem erhöhten Kontaktverhalten sprechen wir, wenn unser Modell voraussagt, dass in einer Region so viele
-          Kontakte vorhanden sind, dass sich das Virus leicht ausbreiten kann und wir davon ausgehen, dass der R-Wert
-          über 1 liegen wird.
+          <Trans i18nKey="contact-behavior.text-4">
+            part-0
+            <a href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2" target="_blank" rel="noopener">
+              Modell für das Kontaktverhalten auf Basis von GPS Daten
+            </a>
+            part-2
+          </Trans>
         </Typography>
+        <Typography>{t("contact-behavior.text-5")}</Typography>
       </section>
     </main>
   );