indexiatech / re-notif Goto Github PK

Thanks for writing this simple but effective module! Now that I've started using it, I notice that duplicate messages can quickly fill up the screen (e.g. as an error handler with a network timeout).

Hence this feature request: give an option show duplicate messages only once, optionally with a counter, and the timeout that of the last added duplicate.

Just wanted to open this to discussion .. the way CSS is now being imported in Notifs.js may be a breaking change for some users who have not yet upgraded from the re-notif version of the npm package (especially for tests). Excluding this import in Notifs.js would require a separate imports/requires by redux-notifications package users (and therefore would be a breaking change for anyone who has already upgraded), but would also make the redux-notifications package easier to use in universal/isomorphic applications. Thoughts?

Also for anyone who does have breaking tests after upgrading from re-notif to redux-notifications and your error message looks something like SyntaxError: Unexpected token ., assuming you're using babel-register with a test setup script you can try adding the following to your setup script:

// you'll probably already have this part
require('babel-register')({
    ignore: /node_modules/
});

// this is what you want to add
require.extensions['.css'] = () => {
    return;
};

I notice there is a notif__close element on render, but there doesn't seem to be any documentation on how to use it.

Currently notification ids are based on current time only.

When an app triggers two notifications at the same time, one of them is not shown.
I believe, it'd be better to generate ids using the nanoid package or at least (if you don't want to introduce new dependency) make them string-based and concatenate a unique counter.

Style loader is required to use this within an application since you import styles.css in index.js. This works fine in the demo because the demo is using style loader, but will break in any application that isn't using that loader.

It would be nice to have this be a standalone module that doesn't require loaders.

React has new deprecation warnings
migrating-from-react.proptypes

I love your simple to use API, I implemented quickly but I am having trouble dispatching more than one notification while one exists (your demo seems to function). Thanks!

Update - I think it might be because I am not changing the state => no render => no new ID on notification, will try and report back.

warning.js?3efc:45 Warning: flattenChildren(...): Encountered two children with the same key,.$1468633431690. Child keys must be unique; when two children share a key, only the first child will be used.

The base of my folder structure - https://github.com/andrewdamelio/react-redux-boilerplate

My root Reducer
const rootReducer = combineReducers({
  notifs: notifReducer,
});

Container Component
function mapDispatchToProps(dispatch) {
  return {
    notifSend: (notification) => dispatch(notifSend(notification))
  };
}

Action dispatcher
const Nav = ({notifSend}) => {

...
   <a onClick={notifSend.bind(this,{message: 'hello world',
         kind: 'info',
         dismissAfter: 2000
       })}>Notification</a>
...

• Add pull request standards
• Add publishing steps
• Add CONTRIBUTONG.md

The documentation shows the usage as:

dispatch(notifSend(message));

which seems to indicate that notifSend is returning an action object, but it actually returns a thunk. This is problematic for two reasons:

• It assumes that everyone is using redux-thunk or similar middleware
• It makes it much less natural to use with redux-saga

I feel that notifSend should return a simple action object, or another function should be added to the api the does just that.

fix 1

https://github.com/indexiatech/re-notif/blob/master/src/index.js#L3
import NotifsComponent from './components/notifs'
to
import NotifsComponent from './components/Notifs'

fix 2

https://github.com/indexiatech/re-notif/blob/master/src/components/Notif.js#L59
borderSizing: 'border-box'
to
boxSizing: 'border-box'

fix 3

https://github.com/indexiatech/re-notif/blob/master/src/components/Notif.js#L91
'background-color': '#71bbff'
to
'backgroundColor': '#71bbff'

thanks all!

I could not find any documentation about the fact that the Notifs component requires a property notifications. Can you please elaborate ?

Not working with new version of react-redux ^6.0.0 || ^7.0.0

Solution

Some one forked and updated libs version - https://github.com/zero-t4/redux-notifs use it

Hello guys!

I'm trying to use these notifications on a Universal React App, but when I try turning my server on, I get this error:

C:\Users\Natalia\Desktop\Vinicius\Dev\Real-Time-Notes-With-Universal-Redux-NodeJS-SocketIO-Mongoose\node_modules\redux-notifications\lib\styles.css:1 .notif-transition-enter { ^ ParseError: Unexpected token

My webpack apparently is working well, there isn't any warning / error on its process. Below my webpack loaders:

module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader'
},
{
test: /.css/,
loaders: [
'isomorphic-style-loader',
css-loader?${JSON.stringify({ // CSS Loader https://github.com/webpack/css-loader importLoaders: 1, sourceMap: true, // CSS Modules https://github.com/css-modules/css-modules modules: true, localIdentName: true ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]', // CSS Nano http://cssnano.co/options/ minimize: !true, discardComments: { removeAll: true }, })},
],
}
],

I've tested some css files importing them into a component and they've worked correctly.

Add support for redux saga.
Very appreciate it, because you can handle global notifs directly from sagas (failed requests, etc).

Now you should save error to store, and then dispatch notifSend from component. When you maintain several errors in component - soon it will grow in separate component, for handling errors (not a solution).

Better styling & overall interface

Hello, i'm using your component and the last version of reactjs, and i got this warning:

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

Thank you.

whats in npm and what is here differ
documentation does not match, etc....

When trying to use a custom component, one can trying passing a string or a whole component.

String

Does not seem to be a common pattern for passing a component

<Notifs CustomComponent={Snackbar} />

Problems

• Does not allow props to be passed
• Passes all props (warning will throw for unnecessary props):

Full Component

Seems to the common method of accepting a component as a prop used in Libraries like material-ui like here. That way props can be passed and set within the component (like you are doing with key).

<Notifs CustomComponent={<Snackbar open message="some" />} />

Problems

• Throws invalid element type warning:

• Even after changing src to allow this, the addComponentAsRefTo is still thrown (might be due to npm-linking causing react version conflicts):

Pass props to Notif in Notifs component:
https://github.com/indexiatech/re-notif/blob/master/src/components/Notifs.js#L16
<Notif
key={getter(notif, 'id')}
message={getter(notif, 'message')}
kind={getter(notif, 'kind')}
componentClassName={componentClassName}
CustomComponent={CustomComponent}
onActionClick={onActionClick}
actionLabel={actionLabel}
/>

Check onClick in Notif component:
https://github.com/indexiatech/re-notif/blob/master/src/components/Notif.js#L16
if (this.props.onClick) {

How onClick can appear in Notif props?

Warning: Failed propType: Invalid prop CustomComponent supplied to Notif, expected a ReactNode. Check the render method of Notifs.

This message appears when Custom Component renders. Also it appears in Demo of this component.

React: 15.0.2
Redux: 3.5.2
React-Redux: 4.4.5

Hi,

componentClassName has no effect if passed to notifSend action payload, even though the docs say so. From the source it only extracts message and kind from the payload.

Use case is that I want to override the styles for only a specific notification by passing the classname in the payload.

I want add close button to notification and use action actions.notifDismiss(id), but I don't have id in Notif component.
Is here way to delete notification by click?

I think there is a regression at commit f544bf.
Some devDeps should be declared as dependencies.

Namely:

• react-transition-group
• object-assign
• prop-types
• react-redux

We should also have peerDependencies:

• react
• react-dom

Browserify fails when requiring redux-notifications. Provided test project: redux-notifications-browserify.zip

redux-notifications-browserify $ npm install
redux-notifications-browserify $ npm test

> [email protected] test /Users/patrick/Google Drive/redux-notifications-browserify
> node_modules/browserify/bin/cmd.js index.js  -o output.js -t [ babelify --presets [ es2015 react ] ]

redux-notifications-browserify/node_modules/redux-notifications/css/styles.css:1
.notif-transition-enter {
^
ParseError: Unexpected token
npm ERR! Test failed.  See above for more details.
redux-notifications-browserify $

Hi great job with the component but I was wondering why message is restricted to only string (in Notif.js). Shouldn't any react-compoent be vaild here?

The demo at http://indexiatech.github.io/re-notif/ has a checkbox control for "Custom Styles"

The code at https://github.com/indexiatech/re-notif/blob/master/demo/index.js does not include that "Custom Styles" control.

The custom styles code is present in https://raw.githubusercontent.com/indexiatech/re-notif/gh-pages/demo.js

Any plan to support for newer versions of React?

I wanted to avoid loading css from node_modules so I don't have the option on webpack to load anything with a css extension.

The reason I want to make sure the styles are all within a single directory or import rules for styles are only within stylesheets is a matter of readability and maintainability.

Do we have the option to remove the import statement? Or how to override in such a way that everything works without that css from node_modules being imported?

Thank you!

I found this undefined, so I wanted to report it.

Last package on npm is 1.2

Hi. Trying to use it on rtk-based project.
reducer and actions connected to store. thunk is default in rtk.
rendering

<Provider store={store}>
      <App />
      <Notifs />
    </Provider>

gives a lot of errors:

browser.js:38 Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(Notifs)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Notifs)".
    at invariant (webpack:///./node_modules/invariant/browser.js?:38:15)
    at new Connect(Notifs) (webpack:///./node_modules/redux-notifications/node_modules/react-redux/lib/components/connect.js?:132:36)
    at constructClassInstance (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14204:18)
    at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18413:5)
    at beginWork$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:20186:16)
    at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:336:14)
    at Object.invokeGuardedCallbackDev (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:385:16)
    at invokeGuardedCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:440:31)
    at beginWork$$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:25780:7)
    at performUnitOfWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24695:12)
invariant @ browser.js:38
Connect(Notifs) @ connect.js:132
constructClassInstance @ react-dom.development.js:14204
updateClassComponent @ react-dom.development.js:18413
beginWork$1 @ react-dom.development.js:20186
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
beginWork$$1 @ react-dom.development.js:25780
performUnitOfWork @ react-dom.development.js:24695
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
eval @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
eval @ index.jsx:64
eval @ index.js:46
./src/index.js @ main.js:20820
__webpack_require__ @ main.js:20
eval @ client:2
0 @ main.js:20867
__webpack_require__ @ main.js:20
(anonymous) @ main.js:84
(anonymous) @ main.js:87
react-dom.development.js:21843 The above error occurred in the <Connect(Notifs)> component:
    in Connect(Notifs)
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

We should test all the things

I'm just getting started with this library, so please feel free to tell me if what I'm suggesting is an anti-pattern. Currently, in order to send a notification, a new action must be fired. This means that code must 1) know about this library, and 2) decide whether or not to send a notification. This means that notification-related code is scattered all over the place. One of the great things about redux is that, because all actions are given to all reducers, different reducers can respond to the same action. Redux-form leverages this beautifully through a reducer plugin. I believe this library could benefit from a similar architecture. Instead of various bits of code firing their success/failure actions and the notification actions, application code just fires its own actions. Then the reducer plugin would determine if a given action was notification-worthy. This would centralize notification logic, as the plugin might contain essentially a list of the actions, along with their payload -> notification mappings. So, maybe something like:

import { reducer as notifReducer } from 're-notif';

// plugin returns a notifSend config object to send a notification, or undefined.
// Maybe being able to return just a message string would be a nice convenience? 
const enhancedReducer = notifReducer.plugin(action => {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return {
        message: `Welcome to ACME Widgets, ${action.payload.username}`
      }
  }
  return undefined;
});

const rootReducer = combineReducers({
  notifs: enhancedReducer,
  // ... more reducers here ...
});

What do people think?

Redux-form plugin docs: http://redux-form.com/6.0.0-alpha.15/docs/api/ReducerPlugin.md/