feat(network-status): implement useNetworkStatus hook

src/HospitalRun.tsx

@@ -5,7 +5,7 @@ import { Switch, Route } from 'react-router-dom'
 
 import Breadcrumbs from './breadcrumbs/Breadcrumbs'
 import Navbar from './components/Navbar'
-import { NetworkStatus } from './components/network-status/NetworkStatus'
+import { NetworkStatusMessage } from './components/network-status'
 import PrivateRoute from './components/PrivateRoute'
 import Sidebar from './components/Sidebar'
 import Dashboard from './dashboard/Dashboard'
@@ -24,7 +24,7 @@ const HospitalRun = () => {
 
   return (
     <div>
-      <NetworkStatus />
+      <NetworkStatusMessage />
       <Navbar />
       <div className="container-fluid">
         <Sidebar />

src/__tests__/components/network-status/NetworkStatusMessage.test.tsx

@@ -1,23 +1,42 @@
 import { render, shallow } from 'enzyme'
 import React from 'react'
 
+import { NetworkStatusMessage } from '../../../components/network-status'
 import {
-  NetworkStatusMessage,
   OFFLINE_MESSAGE,
   ONLINE_MESSAGE,
 } from '../../../components/network-status/NetworkStatusMessage'
+import { useNetworkStatus } from '../../../components/network-status/useNetworkStatus'
+
+jest.mock('../../../components/network-status/useNetworkStatus')
+const useNetworkStatusCast = (useNetworkStatus as unknown) as jest.MockInstance<
+  ReturnType<typeof useNetworkStatus>,
+  any
+>
 
 describe('NetworkStatusMessage', () => {
   it('returns null if the app has always been online', () => {
-    const wrapper = shallow(<NetworkStatusMessage online wasOffline={false} />)
+    useNetworkStatusCast.mockReturnValue({
+      isOnline: true,
+      wasOffline: false,
+    })
+    const wrapper = shallow(<NetworkStatusMessage />)
     expect(wrapper.equals(null as any)).toBe(true)
   })
   it(`shows the message "${OFFLINE_MESSAGE}" if the app goes offline`, () => {
-    const wrapper = render(<NetworkStatusMessage online={false} wasOffline={false} />)
+    useNetworkStatusCast.mockReturnValue({
+      isOnline: false,
+      wasOffline: false,
+    })
+    const wrapper = render(<NetworkStatusMessage />)
     expect(wrapper.text()).toContain(OFFLINE_MESSAGE)
   })
   it(`shows the message "${ONLINE_MESSAGE}" if the app goes back online after it was offline`, () => {
-    const wrapper = render(<NetworkStatusMessage online wasOffline />)
+    useNetworkStatusCast.mockReturnValue({
+      isOnline: true,
+      wasOffline: true,
+    })
+    const wrapper = render(<NetworkStatusMessage />)
     expect(wrapper.text()).toContain(ONLINE_MESSAGE)
   })
 })

src/components/network-status/NetworkStatusMessage.tsx

@@ -1,31 +1,27 @@
 import React, { useState } from 'react'
 
+import { useNetworkStatus } from './useNetworkStatus'
 import './styles.css'
 
-interface Props {
-  online: boolean
-  wasOffline: boolean
-}
-
 export const OFFLINE_MESSAGE = 'you are working in offline mode'
 export const ONLINE_MESSAGE = 'you are back online'
 const OPACITY_TRANSITION_TIME = 4000
 
-export const NetworkStatusMessage = (props: Props) => {
-  const { online, wasOffline } = props
+export const NetworkStatusMessage = () => {
+  const { isOnline, wasOffline } = useNetworkStatus()
   const [display, setDisplay] = useState('flex')
   const [opacity, setOpacity] = useState(1)
 
-  if (online && !wasOffline) {
+  if (isOnline && !wasOffline) {
     return null
   }
 
-  if (!online && opacity !== 1) {
+  if (!isOnline && opacity !== 1) {
     setDisplay('flex')
     setOpacity(1)
   }
 
-  if (online && wasOffline && opacity !== 0) {
+  if (isOnline && wasOffline && opacity !== 0) {
     setOpacity(0)
     setTimeout(() => {
       setDisplay('none')
@@ -34,10 +30,10 @@ export const NetworkStatusMessage = (props: Props) => {
 
   return (
     <div
-      className={`network-status-message ${online ? 'online' : 'offline'}`}
+      className={`network-status-message ${isOnline ? 'online' : 'offline'}`}
       style={{ display, opacity, transition: `opacity ${OPACITY_TRANSITION_TIME}ms ease-in` }}
     >
-      {online ? ONLINE_MESSAGE : OFFLINE_MESSAGE}
+      {isOnline ? ONLINE_MESSAGE : OFFLINE_MESSAGE}
     </div>
   )
 }

src/components/network-status/index.ts

@@ -0,0 +1,2 @@
+export { NetworkStatusMessage } from './NetworkStatusMessage'
+export { useNetworkStatus } from './useNetworkStatus'

src/components/network-status/types.ts

@@ -0,0 +1,4 @@
+export interface NetworkStatus {
+  isOnline: boolean
+  wasOffline: boolean
+}

src/components/network-status/NetworkStatus.tsx → src/components/network-status/useNetworkStatus.ts

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 
-import { NetworkStatusMessage } from './NetworkStatusMessage'
+import { NetworkStatus } from './types'
 
-export const NetworkStatus = () => {
+export const useNetworkStatus = (): NetworkStatus => {
   const [networkStatus, setNetworkStatus] = useState({
     isOnline: true,
     wasOffline: false,
@@ -23,7 +23,5 @@ export const NetworkStatus = () => {
     }
   }, [])
 
-  return (
-    <NetworkStatusMessage online={networkStatus.isOnline} wasOffline={networkStatus.wasOffline} />
-  )
+  return networkStatus
 }