Popup message is now showing up

[rhazegh]

Configuration

• OSX 10.13.5 :
• Chrome Version 67.0.3396.99 (Official Build) (64-bit) :
• Reapop 1.2.0 :
• React 16.2.0 :
• Redux 3.7.2 :
• React-redux 5.0.7 :

Actual behavior

I don't see any pop up messages. The console.log shows that the code has been reached and is run. Where should I look? How do I know why the popup is not showing up?

Expected behavior

See the message in a popup.

Steps to reproduce the behavior

Click on the PUSH HERE button, with the following setup:

// ...
import { reducer as notificationsReducer } from 'reapop';
// ...
// ...

export const rootReducer = combineReducers({
  notifications: notificationsReducer(),
  auth: authReducer,
  user: userReducer,
  // ...
  // ...
});

export function createReduxStore(initialState = {}) {
  const sagaMiddleware = createSagaMiddleware();
  const middleware = [
    sagaMiddleware,
    thunk
  ];

  const store = createStore(
    rootReducer,
    composeWithDevTools(
      applyMiddleware(...middleware),
      // ...
      // ...
    )
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

import React, { PureComponent } from 'react';
import Modal from 'react-modal';
import { addNotification as notify } from 'reapop';
// ...

class MyClass extends PureComponent { 
  constructor(props) {
    super(props);
    this.state = {
      someState: false
    };
  }

  handlePushTheButton = (event) => {
    notify({ message: 'Someone will get in touch with you shortly!', status: 200 });
    console.log({ message: 'Someone will get in touch with you shortly!', status: 200 });
    event.preventDefault();
    this.setState({
      someState: true
    });
  };
  render() {
    return (
      <div>
        <button onClick={event => this.handlePushTheButton(event)}>PUSH HERE</button>
      </div>
    );
  }
}

[LouisBarranqueiro]

:wave: @rhazegh

you forgot to connect your MyClass component to your redux store to dispatch actions. See the example in the README: https://github.com/LouisBarranqueiro/reapop#in-a-react-component

you need to do something like this:

export default connect(null, {notify})(MyClass);

[rhazegh]

@LouisBarranqueiro Thank you so much. That took me one step closer to the solution. I added the connect and then I discovered that <NotificationSystem theme={theme}/> was also missing from the top level component (I inherited this code), so I added it:

// ...
import NotificationsSystem from 'reapop';
import 'font-awesome/css/font-awesome.min.css';
import theme from 'reapop-theme-wybo';
// ...

class AppView extends Component {
// ...

  render() {
  // ...
    return (
      <div>
        <NotificationsSystem theme={theme}/>
        <Fragment>
          {/*...*/}
        </Fragment>
      </div>
    );
  }
}

export default withRouter(connect(..., ...)(AppView));

When the page loads there is a warning:

Now I can see the notification is dispatched when I click the button (I see it in the Redux DevTool but I still don't see it on the screen):

there is also a warning on the console like this:

Any clue where to look, at this point? Does it have anything to do with CSS? FontAwesome? Or something else that I should look into?