feat: implemented use of hook to retrieve reported incidents

src/incidents/visualize/VisualizeIncidents.tsx

@@ -1,31 +1,25 @@
-import {} from '@hospitalrun/components'
+import { Spinner } from '@hospitalrun/components'
 import React from 'react'
-// import { useDispatch, useSelector } from 'react-redux'
-// import { useParams, useHistory } from 'react-router-dom'
 
-// import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
-// import useTitle from '../../page-header/title/useTitle'
-// import useTranslator from '../../shared/hooks/useTranslator'
-// import { RootState } from '../../shared/store'
+import useIncidents from '../hooks/useIncidents'
+import IncidentFilter from '../IncidentFilter'
+import IncidentSearchRequest from '../model/IncidentSearchRequest'
 
-const VisualizeIncidents = () => (
-  // const dispatch = useDispatch()
-  // const { t } = useTranslator()
-  // const history = useHistory()
-  // const { id } = useParams()
-  // const { incident } = useSelector((state: RootState) => state.incident)
-  // useTitle(incident ? incident.code : '')
-  // const breadcrumbs = [
-  //   {
-  //     i18nKey: incident ? incident.code : '',
-  //     location: `/incidents/${id}`,
-  //   },
-  // ]
-  // useAddBreadcrumbs(breadcrumbs)
+const VisualizeIncidents = () => {
+  const searchFilter = IncidentFilter.reported
+  const searchRequest: IncidentSearchRequest = { status: searchFilter }
+  const { data, isLoading } = useIncidents(searchRequest)
 
-  <>
-    <h1>Hello from VisualizeIncidents.tsx!</h1>
-  </>
-)
+  if (data === undefined || isLoading) {
+    return <Spinner type="DotLoader" loading />
+  }
+
+  console.log('data: ', data)
+  return (
+    <>
+      <h1>Hello from Visualize Incidents</h1>
+    </>
+  )
+}
 
 export default VisualizeIncidents