From d0f50d625867775808783e3bd464b4d2e2e6374d Mon Sep 17 00:00:00 2001 From: u-e Date: Fri, 1 Feb 2019 18:49:51 +0300 Subject: [PATCH] created error boundary && toastNotifcaiton --- src/components/errorBoundary/index.js | 3 + .../errorBoundary/view/errorBoundaryView.js | 25 +++++++ src/components/toastNotification/index.js | 3 + .../view/toastNotificaitonView.js | 68 +++++++++++++++++++ .../view/toastNotificationStyles.js | 29 ++++++++ .../application/screen/applicationScreen.js | 7 +- src/screens/root/container/rootContainer.js | 1 + .../settings/container/settingsContainer.js | 1 - 8 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 src/components/errorBoundary/index.js create mode 100644 src/components/errorBoundary/view/errorBoundaryView.js create mode 100644 src/components/toastNotification/index.js create mode 100644 src/components/toastNotification/view/toastNotificaitonView.js create mode 100644 src/components/toastNotification/view/toastNotificationStyles.js diff --git a/src/components/errorBoundary/index.js b/src/components/errorBoundary/index.js new file mode 100644 index 000000000..8ada838b3 --- /dev/null +++ b/src/components/errorBoundary/index.js @@ -0,0 +1,3 @@ +import ErrorBoundary from './view/errorBoundaryView'; + +export { ErrorBoundary }; diff --git a/src/components/errorBoundary/view/errorBoundaryView.js b/src/components/errorBoundary/view/errorBoundaryView.js new file mode 100644 index 000000000..134d742a6 --- /dev/null +++ b/src/components/errorBoundary/view/errorBoundaryView.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; + +export default class ErrorBoundary extends Component { + constructor(props) { + super(props); + this.state = { hasError: false }; + } + + componentDidCatch(error, info) { + if (__DEV__) { + return; + } + this.setState({ hasError: true }); + } + + render() { + const { hasError } = this.state; + const { children } = this.props; + + if (hasError) { + return

Something went wrong.

; + } + return children; + } +} diff --git a/src/components/toastNotification/index.js b/src/components/toastNotification/index.js new file mode 100644 index 000000000..d224a23a2 --- /dev/null +++ b/src/components/toastNotification/index.js @@ -0,0 +1,3 @@ +import ToastNotificaiton from './view/toastNotificaitonView'; + +export { ToastNotificaiton }; diff --git a/src/components/toastNotification/view/toastNotificaitonView.js b/src/components/toastNotification/view/toastNotificaitonView.js new file mode 100644 index 000000000..949a42735 --- /dev/null +++ b/src/components/toastNotification/view/toastNotificaitonView.js @@ -0,0 +1,68 @@ +import React, { Component } from 'react'; +import { Animated, Text } from 'react-native'; + +// Constants + +// Components + +// Styles +import styles from './toastNotificationStyles'; + +class ToastNotification extends Component { + /* Props + * ------------------------------------------------ + * @prop { type } name - Description.... + */ + + constructor(props) { + super(props); + this.state = { + animatedValue: new Animated.Value(0), + }; + } + + // Component Life Cycles + + // Component Functions + + componentWillMount() { + this._showToast(); + } + + _showToast() { + const animatedValue = new Animated.Value(0); + + this.setState({ animatedValue }); + + Animated.timing(animatedValue, { toValue: 1, duration: 350 }).start(); + } + + _hideToast() { + const { animatedValue } = this.state; + + Animated.timing(animatedValue, { toValue: 0.0, duration: 350 }).start(); + } + + render() { + const { text } = this.props; + const { animatedValue } = this.state; + const y = animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [50, 0], + }); + + return ( + + {text} + + ); + } +} + +export default ToastNotification; diff --git a/src/components/toastNotification/view/toastNotificationStyles.js b/src/components/toastNotification/view/toastNotificationStyles.js new file mode 100644 index 000000000..a554da0b5 --- /dev/null +++ b/src/components/toastNotification/view/toastNotificationStyles.js @@ -0,0 +1,29 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + container: { + position: 'absolute', + bottom: 100, + zIndex: 9999, + justifyContent: 'center', + alignItems: 'center', + alignSelf: 'center', + maxWidth: '$deviceWidth', + minWidth: '$deviceWidth / 1.9', + height: 44, + borderRadius: 30, + backgroundColor: '$primaryDarkText', + margin: 5, + shadowOffset: { + height: 5, + }, + shadowColor: '#5f5f5fbf', + shadowOpacity: 0.3, + elevation: 3, + }, + text: { + color: 'white', + fontWeight: 'bold', + fontSize: 14, + }, +}); diff --git a/src/screens/application/screen/applicationScreen.js b/src/screens/application/screen/applicationScreen.js index a8a587b11..435018676 100644 --- a/src/screens/application/screen/applicationScreen.js +++ b/src/screens/application/screen/applicationScreen.js @@ -8,6 +8,8 @@ import messages from '../../../config/locales'; // Components import { NoInternetConnection } from '../../../components/basicUIElements'; +import { ErrorBoundary } from '../../../components/errorBoundary'; +import { ToastNotificaiton } from '../../../components/toastNotification'; // Themes (Styles) import darkTheme from '../../../themes/darkTheme'; @@ -44,7 +46,10 @@ class ApplicationScreen extends Component { )} - + + + + ); diff --git a/src/screens/root/container/rootContainer.js b/src/screens/root/container/rootContainer.js index eaf771322..ae6dff4ea 100644 --- a/src/screens/root/container/rootContainer.js +++ b/src/screens/root/container/rootContainer.js @@ -15,6 +15,7 @@ import { getPost, getUser } from '../../../providers/steem/dsteem'; import { Modal } from '../../../components'; import { PinCode } from '../../pinCode'; import PostButtonForAndroid from '../../../components/postButton/view/postButtonsForAndroid'; +import { ToastNotificaiton } from '../../../components/toastNotification'; // Constants import ROUTES from '../../../constants/routeNames'; diff --git a/src/screens/settings/container/settingsContainer.js b/src/screens/settings/container/settingsContainer.js index f06815d8b..c4545502b 100644 --- a/src/screens/settings/container/settingsContainer.js +++ b/src/screens/settings/container/settingsContainer.js @@ -87,7 +87,6 @@ class SettingsContainer extends Component { const { serverList } = this.state; const server = serverList[action]; let serverResp; - const client = new Client(server, { timeout: 3000 }); try {