From 7aa4f3bf7d4a45490c9e7547ddfa3ed92800e983 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lotta=20Skogstr=C3=B6m?= <lotta.skogstrom@futurice.com>
Date: Wed, 29 Apr 2020 15:32:31 +0300
Subject: [PATCH 1/2] Handle data when there's less than 25 responses

---
 src/frontend/main/ModalContent.tsx | 15 ++++++++++-----
 src/frontend/main/TableView.tsx    | 20 +++++++++++++++-----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/frontend/main/ModalContent.tsx b/src/frontend/main/ModalContent.tsx
index 22087992..8affb23a 100644
--- a/src/frontend/main/ModalContent.tsx
+++ b/src/frontend/main/ModalContent.tsx
@@ -62,7 +62,10 @@ const ModalContent = ({ content, hide }: ModalContentProps) => {
         <H2>{content.city}</H2>
       </ModalHeader>
       <H3>
-        Vastauksia yhteensä: {formattedData.responsesTotal} ({formattedData.percentageOfPopulation} % väkiluvusta)
+        Vastauksia yhteensä: {formattedData.responsesTotal}{' '}
+        {formattedData.percentageOfPopulation != null
+          ? `(${formattedData.percentageOfPopulation} % väkiluvusta)`
+          : null}
       </H3>
       <Description>{formattedData.responsesTotal !== '< 25' ? 'Verrattuna kunnan väkilukuun' : null}</Description>
       <Symptoms>
@@ -70,22 +73,24 @@ const ModalContent = ({ content, hide }: ModalContentProps) => {
           <tbody>
             <tr>
               <td>{formattedData.suspicionTotal}</td>
-              <td>{formattedData.suspicionPercentage} %</td>
+              {formattedData.suspicionPercentage != null ? <td>{formattedData.suspicionPercentage} %</td> : null}
               <th scope="row">Epäilys koronavirus&shy;tartunnasta</th>
             </tr>
             <tr>
               <td>{formattedData.coughTotal}</td>
-              <td>{formattedData.coughPercentage} %</td>
+              {formattedData.coughPercentage != null ? <td>{formattedData.coughPercentage} %</td> : null}
               <th scope="row">Yskää</th>
             </tr>
             <tr>
               <td>{formattedData.feverTotal}</td>
-              <td>{formattedData.feverPercentage} %</td>
+              {formattedData.feverPercentage != null ? <td>{formattedData.feverPercentage} %</td> : null}
               <th scope="row">Kuumetta</th>
             </tr>
             <tr>
               <td>{formattedData.breathingDifficultiesTotal}</td>
-              <td>{formattedData.breathingDifficultiesPercentage} %</td>
+              {formattedData.breathingDifficultiesPercentage != null ? (
+                <td>{formattedData.breathingDifficultiesPercentage} %</td>
+              ) : null}
               <th scope="row">Vaikeuksia hengittää</th>
             </tr>
           </tbody>
diff --git a/src/frontend/main/TableView.tsx b/src/frontend/main/TableView.tsx
index 64567e85..16478028 100644
--- a/src/frontend/main/TableView.tsx
+++ b/src/frontend/main/TableView.tsx
@@ -156,7 +156,11 @@ const TableView = ({ data, cities, isEmbed }: TableViewProps) => {
               <CityHeadingContainer>
                 <CityHeading>{item.city}</CityHeading>
                 <BoldText>Vastauksia yhteensä {formattedData.responsesTotal}</BoldText>
-                <ItalicText>{formattedData.percentageOfPopulation} % väkiluvusta</ItalicText>
+                <ItalicText>
+                  {formattedData.percentageOfPopulation != null
+                    ? `${formattedData.percentageOfPopulation} % väkiluvusta`
+                    : null}
+                </ItalicText>
               </CityHeadingContainer>
               <Table>
                 <TableHead>
@@ -170,22 +174,28 @@ const TableView = ({ data, cities, isEmbed }: TableViewProps) => {
                   <tr>
                     <th scope="row">Epäilys koronavirus&shy;tartunnasta</th>
                     <td>{formattedData.suspicionTotal}</td>
-                    <td>{formattedData.suspicionPercentage} %</td>
+                    <td>
+                      {formattedData.suspicionPercentage != null ? `${formattedData.suspicionPercentage} %` : '-'}
+                    </td>
                   </tr>
                   <tr>
                     <th scope="row">Yskää</th>
                     <td>{formattedData.coughTotal}</td>
-                    <td>{formattedData.coughPercentage} %</td>
+                    <td>{formattedData.coughPercentage != null ? `${formattedData.coughPercentage} %` : '-'}</td>
                   </tr>
                   <tr>
                     <th scope="row">Kuumetta</th>
                     <td>{formattedData.feverTotal}</td>
-                    <td>{formattedData.feverPercentage} %</td>
+                    <td>{formattedData.feverPercentage != null ? `${formattedData.feverPercentage} %` : '-'}</td>
                   </tr>
                   <tr>
                     <th scope="row">Vaikeuksia hengittää</th>
                     <td>{formattedData.breathingDifficultiesTotal}</td>
-                    <td>{formattedData.breathingDifficultiesPercentage} %</td>
+                    <td>
+                      {formattedData.breathingDifficultiesPercentage != null
+                        ? `${formattedData.breathingDifficultiesPercentage} %`
+                        : '-'}
+                    </td>
                   </tr>
                 </tbody>
               </Table>

From 316254825c3012065e4cbdbe75b8a59621a0313d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lotta=20Skogstr=C3=B6m?= <lotta.skogstrom@futurice.com>
Date: Wed, 29 Apr 2020 15:44:16 +0300
Subject: [PATCH 2/2] Don't render element without content

---
 src/frontend/main/ModalContent.tsx | 2 +-
 src/frontend/main/TableView.tsx    | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/frontend/main/ModalContent.tsx b/src/frontend/main/ModalContent.tsx
index 8affb23a..656e0b80 100644
--- a/src/frontend/main/ModalContent.tsx
+++ b/src/frontend/main/ModalContent.tsx
@@ -67,7 +67,7 @@ const ModalContent = ({ content, hide }: ModalContentProps) => {
           ? `(${formattedData.percentageOfPopulation} % väkiluvusta)`
           : null}
       </H3>
-      <Description>{formattedData.responsesTotal !== '< 25' ? 'Verrattuna kunnan väkilukuun' : null}</Description>
+      {formattedData.responsesTotal !== '< 25' ? <Description>Verrattuna kunnan väkilukuun</Description> : null}
       <Symptoms>
         <table>
           <tbody>
diff --git a/src/frontend/main/TableView.tsx b/src/frontend/main/TableView.tsx
index 16478028..c23154b8 100644
--- a/src/frontend/main/TableView.tsx
+++ b/src/frontend/main/TableView.tsx
@@ -156,11 +156,10 @@ const TableView = ({ data, cities, isEmbed }: TableViewProps) => {
               <CityHeadingContainer>
                 <CityHeading>{item.city}</CityHeading>
                 <BoldText>Vastauksia yhteensä {formattedData.responsesTotal}</BoldText>
-                <ItalicText>
-                  {formattedData.percentageOfPopulation != null
-                    ? `${formattedData.percentageOfPopulation} % väkiluvusta`
-                    : null}
-                </ItalicText>
+
+                {formattedData.percentageOfPopulation != null ? (
+                  <ItalicText>{formattedData.percentageOfPopulation} % väkiluvusta</ItalicText>
+                ) : null}
               </CityHeadingContainer>
               <Table>
                 <TableHead>