Ask A Question

Notifications

You’re not receiving notifications from this thread.

In-App Navbar Notifications Discussion

Thank you thank you thank you!

Reply

This is exactly what I was looking for!! Thank you so much!!! I'd love to see how you integrate React to this feature too.

Reply

Me too. I'm using React on the front-end.

Reply

Yes me too using React, cuz is perfect frontend for rails for me.

Reply

Thank You..

Reply

Hi Chris, thanks so much for all your videos, I always enjoy them. I'm curious how you handle your testing, when you're working on implementing a feature like In-App Navbar Notifications do you use TDD or do you write tests at the end? If you do use TDD I'd love to see you implement a feature using it!

Reply

Great episode, Chris. A cleaner and easier way to set the type node in your jbuilder template would be to use Rails' built in I18n support. So instead of `"a #{notification.notifiable.class.to_s.underscore.humanize.downcase}"`, you can do:

`"a #{notifiable.model_name.human}"`

This is cleaner and easier, and ensures that if the model name changes, the change will be reflected in your entire app. For this to work you need to set the model name in your I18n file. So en.yml would have:

```
en:
activerecord:

models:
post: "post"
```

PS: I would love to see this in React.

Reply

React! Yes! Do it!
I've been learning React just this week but tying it to Rails is still a bit of a mystery to me. This would be a perfect example to port over that I would love to see.
Your videos are great, keep on rockin it Chris! Thanks.

Reply

You're the man Chris, great video!!!

Yes, I would love to see some videos about React, and I would love it even more if you packaged this into a gem!!!

Thanks again for all your great videos!

Reply

Awesome episode!
I'd also be super interested in learning how to port this to React!

Reply

Super cool Chris, thank you.
You're awesome! (as usual)

Reply

great video! Seeing it done in React would be great.

Reply

Very useful and good pacing/progression of arguments.

Two questions.
1) the onClick handler is going to go to an object, so the page is going to be refreshed anyways. To make a counter decrement by 1, several options are available: one is to check the object and find Notification with equivalent object_id and type and recipient = current_user and update that. The other is to have routing as member and have the coffee script call `url: "notifications/#{id}/mark_as_read` and update there. I am not sure of which avenue is better (I believe the second may be faster), nor the proper syntax to generate the notification id in the url

2) you mentioned polling. Websockets would be the best solution for one with a server. This has two caveats. As a user, I have seen notifications be browser tab-dependant (I use a lot and do not always get notifications); it is a worry. In an exploratory phase (i.e. no significant traffic numbers), one could reason: 'let the user decide'. what would be a quick and dirty way to have a fa refresh icon update the notification status?

Reply

Great !! Fore some reasons i had to add as: :notifiable to the User model in order to make the notifiable attribute to be recognised. Any idea ?

Reply

Im getting missing template error when going to the url /notifications.json

not sure why.....

Reply

Fixed the issue by adding the Jbuilder gem

Reply

hi! Thanks for the great post. There's a problem as I click on the bell icon all the notifications disappear. Can anyone please help me with that?

Reply

Hi Chris, quick question. I'm new to coffescript. How would we add placeholder text stating, "No new notifications" IF new getNewNotifications = 0, using the notifications.js.coffee file and the example code you provided for the navbar layout. I have been trying for a while with no luck...

Reply

Hey Dan! I'd change it to something like this: https://gist.github.com/exc...

Reply

Hey Chris Oliver thanks again for another awesome tutorial! If noticed a bug after implementing this. If a user does an action and then the user is destroyed later, this will raise a error when the receiver loads his notifications. For example, it will give an 'undefined method for nil:NilClass' when loading the notifications as the user no longer exist.

I guess the question is how more on polymorphic associations and how do I implement a dependent destroy for the notifications. I tried:

has_many :notifications, foreign_key: :receiver_id, dependent: :destroy
has_many :notifications, foreign_key: :actor_id, dependent: :destroy

but both won't work.

Is there a quick way to implement this or can I just do an after delete callback to remove all notifications?

Cheers!

Reply

Hey Ariff,

Since the notifications include two users (the receiver and the actor) you need to make sure that if a user gets destroyed, then it removes notifications on both sides. What you've written should work, except that you need to give one of the two has_many assocations a different name because the second one overrides the first one. I would rename the second to something like

has_many :sent_notifications, class_name: "Notification", foreign_key: :actor_id, dependent: :destroy

This will give you the association that can still get automatically deleted without overriding the original one. Plus we rename this one so that you can still use the common "current_user.notifications" to get the ones where you are the receiver.

Reply

Isn't it better to index the notifications to users table?? But as here user can be either actor or recipient making me confused..

Reply

I would love to see this integrated with React or, really, ActionCable Notifications + React. Great episode.

Reply

React stuff is coming soon! :)

Reply

How do you prevent the numbers from "flickering" every time the page refreshes?

Reply

Just render them in your navigation snippet so that they're already there when the page loads. It adds query time which slows down your page load, but won't make them appear later. The other option is to just style your CSS with that space already taken up so the view doesn't shift and cause your eye to look at it.

Reply
Wassef Bouchrit Wassef Bouchrit

I wonder if this works like actioncable notification I have planted..because as I see you need to refresh the page in order to load the new notifications...

Reply

I believe Chris created a newer video that shows how to do this using actioncable.

Reply

Any ideas on solving this issue?

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 86,563+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.