updated toast notification

src/components/toastNotification/view/toastNotificaitonView.js

@@ -30,17 +30,31 @@ class ToastNotification extends Component {
   }
 
   _showToast() {
+    const { duration } = this.props;
     const animatedValue = new Animated.Value(0);
 
     this.setState({ animatedValue });
 
     Animated.timing(animatedValue, { toValue: 1, duration: 350 }).start();
+
+    if (duration) {
+      this.closeTimer = setTimeout(() => {
+        this._hideToast();
+      }, duration);
+    }
   }
 
   _hideToast() {
     const { animatedValue } = this.state;
+    const { handleOnHide } = this.props;
 
-    Animated.timing(animatedValue, { toValue: 0.0, duration: 350 }).start();
+    Animated.timing(animatedValue, { toValue: 0.0, duration: 350 }).start(() => {
+      if (handleOnHide) handleOnHide();
+    });
+
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+    }
   }
 
   render() {

src/screens/application/screen/applicationScreen.js

@@ -10,6 +10,7 @@ import messages from '../../../config/locales';
 import { NoInternetConnection } from '../../../components/basicUIElements';
 import { ErrorBoundary } from '../../../components/errorBoundary';
 import { ToastNotificaiton } from '../../../components/toastNotification';
+import { toastNotification as toastNotificationAction } from '../../../redux/actions/uiAction';
 
 // Themes (Styles)
 import darkTheme from '../../../themes/darkTheme';
@@ -30,13 +31,17 @@ class ApplicationScreen extends Component {
 
   componentWillReceiveProps(nextProps) {
     const { toastNotification } = this.props;
-    if (nextProps.toastNotification !== toastNotification) {
+    if (nextProps.toastNotification && nextProps.toastNotification !== toastNotification) {
       this.setState({ isShowToastNotification: true });
-    } else {
-      this.setState({ isShowToastNotification: false });
     }
   }
 
+  _handleOnHideToastNotification = () => {
+    const { dispatch } = this.props;
+    dispatch(toastNotificationAction(''));
+    this.setState({ isShowToastNotification: false });
+  };
+
   render() {
     const {
       isConnected, isDarkTheme, locale, toastNotification,
@@ -62,7 +67,13 @@ class ApplicationScreen extends Component {
         <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
           <ErrorBoundary>
             <ReduxNavigation />
-            {isShowToastNotification && <ToastNotificaiton text={toastNotification} />}
+            {isShowToastNotification && (
+              <ToastNotificaiton
+                text={toastNotification}
+                duration={2000}
+                handleOnHide={this._handleOnHideToastNotification}
+              />
+            )}
           </ErrorBoundary>
         </IntlProvider>
       </Fragment>

src/screens/settings/container/settingsContainer.js

@@ -24,7 +24,7 @@ import {
   openPinCodeModal,
 } from '../../../redux/actions/applicationActions';
 import { toastNotification } from '../../../redux/actions/uiAction';
-import { setPushToken, getNodes, getCurrencyRate } from '../../../providers/esteem/esteem';
+import { setPushToken, getNodes } from '../../../providers/esteem/esteem';
 
 // Middleware
 
@@ -88,15 +88,17 @@ class SettingsContainer extends Component {
     const { serverList } = this.state;
     const server = serverList[action];
     let serverResp;
+    let isError = false;
     const client = new Client(server, { timeout: 3000 });
 
     try {
       serverResp = await client.database.getDynamicGlobalProperties();
     } catch (e) {
+      isError = true;
       dispatch(toastNotification('Connection Failed!'));
       return;
     } finally {
-      dispatch(toastNotification('Succesfuly connected!'));
+      if (!isError) dispatch(toastNotification('Succesfuly connected!'));
     }
 
     const localTime = new Date(new Date().toISOString().split('.')[0]);
@@ -104,7 +106,7 @@ class SettingsContainer extends Component {
     const isAlive = localTime - serverTime < 15000;
 
     if (!isAlive) {
-      alert('server not alive');
+      dispatch(toastNotification('Server not available'));
       return;
     }