coinforbarter-react-native
Version:
CoinForBarter ReactNative Library - Integrate cryptocurrency payments for goods and services in your Mobile App
64 lines (63 loc) • 2.29 kB
JavaScript
import React from 'react';
import { Text, View } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { Body } from '../../containers';
import { Button } from '../button';
export class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
};
}
componentDidCatch(error, errorInfo) {
console.log('componentDidCatch => ', error, errorInfo);
this.setState(Object.assign(Object.assign({}, this.state), { error, errorInfo }));
}
render() {
const { hasError, error, errorInfo } = this.state;
const { children, errorProps, closeModal } = this.props;
if (hasError) {
return (<Body>
<>
{errorInfo ? (<Text style={Object.assign({}, tw `text-center text-black capitalize`)}>
{errorInfo}
</Text>) : null}
{error ? (<Text style={tw `text-center capitalize`}>{error}</Text>) : null}
<View style={tw `flex justify-center pt-8`}>
<Button onClick={() => {
closeModal();
}}>
<Text> Close </Text>
</Button>
</View>
</>
</Body>);
}
if (errorProps.error.message.length > 0) {
return (<Body>
<>
{errorProps.error.message ? (<Text style={tw `text-center capitalize`}>
{errorProps.error.message}
</Text>) : null}
{errorProps.error.statusCode === 400 &&
Object.values(errorProps.error.data.errors || {}).map(errors => errors.map((e) => (<Text style={tw `text-center capitalize `} key={e}>
{e}
</Text>)))}
<View style={tw `flex flex-row justify-center pt-8`}>
<Button onClick={() => {
closeModal();
}}>
<Text> Close </Text>
</Button>
</View>
</>
</Body>);
}
return children;
}
}
ErrorBoundary.getDerivedStateFromError = (error) => {
console.log('getDerivedStateFromError => ', error);
return { hasError: true, error };
};