After Alert.success, it always show after Alert.error

[luisfuertes]

Hi, i have this code on my "Container"

import React from 'react';
import {connect} from 'react-redux';

import Alert from 'react-s-alert';
import * as Constants from '../../webservices/Constants'

// mandatory
import 'react-s-alert/dist/s-alert-default.css';

// optional - you can choose the effect you want
import 'react-s-alert/dist/s-alert-css-effects/slide.css';
import 'react-s-alert/dist/s-alert-css-effects/scale.css';
import 'react-s-alert/dist/s-alert-css-effects/bouncyflip.css';
import 'react-s-alert/dist/s-alert-css-effects/flip.css';
import 'react-s-alert/dist/s-alert-css-effects/genie.css';
import 'react-s-alert/dist/s-alert-css-effects/jelly.css';
import 'react-s-alert/dist/s-alert-css-effects/stackslide.css';

class ErrorDialog extends React.Component {

  componentDidUpdate(prevProps, prevState){
    if(this.props.error && !prevProps.error){

      if(Constants.LOG_ENABLED){
        console.error("ErrorDialog error: ", this.props.error)
        console.error("ErrorDialog section: ", this.props.label)
        console.error("ErrorDialog url: ", this.props.url)
        console.error("ErrorDialog func: ", this.props.func)
      }

      let errorLabel = this.props.label ? this.props.label : 'Ha ocurrido un error'
      Alert.error(errorLabel, {
          onShow: () => this.props.removeError(),
      });
    }
  }

  render() {
    return (
      <Alert effect='slide' position='top-right' offset={40} stack={{limit: 3}} />
    )
  }
}

let mapStateToProps = (state) => {
  return {
    error: state.error.error,
    label: state.error.label,
    url: state.error.url,
    func: state.error.func,
  }
}

let mapDispatchToProps = (dispatch) => {
  return {
    removeError: () => {
      dispatch({type: 'REMOVE_ERROR'})
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ErrorDialog);

Works fine, but if in other view i do: "Alert.success('bla bla bla')", after that whenever I make an alert.error, it also shows the Alert.success also.

How can i fix it? Thanks!

[juliancwirko]

Hmmm, from this code only it's hard to tell, but you could run some kind of action wich fires that alert. Also you should place <Alert ...> component in your main app component or at least as close to root component as possible.

[luisfuertes]

Yes, sorry. My main Container (Common in all app)

import React from 'react'

// Components
import Sidebar from './Sidebar'
import Header from './Header'
import ErrorDialog from './ErrorDialog'

//Redux
import { connect } from 'react-redux'
import * as Actions from '../../redux/actions/Auth'


class Container extends React.Component {

  componentWillMount(){
    this.props.checkLogin()
  }

  render() {

    if(!this.props.logged ){
      return (
        <div>
          {this.props.children}
          <ErrorDialog />
        </div>
      )
    } else {
      return (
        <div className="wrapper">
          <Header />
          <Sidebar />
          <section className="main">
            { this.props.children }
            <ErrorDialog />
          </section>
        </div>
      )
    }
  }
}

let mapStateToProps = (state) => {
  return {
    logged: state.auth.isLogged,
    userInfo: state.user.userInfo,

  }
}

let mapDispatchToProps = (dispatch) => {
  return {
    checkLogin: () => {
      dispatch(Actions.checkStorage())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Container)

When some WS fail, i dispatch error and show it (It is embeded in my class Container), always via Redux dispatch.

And in some views, when some actions are success i do:

import Alert from 'react-s-alert';

Alert.success('success message')

After it, all my Alerts.error show first my old Alert.success

[juliancwirko]

Is there a chance to create a simple reproduction repository with this bug? I will be able to test it on my side and tell you more.

[luisfuertes]

I have tried to reproduce an example from the base of my project and I can not replicate the bug.

I will close the issue until I have more information about it

Thanks!