Notificação muda cor ao ser clicada

-Muda status da notificação para "clicked" ao ser clicada
-Muda status da notificação para "seen" ao acessar página de notificações

Co-authored-by: ana resgalla <[email protected]>

app/assets/stylesheets/application.bootstrap.scss

@@ -8,6 +8,9 @@ $theme-colors: (
   "light":      rgba(255, 251, 251, 0.603),
   "dark":       #1b1b1b
 );
+
+$primary: #a130fd;
+
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';
 @import 'actiontext.css';

app/controllers/notifications_controller.rb

@@ -3,6 +3,44 @@ class NotificationsController < ApplicationController
 
   def index
     @notifications = current_user.profile.notifications.order(created_at: :desc)
-    @notifications.update_all(status: :seen)
+    @notifications.map { |n| n.seen! if n.unseen? }
+  end
+
+  def update
+    @notification = Notification.find(params[:id])
+    @notification.clicked!
+    redirect_to_notification
+  end
+
+  private
+
+  def redirect_to_notification
+    return redirect_to_invitation if @notification.notifiable.is_a? Invitation
+    return redirect_to_comment if @notification.notifiable.is_a? Comment
+    return redirect_to_connection if @notification.notifiable.is_a? Connection
+    return redirect_to_post if @notification.notifiable.is_a? Post
+
+    redirect_to_like if @notification.notifiable.is_a? Like
+  end
+
+  def redirect_to_invitation
+    redirect_to invitation_path(@notification.notifiable)
+  end
+
+  def redirect_to_comment
+    redirect_to post_path(@notification.notifiable.post)
+  end
+
+  def redirect_to_connection
+    redirect_to profile_path(@notification.notifiable.follower)
+  end
+
+  def redirect_to_post
+    redirect_to post_path(@notification.notifiable)
+  end
+
+  def redirect_to_like
+    likeable = @notification.notifiable.likeable
+    redirect_to post_path(likeable.is_a?(Comment) ? likeable.post : likeable)
   end
 end

app/models/profile.rb

@@ -38,8 +38,7 @@ class Profile < ApplicationRecord
   enum privacy: { private_profile: 0, public_profile: 10 }
   enum status: { inactive: 0, active: 5 }
 
-  delegate :full_name, to: :user
-  delegate :email, to: :user
+  delegate :full_name, :email, to: :user
 
   def self.advanced_search(search_query)
     left_outer_joins(:job_categories, :personal_info, :user).where(

app/views/notifications/_comment.html.erb

@@ -1 +1 @@
-<%= link_to notification.notifiable.user.full_name, profile_path(notification.notifiable.user.profile) %> comentou em sua publicação: <%= link_to notification.notifiable.post.title, post_path(notification.notifiable.post) %>
+<%= notification.notifiable.user.full_name %> comentou em sua publicação: <%= notification.notifiable.post.title %>

app/views/notifications/_connection.html.erb

@@ -1 +1 @@
-<%= link_to notification.notifiable.follower.user.full_name, profile_path(notification.notifiable.follower) %> começou a te seguir
+<%= notification.notifiable.follower.full_name %> começou a te seguir

app/views/notifications/_invitation.html.erb

@@ -1 +1 @@
-Você recebeu um convite para <%= link_to notification.notifiable.project_title, invitation_path(notification.notifiable) %>
+Você recebeu um convite para <%= notification.notifiable.project_title %>

app/views/notifications/_like.html.erb

@@ -1,5 +1,5 @@
 <% if notification.notifiable.likeable.is_a?Post %>
-  <%= link_to notification.notifiable.user.full_name, profile_path(notification.notifiable.user.profile) %> curtiu sua publicação
+  <%= notification.notifiable.user.full_name %> curtiu sua publicação
 <% else %>
-  <%= link_to notification.notifiable.user.full_name, profile_path(notification.notifiable.user.profile) %> curtiu seu comentário
+  <%= notification.notifiable.user.full_name %> curtiu seu comentário
 <% end %>

app/views/notifications/_post.html.erb

@@ -1 +1 @@
-<%= notification.notifiable.user.full_name %> fez uma <%= link_to 'publicação', post_path(notification.notifiable) %>
+<%= notification.notifiable.user.full_name %> fez uma publicação

app/views/notifications/index.html.erb

@@ -1,18 +1,18 @@
 <div class="container d-flex flex-column align-items-center">
-  <h2>Notificações</h2>
-  <% if @notifications&.any? %>
+  <h2><%= Notification.model_name.human(count: 2) %></h2>
+  <% if @notifications.any? %>
     <ul class="list-group list-group-flush">
       <% @notifications.each do |notification| %>
-        <li class="list-group-item">
-          <%= render(
-          partial: "#{notification.notifiable.class.name.downcase}" ,
-          locals: { notification: notification }
-          )%>
-          há <%= distance_of_time_in_words_to_now(notification.notifiable.created_at) %>
+        <li class="list-group-item <%= 'list-group-item-primary' if notification.seen? %> ">
+          <%= button_to notification_path(notification), method: :patch, class: 'btn btn-link' do %>
+            <%= render( partial: "#{notification.notifiable.class.name.downcase}",
+                        locals: { notification: notification } ) %>
+            há <%= distance_of_time_in_words_to_now(notification.notifiable.created_at) %>
+          <% end %>
         </li>
       <% end %>
     </ul>
   <% else %>
-    <p>Nenhuma notificação encontrada</p>
+    <p><%= t('notifications.no_notifications') %></p>
   <% end %>
 </div>

config/locales/notifications.pt-BR.yml

@@ -6,5 +6,7 @@ pt-BR:
         other: 'Notificações'
 
   notifications:
+    no_notifications: 'Nenhuma notificação'
+
     new_follower_mail: '%{follower_name} te seguiu'
     new_notificaiton: 'Você recebeu uma nova notificação!'

config/routes.rb

@@ -12,7 +12,7 @@
   post '/projects', to: 'projects#create_invitation_request', as: 'invitation_request'
 
   resources :job_categories, only: %i[index create destroy]
-  resources :notifications, only: %i[index]
+  resources :notifications, only: %i[index update]
 
   resources :posts, only: %i[new create] do
     resources :comments, only: %i[create]

spec/system/notifications/user_sees_comments_notification_spec.rb

@@ -5,16 +5,14 @@
     user = create(:user)
     post = create(:post, user:)
     other_user = create(:user)
-    comment = create(:comment, post:, user: other_user)
+    create(:comment, post:, user: other_user)
 
     login_as user
     visit notifications_path
 
     expect(Notification.count).to eq 1
     expect(page).to have_current_path notifications_path
-    expect(page).to have_content "comentou em sua publicação: #{post.title}"
-    expect(page).to have_link post.title, href: post_path(post)
-    expect(page).to have_link comment.user.profile.full_name, href: profile_path(comment.user.profile)
+    expect(page).to have_content "#{other_user.full_name} comentou em sua publicação: #{post.title}"
   end
 
   it 'e não vê notificação de seu comentário' do
@@ -44,8 +42,8 @@
     end
 
     expect(page).to have_current_path notifications_path
-    expect(page).to have_content 'curtiu seu comentário'
-    expect(page).to have_link like.user.profile.full_name, href: profile_path(like.user.profile)
+    expect(page).to have_content "#{like.user.full_name} curtiu seu comentário"
+    expect(Notification.last).to be_seen
   end
 
   it 'e não recebe ao curtir seu próprio comentário' do
@@ -64,4 +62,37 @@
     expect(page).not_to have_content 'curtiu seu comentário'
     expect(page).not_to have_link like.user.profile.full_name, href: profile_path(like.user.profile)
   end
+
+  context 'ao clicar na notificação' do
+    it 'de comentário é redirecionado para a página do post' do
+      user = create(:user)
+      post = create(:post, user:)
+      comment = create(:comment, post:)
+
+      login_as user
+      visit notifications_path
+      click_on comment.user.full_name
+
+      expect(page).to have_current_path post_path(post)
+      expect(page).to have_content post.title
+      expect(page).to have_content comment.message
+      expect(Notification.last).to be_clicked
+    end
+
+    it 'de curtida é redirecionado para a página do post' do
+      user = create(:user)
+      post = create(:post)
+      comment = create(:comment, post:, user:)
+      like = create(:like, likeable: comment)
+
+      login_as user
+      visit notifications_path
+      click_on like.user.full_name
+
+      expect(page).to have_current_path post_path(post)
+      expect(page).to have_content post.title
+      expect(page).to have_content comment.message
+      expect(Notification.last).to be_clicked
+    end
+  end
 end

spec/system/notifications/user_sees_invitation_notification_spec.rb

@@ -10,7 +10,6 @@
 
     expect(page).to have_current_path notifications_path
     expect(page).to have_content "Você recebeu um convite para #{invitation.project_title} há 1 dia"
-    expect(page).to have_link invitation.project_title, href: invitation_path(invitation)
   end
 
   it 'e não vê convites de outros usuários' do
@@ -28,7 +27,7 @@
     expect(page).to_not have_content "Você recebeu um convite para #{other_user_invitation.project_title}"
   end
 
-  it 'ao clicar na notificação é redirecionado para a página de convites' do
+  it 'ao clicar na notificação é redirecionado para a página do convite' do
     user = create(:user)
     invitation = create(:invitation, profile: user.profile)
 
@@ -38,5 +37,6 @@
 
     expect(page).to have_current_path invitation_path(invitation)
     expect(page).to have_content invitation.project_title
+    expect(Notification.last).to be_clicked
   end
 end

spec/system/notifications/user_sees_new_follower_notification_spec.rb

@@ -11,6 +11,18 @@
 
     expect(page).to have_current_path notifications_path
     expect(page).to have_content 'Paulo começou a te seguir'
-    expect(page).to have_link follower.full_name, href: profile_path(follower)
+  end
+
+  it 'ao clicar na notificação redireciona para o perfil do seguidor' do
+    follower = create(:user, full_name: 'Paulo')
+    followed = create(:user, full_name: 'Ana')
+    Connection.create!(followed_profile: followed.profile, follower: follower.profile)
+
+    login_as followed
+    visit notifications_path
+    click_on 'Paulo começou a te seguir'
+
+    expect(page).to have_current_path profile_path(follower)
+    expect(Notification.last).to be_clicked
   end
 end

spec/system/notifications/user_sees_post_notification_spec.rb

@@ -13,7 +13,7 @@
     visit notifications_path
 
     expect(page).to have_content 'Ana fez uma publicação'
-    expect(page).to have_link 'publicação', href: post_path(post)
+    expect(Notification.last).to be_seen
   end
 
   context 'nova publicação notifica seguidores' do
@@ -39,8 +39,7 @@
       visit notifications_path
 
       expect(page).to have_current_path notifications_path
-      expect(page).to have_content 'curtiu sua publicação'
-      expect(page).to have_link like.user.full_name, href: profile_path(like.user.profile)
+      expect(page).to have_content "#{like.user.full_name} curtiu sua publicação"
     end
 
     it 'e não recebe quando curte sua própria publicação' do
@@ -54,5 +53,34 @@
       expect(page).not_to have_content 'curtiu sua publicação'
       expect(page).not_to have_link like.user.profile.full_name, href: profile_path(like.user.profile)
     end
+
+    it 'ao clicar na notificação é redirecionado para a publicação' do
+      user = create(:user)
+      post = create(:post, user:)
+      like = create(:like, likeable: post)
+
+      login_as user
+      visit notifications_path
+      click_on "#{like.user.full_name} curtiu sua publicação"
+
+      expect(page).to have_current_path post_path(post)
+      expect(Notification.last).to be_clicked
+    end
+  end
+
+  it 'ao clicar na notificação é redirecionado para a publicação' do
+    follower = create(:user, full_name: 'Paulo')
+    followed = create(:user, full_name: 'Ana')
+    Connection.create!(followed_profile: followed.profile, follower: follower.profile)
+    post = create(:post, user: followed)
+
+    NewPostNotificationJob.perform_now(post)
+
+    login_as follower
+    visit notifications_path
+    click_on 'Ana fez uma publicação'
+
+    expect(page).to have_current_path post_path(post)
+    expect(Notification.last).to be_clicked
   end
 end