Skip to content

Commit

Permalink
fix(incidents): add loading during fetch phase (HospitalRun#2085)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcosvega91
marcosvega91 authored May 20, 2020
1 parent a1291bc commit d1fb940
Showing 1 changed file with 69 additions and 67 deletions.
136 changes: 69 additions & 67 deletions src/incidents/view/ViewIncident.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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 <Spinner type="BarLoader" loading />
}

export default ViewIncident

0 comments on commit d1fb940

Please sign in to comment.