feat: individualize risk texts (#259)

CovOpen · Oct 27, 2020 · 06550a1 · 06550a1
1 parent 406dcfd
commit 06550a1
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 25 deletions.
diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx
@@ -221,7 +221,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
         {/*  <Typography>{riskDescription}</Typography>*/}
         {/*</Grid>*/}
         <Grid item xs={12}>
-          {RiskRecommendation({ riskScore })}
+          <RiskRecommendation contactScore={contactScore} incidence={incidence} />
         </Grid>
         <Grid item xs={12} alignContent="stretch">
           <ContactBehaviorCategory />

diff --git a/apps/official/components/pages/Credits.tsx b/apps/official/components/pages/Credits.tsx
@@ -77,10 +77,11 @@ export const Credits = () => {
             NET CHECK: PD. Dr. Sten Rüdiger <br />
             Datenanalyse GPS-Daten, Kontakt-Index
           </Typography>
-            <Typography variant="h2"><br />
+          <Typography variant="h2">
+            <br />
             Die CovMap App wurde mit der Unterstützung von zahlreichen Personen und Unternehmen entwickelt. Wir möchten
             an dieser Stelle unseren großen Dank aussprechen.
-              <br />
+            <br />
           </Typography>
           <Typography variant="body1">Wir danken den Unternehmen:</Typography>
           <Grid container spacing={3}>

diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx
@@ -1,13 +1,40 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { Card, CardContent, Button, IconButton, Grid } from "@material-ui/core";
+import { Card, Grid } from "@material-ui/core";
 import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
 
 import Typography from "@material-ui/core/Typography";
 import { Link } from "react-router-dom";
 
-import { RiskScore } from "../../models";
-import { RiskTexts } from "../../static/texts/RiskTexts";
+import { ContactScore } from "../../models";
+
+function riscExplanation(contactScore: number, incidence: number): string {
+  if (incidence < 20 && contactScore <= 0) {
+    return "Die Zahl der Neuinfektionen ist niedrig und das Kontaktverhalten ist ausreichend reduziert. Ein normales Risiko bedeutet nicht, dass keine Neuinfektionen in der Region möglich sind.";
+  }
+
+  let explanation = "";
+
+  if (incidence >= 50) {
+    explanation = "Die Zahl der Neuinfektionen ist stark erhöht. ";
+    if (contactScore == 1) {
+      explanation +=
+        "Aufgrund eines erhöhten Kontaktverhalten gehen wir von einem weiteren Anstieg der Neuinfektionen aus. ";
+    }
+    explanation += "Wir rufen dazu auf, Kontakte freiwillig auf das Allernötigste zu reduzieren.";
+    return explanation;
+  }
+
+  if (incidence >= 20) {
+    explanation = "Die Zahl der Neuinfektionen ist mäßig erhöht. ";
+  }
+  if (contactScore == 1) {
+    explanation +=
+      "Aufgrund eines erhöhten Kontaktverhalten gehen wir von einem weiteren Anstieg der Neuinfektionen aus. ";
+  }
+  explanation += "Wir rufen dazu auf, Kontakte freiwillig zu reduzieren.";
+  return explanation;
+}
 
 const useStyles = makeStyles((theme) => ({
   teaser: {
@@ -27,15 +54,18 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Recommendation = ({ recommendation }: { recommendation: string }): JSX.Element => {
+export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidence: number }> = ({
+  contactScore,
+  incidence,
+}): JSX.Element => {
   const classes = useStyles();
 
   return (
     <Link to="/risk-levels" style={{ textDecoration: "none" }} aria-label="go to explanation">
       <Card className={classes.teaser}>
         <Grid container direction="row" alignItems="center" spacing={2}>
           <Grid item xs={10}>
-            <Typography variant="body2">{recommendation}</Typography>
+            <Typography variant="body2">{riscExplanation(contactScore, incidence)}</Typography>
           </Grid>
           <Grid item xs={2}>
             <ArrowForwardIosIcon className={classes.centerIcon} fontSize="small" />
@@ -45,20 +75,3 @@ const Recommendation = ({ recommendation }: { recommendation: string }): JSX.Ele
     </Link>
   );
 };
-
-export const RiskRecommendation = ({ riskScore }: { riskScore: RiskScore }) => {
-  switch (riskScore) {
-    case RiskScore.Low:
-      return <Recommendation recommendation={RiskTexts.NORMAL} />;
-
-    case RiskScore.Medium:
-      return <Recommendation recommendation={RiskTexts.MEDIUM} />;
-
-    case RiskScore.High:
-      return <Recommendation recommendation={RiskTexts.HIGH} />;
-
-    default:
-      console.warn("cannot display risk score -- unrecognized score value");
-      return null;
-  }
-};