diff --git a/src/redux/actions/uiAction.js b/src/redux/actions/uiAction.js index 0374b4559..be4e9d44a 100644 --- a/src/redux/actions/uiAction.js +++ b/src/redux/actions/uiAction.js @@ -1,4 +1,8 @@ -import { UPDATE_ACTIVE_BOTTOM_TAB, IS_COLLAPSE_POST_BUTTON } from '../constants/constants'; +import { + IS_COLLAPSE_POST_BUTTON, + TOAST_NOTIFICATION, + UPDATE_ACTIVE_BOTTOM_TAB, +} from '../constants/constants'; export const updateActiveBottomTab = payload => ({ payload, @@ -9,3 +13,8 @@ export const isCollapsePostButton = payload => ({ payload, type: IS_COLLAPSE_POST_BUTTON, }); + +export const toastNotification = payload => ({ + payload, + type: TOAST_NOTIFICATION, +}); diff --git a/src/redux/constants/constants.js b/src/redux/constants/constants.js index add997fea..c692cd191 100644 --- a/src/redux/constants/constants.js +++ b/src/redux/constants/constants.js @@ -35,3 +35,4 @@ export const FETCH_GLOBAL_PROPS = 'FETCH_GLOBAL_PROPS'; // UI export const IS_COLLAPSE_POST_BUTTON = 'IS_COLLAPSE_POST_BUTTON'; export const UPDATE_ACTIVE_BOTTOM_TAB = 'UPDATE_ACTIVE_BOTTOM_TAB'; +export const TOAST_NOTIFICATION = 'TOAST_NOTIFICATION'; diff --git a/src/redux/reducers/uiReducer.js b/src/redux/reducers/uiReducer.js index 19cf40f12..55f70a74c 100644 --- a/src/redux/reducers/uiReducer.js +++ b/src/redux/reducers/uiReducer.js @@ -1,8 +1,13 @@ -import { UPDATE_ACTIVE_BOTTOM_TAB, IS_COLLAPSE_POST_BUTTON } from '../constants/constants'; +import { + UPDATE_ACTIVE_BOTTOM_TAB, + IS_COLLAPSE_POST_BUTTON, + TOAST_NOTIFICATION, +} from '../constants/constants'; const initialState = { activeBottomTab: 'HomeTabbar', isCollapsePostButton: false, + toastNotifcaion: '', }; export default function (state = initialState, action) { @@ -18,6 +23,12 @@ export default function (state = initialState, action) { ...state, isCollapsePostButton: action.payload, }; + + case TOAST_NOTIFICATION: + return { + ...state, + toastNotification: action.payload, + }; default: return state; } diff --git a/src/screens/application/container/applicationContainer.js b/src/screens/application/container/applicationContainer.js index 30f56e617..73a52d5b2 100644 --- a/src/screens/application/container/applicationContainer.js +++ b/src/screens/application/container/applicationContainer.js @@ -315,7 +315,7 @@ class ApplicationContainer extends Component { }; render() { - const { selectedLanguage, isConnected } = this.props; + const { selectedLanguage, isConnected, toastNotification} = this.props; const { isRenderRequire, isReady } = this.state; // For testing It comented out. @@ -326,7 +326,7 @@ class ApplicationContainer extends Component { if (isRenderRequire && isReady) { return ( - + ); } return ; @@ -349,6 +349,9 @@ export default connect( currentAccount: state.account.currentAccount, otherAccounts: state.account.otherAccounts, pinCode: state.account.pin, + + // UI + toastNotification: state.ui.toastNotification }), (dispatch, props) => ({ dispatch, diff --git a/src/screens/application/screen/applicationScreen.js b/src/screens/application/screen/applicationScreen.js index 435018676..6cdbd6ec0 100644 --- a/src/screens/application/screen/applicationScreen.js +++ b/src/screens/application/screen/applicationScreen.js @@ -18,7 +18,9 @@ import lightTheme from '../../../themes/lightTheme'; class ApplicationScreen extends Component { constructor(props) { super(props); - this.state = {}; + this.state = { + isShowToastNotification: false, + }; } componentWillMount() { @@ -26,8 +28,20 @@ class ApplicationScreen extends Component { EStyleSheet.build(isDarkTheme ? darkTheme : lightTheme); } + componentWillReceiveProps(nextProps) { + const { toastNotification } = this.props; + if (nextProps.toastNotification !== toastNotification) { + this.setState({ isShowToastNotification: true }); + } else { + this.setState({ isShowToastNotification: false }); + } + } + render() { - const { isConnected, isDarkTheme, locale } = this.props; + const { + isConnected, isDarkTheme, locale, toastNotification, + } = this.props; + const { isShowToastNotification } = this.state; const barStyle = isDarkTheme ? 'light-content' : 'dark-content'; const barColor = isDarkTheme ? '#1e2835' : '#fff'; @@ -48,7 +62,7 @@ class ApplicationScreen extends Component { - + {isShowToastNotification && } diff --git a/src/screens/settings/container/settingsContainer.js b/src/screens/settings/container/settingsContainer.js index c4545502b..2d66aa390 100644 --- a/src/screens/settings/container/settingsContainer.js +++ b/src/screens/settings/container/settingsContainer.js @@ -23,6 +23,7 @@ import { isDarkTheme, openPinCodeModal, } from '../../../redux/actions/applicationActions'; +import { toastNotification } from '../../../redux/actions/uiAction'; import { setPushToken, getNodes, getCurrencyRate } from '../../../providers/esteem/esteem'; // Middleware @@ -92,10 +93,10 @@ class SettingsContainer extends Component { try { serverResp = await client.database.getDynamicGlobalProperties(); } catch (e) { - alert(e); + dispatch(toastNotification('Connection Failed!')); return; } finally { - alert('done'); + dispatch(toastNotification('Succesfuly connected!')); } const localTime = new Date(new Date().toISOString().split('.')[0]); @@ -103,7 +104,7 @@ class SettingsContainer extends Component { const isAlive = localTime - serverTime < 15000; if (!isAlive) { - alert("server not alive"); + alert('server not alive'); return; }