Handle CORS / Network problems

[Ryuno-Ki]

Describe the bug:

During work on #413 I observed CORS issues (localhost:3000 couldn't reach localhost:5000/graphql).
From what I can see, error cases on the network level are not properly handled in the UI.
#413 is showing a technical error message. However, a proper UI/UX spec should be defined what to do if data can't be loaded.

Tell us about your browser and operating system:

• Browser(s) name and version: Firefox 78
• Operating System: Sabayon Linux

[vkWeb]

@Ryuno-Ki As far as UI is concerned, if a client can't reach the backend then I think we should display a flash error message...?

[Ryuno-Ki]

Hi @vkWeb,

there is no design spec for it (we can use issue to flash out one).
„Flash error message” is something like a snackbar?

Keep in mind WCAG Success Criterion 2.2.1: Timing Adjustable (Level A).

If you want to read more about accessibility: https://adrianroselli.com/2020/01/defining-toast-messages.html and https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html are good starts.
Material UI will take care of some aspects, so we can focus on the UX here.

[vkWeb]

@Ryuno-Ki I personally like how GitHub brings up flash message just below the navigation. It stays till dismissed by user. Snackbar might provide that functionality so let's go with it.

[Ryuno-Ki]

I think, GitHub's approach is closer to Alerts.

[vkWeb]

@Ryuno-Ki Perfect. Full-width and sticky just below navigation. What do you say?

[Ryuno-Ki]

I'd like to have #413 merged first :-)

I need to think about how to trigger the Alert component. Ideally, that should be possible from different components (i.e. everywhere we use a GraphQL query for starters).

[vkWeb]

@Ryuno-Ki we should not merge without Tim's review. Let us wait, he'll check the PR after work.

Can we create an errorHandler sort of thing. That puts up an alert whenever an API request fails...?

[Ryuno-Ki]

Sure thing. I'm not in a hurry.

From my experience with React, I can imagine several approaches.
If there were a state management like Redux or MobX, the Alert would be shown once a respective property is set in the state tree.
Another approach would be to use a Context for that, but I will need to research, how well that would integrate with the current setup.
The third option I can imagine is to pass callbacks down the tree via prop. I'd like to avoid this one if possible.
Custom Events aren't listed under the supported events.