feat(network-status): Notify users when they're working offline

[alessioprestileo]

Fixes #1773.

Changes proposed in this pull request:

• Implement NetworkStatus component
• Write tests for NetworkStatusMessage component
• Render NetworkStatus component in src/HospitalRun.tsx

[jsf-clabot]

All committers have signed the CLA.

[gitpod-io]

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hospitalrun/hospitalrun-frontend/hvvlu7ucu
✅ Preview: https://hospitalrun-frontend-git-fork-alessioprestileo-master.hospitalrun.now.sh

[matteovivona]

Thank you for your contribution!
However, there is no way I can trigger the event to work offline. Where do I see working offline?

Edit: ok there is something strange. I tried a second time from the Vercel preview link and I saw the banner only on the first page (I was on patients). Moving on the dashboard, the banner was gone. (I was working with the wifi off). During the third attempt, I always saw the alert correctly. Tested on Chrome.

[ghost]

Functionality and UI look great. I suggest we'll look into a hook possibility.

[alessioprestileo]

@tehkapa
I don't know what the problem you faced could be caused by, I tried this link
https://hospitalrun-frontend-git-fork-alessioprestileo-master.hospitalrun.now.sh/labs
on Firefox and Chromium and it seems to work correctly.

[matteovivona]

@tehkapa
I don't know what the problem you faced could be caused by, I tried this link
https://hospitalrun-frontend-git-fork-alessioprestileo-master.hospitalrun.now.sh/labs
on Firefox and Chromium and it seems to work correctly.

Ok, got it. On Safari doesn't work.

[ghost]

On page reload (like a refresh), the offline message is absent. I think we'd like to notify the user about the status if they are working offline at the page load. This will be nice when user is offline, and then refreshes a page. The status bar would 'stay' there to indicate user is still offline.

[alessioprestileo]

On page reload (like a refresh), the offline message is absent. I think we'd like to notify the user about the status if they are working offline at the page load. This will be nice when user is offline, and then refreshes a page. The status bar would 'stay' there to indicate user is still offline.

@kumikokashii I don't understand this comment... If the user is offline, then the page cannot be refreshed, the browser will show an error when trying to refresh the page.
Did you mean something different?

[matteovivona]

On page reload (like a refresh), the offline message is absent. I think we'd like to notify the user about the status if they are working offline at the page load. This will be nice when user is offline, and then refreshes a page. The status bar would 'stay' there to indicate user is still offline.

@kumikokashii I don't understand this comment... If the user is offline, then the page cannot be refreshed, the browser will show an error when trying to refresh the page.
Did you mean something different?

No, when a user reloads a page, HR must continue to work (since it is offline first).

Here's a gif of the problem. https://jmp.sh/EvkscMx
I translate Firefox label: "Lavora non in linea" = "Work offline"

[alessioprestileo]

@tehkapa Ok, now I see your point... I didn't know that there was an option in the browser to work offline, I was testing this feature by turning the wi-fi off.
At the moment the NetworkStatusMessage component is only listening to the event dispatched when the network status changes. When it's mounted it assumes the network is online. I can improve it so that when it's mounted it checks the network status using "navigator.onLine" (https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine).
Is this what you meant @kumikokashii?

[ghost]

When it's mounted it assumes the network is online. I can improve it so that when it's mounted it checks the network status using "navigator.onLine" (https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine).

@alessioprestileo That looks like what we are looking for. Thank you 🙂

[alessioprestileo]

My commits from today should address all the comments 😃
Sorry for the force-push, not sure why I needed that 🤦

[ghost]

@alessioprestileo Hello! Thank you for the updates. I'm only about 95% that the css style and the test's translation parts are the most optimal, but it's functioning well after a page refresh, and I think it's ready go.