Send for review

app/assets/stylesheets/common.scss

@@ -145,6 +145,25 @@ body {
                 }
               }
             }
+
+            &.notifs-link {
+              position: relative;
+
+              .alert {
+                top: 0;
+                right: 0;
+                width: 17px;
+                height: 17px;
+                color: #fff;
+                display: flex;
+                line-height: 1;
+                border-radius: 50%;
+                position: absolute;
+                align-items: center;
+                background: #e70040;
+                justify-content: center;
+              }
+            }
           }
 
           &.account {
@@ -350,4 +369,4 @@ body {
     height: 100%;
     border-radius: 50%;
   }
-}
+}

app/controllers/notifications_controller.rb

@@ -1,7 +1,21 @@
 # frozen_string_literal: true
 
 class NotificationsController < ApplicationController
+  def show
+    notif = Notification.find(params[:id])
+    if notif
+      notif.read!
+      if notif.subject.respond_to?(:post)
+        redirect_to notif.subject.post
+      else
+        redirect_to notif.sender
+      end
+    else
+      redirect_to root_url
+    end
+  end
+
   def index
-    @notifs = Notification.where(receiver_id: current_user.id)
+    @notifs = Notification.where(receiver_id: current_user.id).unread
   end
 end

app/models/notification.rb

@@ -1,9 +1,11 @@
 # frozen_string_literal: true
 
 class Notification < ApplicationRecord
+  enum read_status: %i[unread read]
+
   belongs_to :sender, class_name: 'User'
-  belongs_to :receiver, class_name: 'User'
   belongs_to :subject, polymorphic: true
+  belongs_to :receiver, class_name: 'User'
 
   validates :sender, :receiver, :content, :subject, presence: true
 end

app/views/layouts/_header.html.erb

@@ -13,7 +13,10 @@
         </li>
         <li><%= link_to 'Home', root_path %></li>
         <li>
-          <%= link_to notifications_path do%>
+          <%= link_to notifications_path, class: 'notifs-link' do%>
+            <% if Notification.unread.size.positive? %>
+              <span class="alert"><%= Notification.unread.size %></span>
+            <% end %>
             <%= icon('fas', 'bell') %> Notifications
           <% end %>
         </li>
@@ -41,4 +44,4 @@
       </ul>
     </nav>
   <% end %>
-</header>
+</header>

app/views/notifications/_notif.html.erb

@@ -0,0 +1,8 @@
+<li>
+  <%= link_to notif do %>
+    <span class="photo">
+      <%= image_tag(photo_path(notif.sender)) %>
+    </span>
+    <%= notif.content %>
+  <% end %>
+</li>

app/views/notifications/index.html.erb

@@ -6,16 +6,7 @@
   </header>
   <% if @notifs.any? %>
     <ul>
-      <% @notifs.each do |notif| %>
-        <li>
-          <%= link_to notif.subject.respond_to?(:post) ? notif.subject.post : notif.sender do %>
-            <span class="photo">
-              <%= image_tag(photo_path(notif.sender)) %>
-            </span>
-            <%= notif.content %>
-          <% end %>
-        </li>
-      <% end %>
+      <%= render partial: 'notifications/notif', collection: @notifs %>
     </ul>
   <% end %>
-</div>
+</div>

app/views/users/_notifs.html.erb

@@ -4,15 +4,7 @@
     <%= link_to 'See All', notifications_path %>
   </header>
   <ul>
-    <% user.notifications.each do |notif| %>
-      <li>
-        <%= link_to notif.subject.respond_to?(:post) ? notif.subject.post : notif.sender do %>
-          <span class="photo">
-            <%= image_tag(photo_path(notif.sender)) %>
-          </span>
-          <%= notif.content %>
-        <% end %>
-      </li>
-    <% end %>
+    <%= render partial: 'notifications/notif',
+               collection: user.notifications.unread, as: :notif %>
   </ul>
-</div>
+</div>

config/routes.rb

@@ -3,7 +3,7 @@
 Rails.application.routes.draw do
   root 'users#home'
 
-  resources :notifications, only: [:index]
+  resources :notifications, only: [:show, :index]
 
   resources :likes, only: [:create, :update, :destroy]
 

db/migrate/20190920065351_add_read_status_to_notifications.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddReadStatusToNotifications < ActiveRecord::Migration[5.2]
+  def change
+    add_column :notifications, :read_status, :integer, limit: 1, default: 0
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_07_12_021946) do
+ActiveRecord::Schema.define(version: 2019_09_20_065351) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -61,6 +61,7 @@
     t.bigint "receiver_id"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.integer "read_status", limit: 2, default: 0
     t.index ["receiver_id"], name: "index_notifications_on_receiver_id"
     t.index ["sender_id"], name: "index_notifications_on_sender_id"
     t.index ["subject_type", "subject_id"], name: "index_notifications_on_subject_type_and_subject_id"