🥅(frontend) improve add member form error handling

[daproclaima]

Purpose

The error cause displayed when group creation fails because it already exists uses technical wording as it comes directly from the backend. The front end should capture this error and replace it with a message appealing to the end users.

Proposal

• Capture the error cause 'Team with this Slug already exists.' returned by POST on api/v1.0.0/teams/ to show 'This name is already used for another group. Please enter another one.' instead.

Before

Before.mp4

After

After.mp4

Closes #293.

[AntoLC]

I still find parseAPIError very complicated to replace a string by another string.

I am not sure what is the answer to that: #387 (comment)

[daproclaima]

@AntoLC, thanks for the remarks.

I thought of creating this function to reuse it everywhere on APIErrors handling, whether the developer wants to replace an error cause with another message, and/or execute a callback at its detection, and/or show a custom message on 500 error detection.

At the moment, we directly display the 500 error messages on the UI, which may not be the most user-friendly way to explain to the end users that the error is not their fault and that they'd do well reaching out to us so we fix the error.

I used parseAPIError on InputTeamName.tsx to replace a string with another one, as you say, for one of the client errors we already know. I especially wanted to show a custom error message for 500 types of errors.

If I treated only the client error, I would use a more straightforward function.

We should display a message for all forms that helps the user know the next step to fix the error. This is especially true for server errors, which we are responsible for and can only fix if we are contacted.
What do you think?