ApiError added

[SlaviaF]

Description

class ApiError added so as to handle error from fetching api

Fixes #237

How to test?

Please provide a short summary how your changes can be tested? if there are errors while fetching it will console the api error

Checklist

• [x] I have performed a self-review of my own code
• [x] I have followed the name conventions for CSS Classnames and filenames, Components names and filenames, Style filenames, if you are in doubt check the the project README.MD and here https://github.com/HackYourFuture-CPH/curriculum/blob/master/review/review-checklist.md
• [x] I have commented my code, particularly in hard-to-understand areas, if you code was simple enough mark the box anyway
• [x] I have made corresponding changes to the documentation, if you code was simple enough mark the box anyway
• [x] This PR is ready to be merged and not breaking any other functionality

[senner007]

+1 for the message, but we need the rendering in the error boundary not the error class.

oops sorry. Classes give me a little bit of a spin in the head

You'll have to spin in the other direction in your chair to equalize it then :)

[SlaviaF]

+1 for the message, but we need the rendering in the error boundary not the error class. oops sorry. Classes give me a little bit of a spin in the head

You'll have to spin in the other direction in your chair to equalize it then :)

I tried a lot of things to return another message in the render function(in case if its an api error), but it doesn't work. Or do I have to alter the existing one.

[senner007]

+1 for the message, but we need the rendering in the error boundary not the error class. oops sorry. Classes give me a little bit of a spin in the head

You'll have to spin in the other direction in your chair to equalize it then :)

I tried a lot of things to return another message in the render function(in case if its an api error), but it doesn't work. Or do I have to alter the existing one.

How about this:

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorType: null};
  }

  static getDerivedStateFromError(error) {
    console.log(error instanceof ApiError);
    return { hasError: true, errorType: error };
  }

  render() {
    if (this.state.hasError) {
      if (this.state.errorType instanceof ApiError) {
         if (this.state.errorType.statusCode === 404) {
            // return 404 component
         }
          if (this.state.errorType.statusCode === 403) {
            // return 403 component
         }
         if (this.state.errorType.statusCode === 400) {
            // return 400 component
         }
          if (this.state.errorType.statusCode === 500) {
            // return 500 component
         }
         // return generic message here
      }
        return <h1>Uh-oh! Cannot render app, check console.</h1>;
    }

    return this.props.children;
  }
}

[SlaviaF]

+1 for the message, but we need the rendering in the error boundary not the error class. oops sorry. Classes give me a little bit of a spin in the head

You'll have to spin in the other direction in your chair to equalize it then :)

I tried a lot of things to return another message in the render function(in case if its an api error), but it doesn't work. Or do I have to alter the existing one.

How about this:

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorType: null};
  }

  static getDerivedStateFromError(error) {
    console.log(error instanceof ApiError);
    return { hasError: true, errorType: error };
  }

  render() {
    if (this.state.hasError) {
      if (this.state.errorType instanceof ApiError) {
         if (this.state.errorType.statusCode === 404) {
            // return 404 component
         }
          if (this.state.errorType.statusCode === 403) {
            // return 403 component
         }
         if (this.state.errorType.statusCode === 400) {
            // return 400 component
         }
          if (this.state.errorType.statusCode === 500) {
            // return 500 component
         }
         // return generic message here
      }
        return <h1>Uh-oh! Cannot render app, check console.</h1>;
    }

    return this.props.children;
  }
}

Thanks a lot Niels