import React, { Component } from "react";
import PropTypes from "prop-types";
import { Typography } from "@material-ui/core";

export default class ErrorBoundary extends Component {
  state = {
    error: "",
    errorInfo: "",
    hasError: false,
  };
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  componentDidCatch(error, errorInfo) {
    this.setState({ errorInfo });
  }
  render() {
    if (this.state.hasError)
      return (
        <Typography variant="h3" align="center">
          Oops. An React JS Error Occured.
        </Typography>
      );
    return this.props.children;
  }
}
ErrorBoundary.propTypes = {
  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
};