From 9ad4cbf71ce06f3b3fe9a013d935a8335b845c30 Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Sun, 17 May 2020 10:40:22 +0200
Subject: [PATCH 1/2] fix(viewincident): add loading during fetch phase

fix #2081
---
 src/incidents/view/ViewIncident.tsx | 134 ++++++++++++++--------------
 1 file changed, 68 insertions(+), 66 deletions(-)

diff --git a/src/incidents/view/ViewIncident.tsx b/src/incidents/view/ViewIncident.tsx
index fae2e0c7ec..228b05f330 100644
--- a/src/incidents/view/ViewIncident.tsx
+++ b/src/incidents/view/ViewIncident.tsx
@@ -31,72 +31,74 @@ const ViewIncident = () => {
       dispatch(fetchIncident(id))
     }
   }, [dispatch, id])
-
-  return (
-    <>
-      <Row>
-        <Column>
-          <div className="form-group incident-date">
-            <h4>{t('incidents.reports.dateOfIncident')}</h4>
-            <h5>{format(new Date(incident?.date || ''), 'yyyy-MM-dd hh:mm a')}</h5>
-          </div>
-        </Column>
-        <Column>
-          <div className="form-group incident-status">
-            <h4>{t('incidents.reports.status')}</h4>
-            <h5>{incident?.status}</h5>
-          </div>
-        </Column>
-        <Column>
-          <div className="form-group incident-reported-by">
-            <h4>{t('incidents.reports.reportedBy')}</h4>
-            <h5>{incident?.reportedBy}</h5>
-          </div>
-        </Column>
-        <Column>
-          <div className="form-group incident-reported-on">
-            <h4>{t('incidents.reports.reportedOn')}</h4>
-            <h5>{format(new Date(incident?.reportedOn || ''), 'yyyy-MM-dd hh:mm a')}</h5>
-          </div>
-        </Column>
-      </Row>
-      <div className="border-bottom mb-2" />
-      <Row>
-        <Column md={12}>
-          <TextInputWithLabelFormGroup
-            label={t('incidents.reports.department')}
-            name="department"
-            value={incident?.department}
-          />
-        </Column>
-      </Row>
-      <Row>
-        <Column md={6}>
-          <TextInputWithLabelFormGroup
-            name="category"
-            label={t('incidents.reports.category')}
-            value={incident?.category}
-          />
-        </Column>
-        <Column md={6}>
-          <TextInputWithLabelFormGroup
-            label={t('incidents.reports.categoryItem')}
-            name="categoryItem"
-            value={incident?.categoryItem}
-          />
-        </Column>
-      </Row>
-      <Row>
-        <Column md={12}>
-          <TextFieldWithLabelFormGroup
-            label={t('incidents.reports.description')}
-            name="description"
-            value={incident?.description}
-          />
-        </Column>
-      </Row>
-    </>
-  )
+  if (incident) {
+    return (
+      <>
+        <Row>
+          <Column>
+            <div className="form-group incident-date">
+              <h4>{t('incidents.reports.dateOfIncident')}</h4>
+              <h5>{format(new Date(incident?.date || ''), 'yyyy-MM-dd hh:mm a')}</h5>
+            </div>
+          </Column>
+          <Column>
+            <div className="form-group incident-status">
+              <h4>{t('incidents.reports.status')}</h4>
+              <h5>{incident?.status}</h5>
+            </div>
+          </Column>
+          <Column>
+            <div className="form-group incident-reported-by">
+              <h4>{t('incidents.reports.reportedBy')}</h4>
+              <h5>{incident?.reportedBy}</h5>
+            </div>
+          </Column>
+          <Column>
+            <div className="form-group incident-reported-on">
+              <h4>{t('incidents.reports.reportedOn')}</h4>
+              <h5>{format(new Date(incident?.reportedOn || ''), 'yyyy-MM-dd hh:mm a')}</h5>
+            </div>
+          </Column>
+        </Row>
+        <div className="border-bottom mb-2" />
+        <Row>
+          <Column md={12}>
+            <TextInputWithLabelFormGroup
+              label={t('incidents.reports.department')}
+              name="department"
+              value={incident?.department}
+            />
+          </Column>
+        </Row>
+        <Row>
+          <Column md={6}>
+            <TextInputWithLabelFormGroup
+              name="category"
+              label={t('incidents.reports.category')}
+              value={incident?.category}
+            />
+          </Column>
+          <Column md={6}>
+            <TextInputWithLabelFormGroup
+              label={t('incidents.reports.categoryItem')}
+              name="categoryItem"
+              value={incident?.categoryItem}
+            />
+          </Column>
+        </Row>
+        <Row>
+          <Column md={12}>
+            <TextFieldWithLabelFormGroup
+              label={t('incidents.reports.description')}
+              name="description"
+              value={incident?.description}
+            />
+          </Column>
+        </Row>
+      </>
+    )
+  }
+  return <h1>Loading...</h1>
 }
 
 export default ViewIncident

From 5e2e76d16bffa517bf136e71655680f68bb5a89c Mon Sep 17 00:00:00 2001
From: marcosvega91 <marcomoretti0103@gmail.com>
Date: Mon, 18 May 2020 09:33:46 +0200
Subject: [PATCH 2/2] fix(viewincident): fix after review

---
 src/incidents/view/ViewIncident.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/incidents/view/ViewIncident.tsx b/src/incidents/view/ViewIncident.tsx
index 228b05f330..e68436cf26 100644
--- a/src/incidents/view/ViewIncident.tsx
+++ b/src/incidents/view/ViewIncident.tsx
@@ -1,4 +1,4 @@
-import { Column, Row } from '@hospitalrun/components'
+import { Column, Row, Spinner } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -38,25 +38,25 @@ const ViewIncident = () => {
           <Column>
             <div className="form-group incident-date">
               <h4>{t('incidents.reports.dateOfIncident')}</h4>
-              <h5>{format(new Date(incident?.date || ''), 'yyyy-MM-dd hh:mm a')}</h5>
+              <h5>{format(new Date(incident.date || ''), 'yyyy-MM-dd hh:mm a')}</h5>
             </div>
           </Column>
           <Column>
             <div className="form-group incident-status">
               <h4>{t('incidents.reports.status')}</h4>
-              <h5>{incident?.status}</h5>
+              <h5>{incident.status}</h5>
             </div>
           </Column>
           <Column>
             <div className="form-group incident-reported-by">
               <h4>{t('incidents.reports.reportedBy')}</h4>
-              <h5>{incident?.reportedBy}</h5>
+              <h5>{incident.reportedBy}</h5>
             </div>
           </Column>
           <Column>
             <div className="form-group incident-reported-on">
               <h4>{t('incidents.reports.reportedOn')}</h4>
-              <h5>{format(new Date(incident?.reportedOn || ''), 'yyyy-MM-dd hh:mm a')}</h5>
+              <h5>{format(new Date(incident.reportedOn || ''), 'yyyy-MM-dd hh:mm a')}</h5>
             </div>
           </Column>
         </Row>
@@ -66,7 +66,7 @@ const ViewIncident = () => {
             <TextInputWithLabelFormGroup
               label={t('incidents.reports.department')}
               name="department"
-              value={incident?.department}
+              value={incident.department}
             />
           </Column>
         </Row>
@@ -75,14 +75,14 @@ const ViewIncident = () => {
             <TextInputWithLabelFormGroup
               name="category"
               label={t('incidents.reports.category')}
-              value={incident?.category}
+              value={incident.category}
             />
           </Column>
           <Column md={6}>
             <TextInputWithLabelFormGroup
               label={t('incidents.reports.categoryItem')}
               name="categoryItem"
-              value={incident?.categoryItem}
+              value={incident.categoryItem}
             />
           </Column>
         </Row>
@@ -91,14 +91,14 @@ const ViewIncident = () => {
             <TextFieldWithLabelFormGroup
               label={t('incidents.reports.description')}
               name="description"
-              value={incident?.description}
+              value={incident.description}
             />
           </Column>
         </Row>
       </>
     )
   }
-  return <h1>Loading...</h1>
+  return <Spinner type="BarLoader" loading />
 }
 
 export default ViewIncident