In-App Navbar Notifications Discussion

Thank you thank you thank you!

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.

Thank You..

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!

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

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

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

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?

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 ?

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

not sure why.....

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?

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!

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

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?

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...

Is there another way than checking the db every few seconds? Sounds like it could be taxing. Also I implemented this in a web app I am working on that uses React on the front end (via react rails) and there seems to be a few second delay before the notification appears. I guess moving the logic from jQuery into React itself may help. I was just wondering if there are any other ways. Thank you.

I have followed the steps in the tutorial, however, when i check the rails console, no notification is not being created when i create a comment (forum_thread) on a post (forum_post).

Thanks for this course Chris. I'm trying to implement this to an app am building (I want to create the notifications for comments where the comment belongs to episode and episode belongs to story and genre)... When i checked out Notification.all in my console it outputted it but when i navigated to http://localhost:3000/notifications.json i got an error telling me that "undefined method `episode_path' for #<#<class:0x157f1538>:0x15149e68>"

Here is my index.json.jbuilder
https://uploads.disquscdn.c...

i'm having this error "undefined method `underscore' for nil:NilClass" , i can't quite figure it out , Error happen ,when rendering the json template

json.template render partial: "notifications/#{notification.notifiable_type.underscore.pluralize}/#{notification.action}", locals: {notification: notification}, formats: [:html]

items = data.map (notification) ->
  "<li><a class='dropdown-item' href='#{notification.url}'>'#{notification.sender} #{notification.action} a #{notification.notifiable.type}'</a></li>"

• "John D started following you"
• "Jane D sent you a friend request"

# follow.rb
  def notification_to_s
    "following you"
  end

# friend_request.rb
  def notification_to_s
    "you a friend request"
  end

# index.json.jbuilder
# ...
  json.notifiable do
    json.type notification.notifiable.notification_to_s
  end

Did you end up doing a react version of this? I am having a hard time integrating my redux module into the rails header.

Hi Chris!

I am trying to implement the notification feature and it works perfectly up to the point where I try to fetch the @notifications div in notifications.js.coffee file.

class Notifications
  constructor: ->
    @notifications = $("[data-behavior='notifications']")
    @setup()

  setup: ->
    console.log(@notifications)

  jQuery ->
    new Notifications

I know that the file loads because if I put an alert message it executes on page load. But when I do the code above it dont get anything consoled..

Hi Chris!

The notifications are working. What you call threads, we call posts, and what you call posts, we call comments.

Two issues:

1) It only works when the json.url line is commented out:

json.url post_path(notification.notifiable.post, anchor: dom_id(notification.notifiable)) 

As soon I uncomment, notifications totally stop working--the number disappears from the bell, and the notification messages themselves also disappear. Once I comment out the line again, the bell numbers return, and so do the notifications. Thoughts on how to get that to work? We definitely would like each notification to be linkable to that particular event.

2) we are showing messages for both posts (post_path) and also comments (comment_path). But how will index.json.builder know when to follow the post_path, and when to follow the comment_path? And then again, once we add other notifiable events, like reaching a higher level, etc.?

Thanks very much!
-Monroe

Hi Chris, I'm learning alot from this tutorial. I really appreciate the throughness that you have for this tutorial. I am however, facing an issue where I am unable to retrieve the jQuery from the index page. My console is unable to detect anything from the console.log.

Could you advise me what would be the possible scenario where I made a mistake?

Having trouble implementing it with Bulma. Any ideas?

Hi,

this is working good for me. but in other localhost applications also calling /notifications.json.
And getting error ActionController::RoutingError (No route matches [GET] "/notifications.json").

It seems to be a problem when following the links on the notifications dropdpwn (actually following all the links in the app). *When following the links the notifications feature doesn't work anymore :( Only on refreshing the page! *
Any ideas on solving this issue?
Cheers

Hey,
Such a really awesome episode but I`m getting error about ServiceWorker. You can see the below mentioned errors:
Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/forum_threads/’: Load failed with status 404 for script ‘http://localhost:3000/serviceworker.js’
TypeError: ServiceWorker script at http://localhost:3000/serviceworker.js for scope http://localhost:3000/forum_threads/ encountered an error during installation.
How can I solve this?

Is there a way you could group the ntoifications or aggregrate them say for example in an application you would have "John and 3 others commented on your post" versus 3 seperate notifications.

Hi, thanks so much for the tutorial! Two questions:

1- How can I create a page that displays all notifications, and display a link to this page in the dropdown when data.length >0 or 0? (i.e when there are and when there are not notifications, have a 'show all' item appear in the dropdown that brings you to a page with all your notifications

2- How can I make the json.url path in index.json.jbuilder dynamic for different types of notifications? i.e :
json.url users_friend_request_path(notification.notifiable) is the url for when the notification is a friend request, and I've tried string interpolation using notifiable.type and a few other things that did not work.