In-App Navbar Notifications Discussion
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.
Rich Everts
Himesh
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!
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.
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.
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!
Amit Feldman
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?
oon
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 ?
buchmihir
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?
Dan
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...
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!
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.
Isn't it better to index the notifications to users table?? But as here user can be either actor or recipient making me confused..
Chris Haack
I would love to see this integrated with React or, really, ActionCable Notifications + React. Great episode.
How do you prevent the numbers from "flickering" every time the page refreshes?
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.
Wassef Bouchrit
