feat: Prepare for multilingual support

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>
  );