louisbarranqueiro / reapop Goto Github PK

Unfortunately default values are not working, It comes from the way you destructure it from props in https://github.com/LouisBarranqueiro/reapop/blob/master/src/components/NotificationsSystem.js#L76

when you destructure like this defaultValues is undefined and it will fallback to the const defined at https://github.com/LouisBarranqueiro/reapop/blob/master/src/components/NotificationsSystem.js#L8-L15

Configuration

• Operating system with version : macOS 10.12.6 (16G29)
• Browser with version : Chrome 63
• Reapop version : latest
• React version : ^16.2.0
• Redux version : ^3.7.2
• React-redux version : ^5.0.6

When I call the method notify, I get an error: TypeError: Object(...) is not a function

I want to call a method notify when executing my action. Followed by the instructions, but for some reason nothing happens.

action.js

import { notify } from 'reapop';

export const fetchSelectVariant = (type, id, variant, callback) => dispatch => {
  dispatch(
    notify({
      title: 'Upload status',
      message: 'Your file is uploading...',
      status: 'info'
    }),
  );
};

Configuration

• Operating system with version :
• Browser with version :
• Reapop version :
• React version :
• Redux version :
• React-redux version :

Actual behavior

Expected behavior

It`ll be great if it supports customized component

Steps to reproduce the behavior

A new version of Redux was released about a week ago. I'm using it right now in a new app I am making, and reapop seems to handle it well. The package.json explicitly specifies the package to work with Redux 2 and 3 only, thus resulting in an error on install.

Could we bump the dependency?

Redux 4 announcement

Configuration

• Operating system with version : Ubuntu 16.04
• Browser with version : Chrome latest 59
• Reapop version : 1.1.1
• React version : 15.5.4
• Redux version : 3.5.2
• React-redux version : 4.4.5

Actual behavior

notifications.filter is not a function

Expected behavior

Run without errors.

Steps to reproduce the behavior

I just did the initial configuration and it throws this error.

I also went through the NotificationsSystem component in lib/components and the error is thrown at line numbers 65 and 79 (where notifcations.filter is called).

React 15.5 deprecates createClass, PropTypes and ReactTestUtils. These need to be reflected in the codebase to avoid warnings & future incompatibility.

On mobile devices, I have wanted to show notifications at the bottom of the screen (to avoid covering navigation), and it would be great to allow the implementation of this library to pick where their "mobile" positioning should be.

I currently implement this change by simply looking for a key of smallScreenPosition from the provided theme property which must be POSITIONS.top or POSITIONS.bottom. I have made this change by making a couple small changes to the source code of NotificationsSystem.js:

Currently

static propTypes = { // line 8
    notifications: React.PropTypes.array.isRequired,
    theme: React.PropTypes.shape({
      smallScreenMin: React.PropTypes.number.isRequired,
      notificationsSystem: React.PropTypes.shape({
        className: React.PropTypes.string
      })
    }).isRequired
  };

Modified:

static propTypes = {
    notifications: React.PropTypes.array.isRequired,
    theme: React.PropTypes.shape({
      smallScreenMin: React.PropTypes.number.isRequired,
      smallScreenPosition: React.PropTypes.oneOf([
        POSITIONS.top,
        POSITIONS.bottom
      ]), // not marked as required to allow for backwards compatibility
      notificationsSystem: React.PropTypes.shape({
        className: React.PropTypes.string
      })
    }).isRequired
  };

Then I simply apply this property (if it exists) when rendering the Notification system for small screens:
Currently:

if (windowWidth < theme.smallScreenMin) { // line 67
      return (
        <NotificationsContainer
          key='t'
          position='t'
          theme={theme}
          notifications={notifications}
        />
      );
    }

Modified:

if (windowWidth < theme.smallScreenMin) {
      return (
        <NotificationsContainer
          key={this.props.theme.smallScreenPosition || POSITIONS.top}
          position={this.props.theme.smallScreenPosition || POSITIONS.top}
          theme={theme}
          notifications={notifications}
        />
      );
    }

When I initialize the NotificationsSystem, I simply provide this property (as the current version of the theme does not include this new property):

<NotificationsSystem theme={Object.assign(theme, {
  smallScreenPosition: POSITIONS.bottom
})}/>

In conclusion, this change simply would allow the implementation to dictate this functionality with no drawbacks. I'm happy to answer questions, if there are any.

Configuration

• Operating system with version : Windows 10
• Browser with version : Chrome 59
• Reapop version : latest
• React version : latest
• Redux version : latest
• React-redux version : latest

export function handleDelete(formData) {
    return (dispatch) => {
        dispatch({
            type: DELETE_MENU
            payload: new Promise((resolve, reject) => {
                let notif = notify({
                    status: 'loading',
                    title: 'Deleting.....',
                })
               dispatch(notif);
                client.post('menus/delete', formData)
                    .then(({ meta }) => {
                        notif.status = 'success';
                        notif.message = 'Your file has been successfully deleted';
                        notif.dismissible = true;
                        notif.dismissAfter = 5000;
                        updateNotification(notif);
                        resolve(formData);
                    })
                    .catch((error) => {
                        errorHandler(error);
                        reject(error);
                    });
            }),
        });
    };
}

The problem is the notif with loading is spawn correctly. But when the promise is done, and updateNotification is not properly running (the loading notif still shown).

Configuration

• Operating system with version : 10.12.2 (macOS Sierra)
• Browser with version : Not applicable
• Reapop version : 1.0.0
• React version : 15.4.2
• Redux version : 3.6.0
• React-redux version : 5.0.2
• Jest version : 5.0.2

Actual behavior

Running jest tests results in:

> FAIL  app/scripts/containers/App.spec.js
Test suite failed to run

    SyntaxError: Unexpected token ILLEGAL

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at Object.<anonymous> (node_modules/reapop-theme-bootstrap/index.js:3:11)
      at Object.<anonymous> (app/scripts/containers/App.jsx:4:55)

Expected behavior

> PASS  app/scripts/containers/App.spec.js
  <App>
    ✓ should exist

Steps to reproduce the behavior

1. Write a simple React component
2. Write a jest test to verify the component is defined
3. Run test, it should pass
4. Add theme import (bootstrap or wybo)
5. Run test again, it will now fail

While bundling the application, lodash gets included because of this line :)

Configuration

• Operating system with version : Windows 10
• Browser with version : Latest Chrome
• Reapop version : 1.0.0
• React version : 15.5.3
• Redux version : 3.6.0
• React-redux version : 5.0.4

Today when I ran yarn upgrade got this at the beginning of installation

warning reapop > [email protected]: This package is deprecated and will no longer work with React 16+. We recommend you use CSSTransitionGroup from 'react-transition-group' instead.

Thanks

If I load React, Redux etc, as separete scripts and put it to externals in webpack.config.js, webpack all the same include it in to my bundle and I have: react.js and bundle.js (witn second React).

The problem in file /src/components/NotificationsContainer.js, line 2:import TransitionGroup from 'react/lib/ReactCSSTransitionGroup'; if I comment it, all works good.

I fix it on my side like this:

    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'react-router': 'ReactRouter',
    'redux-logger': 'reduxLogger',
    'redux-form': 'ReduxForm',
    'react/lib/ReactTransitionGroup': 'React.addons.TransitionGroup',
    'react/lib/ReactCSSTransitionGroup': 'React.addons.CSSTransitionGroup',
}```

But I think that it should be fixed on your side.

Configuration

• Operating system with version : Windows 10
• Browser with version : Chrome Latest
• Reapop version : 1.0.0
• React version : 15.5.4

run yarn upgrade now receive those warning.

Thanks for your great work on this project.

Just wanted to let you know that GPL licensing makes it impossible to use in a lot of circumstances where the source can not be disclosed - which it wouldn't if it was MIT. Is this intended?

• Preload custom icon/image before displaying notification

I want to propose an additional feature for Reapop.

I think you've done a great job on the library so far, but I want to recommend adding Markdown support in title and message properties. This would be a safer way to allow for styled text without the risk of allowing html directly. There are numerous open-source React markdown renderers. Let me know if you would like me to elaborate; however, I think the concept is simple enough.

It'd be nice to see redux live in action in the dev-tools of your demo site. :)

Hey. I wanted to ask If you are interested in introducing middleware for handling simple object based actions (testable!).

I've introduced this in our app and it works well.

import { addNotification } from 'reapop';

const ACTION_TYPE = '__SEND_NOTIFICATION__';

const notificationMiddleware = () => (next) => (action) => {
    if (action.type && action.type === ACTION_TYPE) {
        return next(addNotification(action.payload));
    }

    return next(action);
};

export default notificationMiddleware;

export const createNotification = (payload) => {
    return Object.assign({}, {
        type: ACTION_TYPE,
        payload
    });
};

It would be better if all actions were pure. i.e. not dispatching any other action so that user can use the library without any middleware. or even when user is using some other middleware like redux-saga. even then they should be able to use the library

I think we should add a status type for input which would include an input field under/within a notification similar to that of OSX. In OSX, some notifications have an input area for quick responding (such as iMessage); these are usually only single line inputs. I think this would help as the notification could now also take the place of a prompt() and return textual feedback from the user in the form of a triggered callback function upon user completion.

I think i've seen that on Binance or Kraken :)

Hey

If you show first notification and after one second show another notification, then after first one hides - second one will instantly jump to position of first. Instantly. Doesn't it annoy you?

How about making it as smooth as here?

Took from react-notification

It's UI component, such small things matters :)

Hey, just recieved this warning. Sure it might be connected to our linting but this is something that should be fixed here.

Warning: Failed prop type: Required prop `theme.notificationsSystem.className` was not specified in `NotificationsSystem`.
    in NotificationsSystem (created by Connect(NotificationsSystem))
    in Connect(NotificationsSystem) (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by StaticRouter)
    in MatchProvider (created by StaticRouter)
    in Broadcast (created by LocationBroadcast)

Configuration

If the following is the config of your notification and you link to an image that does not exist the notifcation will never run, instead the process returns a 404 error in the console.

{
        title: 'Are you sure?',
        message: 'This will permanantly remove your project.',
        dismissible: true,
        status: 'warning',
        position: 'tr',
        image: 'path-to-a-missing-image', // The issue is here, if this line is removed the code will run
        dismissAfter: 0,
        buttons:[
            {
                name: 'I\'m sure',
                primary: true,
                onClick: () => {
                    // Do something
                }
            },
            {
                name: 'Cancel',
                primary: false,
                onClick: () => { // do sth elese }
            }
        ]
    }

Actual behavior

The whole notication will stop working if no valid image is supplied

Expected behavior

This should be a little more forgiving, image onError should be ignored completely.

There is no example in the doc on how to use html in a message's notification. I'm trying to pass a link with an a href tag.

Using redux dev tools I can see that addnotification thunk is adding each notification to the store, however I dont see any notification render on the page.

Been implementing your notification solution which is great however I have stumbled upon the situation where I would like the notification to appear unless the user has actively dismissed it, however, I would like to keep bringing it up if the user hasn't dismissed it previously.

Would this be something that you could add, I was thinking something along the lines of

hideNotification(notificationId)

Any chance to have it?

Configuration

• Operating system with version : Windows 10
• Browser with version : Chome
• Reapop version : ^1.0.0
• React version : ^ 15.5.4
• Redux version : ^3.6.0
• React-redux version : 5.0.5

warning reapop > [email protected]: This package is deprecated and will no longer work with React 16+. We recommend you use CSSTransitionGroup from 'react-transition-group' instead.

Idea for improvement.

Don't prefix icons with 'fa '. this would allow other icon lib's to be used.

React just released 16.x.x, so we all have errors like this

error "reapop#react@^0.14.0 || ^15.0.0" doesn't satisfy found match of "[email protected]"
error "reapop#react-transition-group#react@^15.0.0" doesn't satisfy found match of "[email protected]"
error "reapop#react-transition-group#react-dom@^15.0.0" doesn't satisfy found match of "[email protected]"

Very nice library. Love using it. Was wondering if it will also work with react native app using redux.

I've tried setting the overflow property on the notifications-container--br, but I can't get the div to scroll vertically when there enough notifications to exceed the height of the screen. There's probably some CSS magic I'm missing here, but any suggestions?

Hi,

I'm implementing a notification system coupled to redux-axios-middleware. I'm having a problem updating and removing notifications — I can trigger them, but there is no zero-boilerplate way to save their IDs for future reference.

I would like to be able to define the ID of the message myself, allowing to

• clear AJAX loading indicators
• have single-instance notifications (i.e., if I have 5 similar requests, I do not want 5 notifications)
• rely on deterministic natural IDs instead of generated ones

Basically, I would love to use a scheme similar to Redux action naming conventions:

• "NOTIFICATION/LOADING"
• "NOTIFICATION/OBJECT/CREATE"
• "NOTIFICATION/OBJECT/SAVE/123"

Seems that I could do this by implementing an action creator and a coupled reducer that would map between natural IDs and automatically generated ones. But it would be really cumbersome, because Redux reducers cannot dispatch actions and I am not sure how then to handle this. Doing this in reapop would be the most natural way to go

Currently, we have support to use same notifier instance to be updated via updateNotification.
but that instance doesn't provide information whether it is dismissed or is visible.
There is configuration 'onAdd', 'onRemove' will runs on Mounting/Un-mounting.

Notifier instance should have state whether instance was dismissed or still open.
consider,

if(this.notifier)
     {
       Object.assign(this.notifier, notificationData);
       updateNotification(this.notifier)
     }
   else 
     {
       this.notifier = notify(notificationData);
     } 

if this.notifier is dismissed there is no way to create new instance.

Hi

Is there a way to dismiss all open notifications?

BTW, nice work!

Is it possible to dismiss the notifications with a swipe on touch devices?

Configuration

• Operating system with version : windows 7
• Browser with version : chrome
• Reapop version : 1.2.0
• React version : 15.1
• Redux version : 3.3.1
• React-redux version : 4.4.1

Hi
I am using React with server side rendering, i understand there is no window object on SSR but is there a workaround to calculate the window only when elements are rendered?

the error is in node_modules\reapop\lib\components\NotificationsSystem.js:51:20

thanks!

Currently, we know that there are two available themes to use in reapop, with very nice instructions how to use those themes etc..

It would be nice if we could see how they work with react pop, what does it change if I use default theme or Bootstrap theme. Maybe it would be a nice feature to add into demo app - theme selector?

Icon does not work anymore under FontAwesome v5, which uses svg and js instead of font.
Please consider supporting FontAwesome v5 by react-fontawesome.

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>
    );
  }
}

Hi,

I really like your module. Sadly it doesn't run out of the box if the complete redux store is based on Immutable.js.

In my case the complete store is immutable. Adding your reducer at top level makes it a key of a Immutable.Map . So changing line 130 in NotificationsSystem.js to notifications: state.get('notifications') should do the trick. Because you get back a plain JS Object, since your initial state is empty.

Reapop version: 1.1.4
React version: 15.6.1
Redux version: 3.7.1

Hi,
Is it possible to display the closeButton when using at least one custom button?
According to the source I don't think it is but I might be wrong. If not would it be possible to add this feature?

I'm using a custom button as a redirect to a help page, that means I have to add another custom button in order to dismiss the notification. I guess that's fine. The problem is when I already have 2 custom buttons, i cannot add a third one as it doesn't display well.

Thank you.

Hi again! Setting IDs works exactly as I needed it to!

But I found out that propTypes prohibit setting string IDs. For the time being I'm just hashing strings to ints, but this would be a minuscule change in the code

allow notification message to contain react components in message in case of AllowHTML = true

const refreshList = function(){...};
            const msg =(<div><span>Updated Successfully<span><a href="#" onclick={refreshList}></a></div>);
            notifier.message= msg;
            notifier.allowHTML=true;
            notifier.status = 'success';

            notifier.dismissible = true;
            notifier.dismissAfter = 15000;
            notifier.buttons=[{
                name: 'OK',
                primary: true,
                onClick: () => {
                }
            }];
            dispatch(updateNotification(notifier));

creates message with [object Object]

Hi, I am using your module for notification system in my project, but i am not able to do updateNotification since notif is comes as undefined, i am using the below code from your demo? am i missing something here?

"use strict";

import React, { Component } from 'react';
import {connect} from 'react-redux';
import NotificationsSystem, {addNotification as notify, updateNotification} from 'reapop';
import theme from 'reapop-theme-wybo';
class Index extends Component {

  constructor(props) {
    super(props);
    this._onClick = this._onClick.bind(this);
  }

  _onClick() {
    const {notify, updateNotification} = this.props;
    const notif =notify({
        id : "1",
        title: 'Welcome',
        message: 'you clicked on the button',
        status: 'success',
        dismissible: false,
        dismissAfter: 0
      });
      //notif comes undefined!!!
      console.log(JSON.stringify(notif));

      this.props.dispatch(notif)
      setTimeout(function() {
        notif.status = 'success';
        notif.message = 'Your file has been successfully uploaded';
        notif.dismissible = true;
        notif.dismissAfter = 5000;
        this.props.dispatch(updateNotification(notif))
    }, 1000);

  }
  render() {
    return (
      <div>
        <NotificationsSystem theme={theme}/>
             <button onClick={this._onClick}>Add a notification</button>
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => {
    return {
      notify,
      updateNotification
    };
}
export default connect(mapStateToProps)(Index);

state[index] = Object.assign({}, defaultNotification, payload);  // <--- mutation!
return [...state];

should be more like

return [
  ...state.slice(0, index),
  Object.assign({}, defaultNotification, payload),
  ...state.slice(index + 1)
]