From f11f2cd3dddd8538f1cf1dcda284f6e0fe61bf15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 15 Feb 2021 23:36:58 +0100
Subject: [PATCH] Extract component to render notifications item

---
 app/assets/stylesheets/application.scss       |  1 +
 app/assets/stylesheets/layout.scss            | 26 ----------------
 app/assets/stylesheets/notification_item.scss | 25 +++++++++++++++
 .../notification_item_component.html.erb      | 30 ++++++++++++++++++
 .../layout/notification_item_component.rb     |  7 +++++
 app/views/layouts/_notification_item.html.erb | 31 +------------------
 6 files changed, 64 insertions(+), 56 deletions(-)
 create mode 100644 app/assets/stylesheets/notification_item.scss
 create mode 100644 app/components/layout/notification_item_component.html.erb
 create mode 100644 app/components/layout/notification_item_component.rb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ffb1517de..44dc26563 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -15,6 +15,7 @@
 @import "legislation";
 @import "legislation_process";
 @import "legislation_process_form";
+@import "notification_item";
 @import "community";
 @import "stats";
 @import "custom";
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d993372ab..cc2d92de1 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1345,32 +1345,6 @@ form {
   }
 }
 
-.notifications {
-  position: relative;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  [class^="icon-"] {
-    font-size: rem-calc(19);
-    vertical-align: middle;
-  }
-
-  .icon-circle {
-    color: #ecf00b;
-    font-size: rem-calc(10);
-    position: absolute;
-    left: 12px;
-    top: 6px;
-
-    @include breakpoint(medium) {
-      left: auto;
-      right: 8px;
-    }
-  }
-}
-
 .notifications-list {
   position: relative;
 
diff --git a/app/assets/stylesheets/notification_item.scss b/app/assets/stylesheets/notification_item.scss
new file mode 100644
index 000000000..fd272250a
--- /dev/null
+++ b/app/assets/stylesheets/notification_item.scss
@@ -0,0 +1,25 @@
+.notifications {
+  position: relative;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  [class^="icon-"] {
+    font-size: rem-calc(19);
+    vertical-align: middle;
+  }
+
+  .icon-circle {
+    color: #ecf00b;
+    font-size: rem-calc(10);
+    position: absolute;
+    left: 12px;
+    top: 6px;
+
+    @include breakpoint(medium) {
+      left: auto;
+      right: 8px;
+    }
+  }
+}
diff --git a/app/components/layout/notification_item_component.html.erb b/app/components/layout/notification_item_component.html.erb
new file mode 100644
index 000000000..954b60420
--- /dev/null
+++ b/app/components/layout/notification_item_component.html.erb
@@ -0,0 +1,30 @@
+<% if user %>
+  <li id="notifications">
+    <%= link_to notifications_path, rel: "nofollow",
+                class: "notifications" do %>
+      <span class="show-for-sr">
+        <%= t("layouts.header.notification_item.notifications") %>
+      </span>
+
+      <% if user.notifications.unread.count > 0 %>
+        <span class="icon-circle" aria-hidden="true"></span>
+        <span class="icon-notification" aria-hidden="true"
+              title="<%= t("layouts.header.notification_item.new_notifications",
+                         count: user.notifications_count) %>">
+        </span>
+        <span class="show-for-small-only">
+          <%= t("layouts.header.notification_item.new_notifications",
+              count: user.notifications_count) %>
+        </span>
+      <% else %>
+        <span class="icon-no-notification" aria-hidden="true"
+              title="<%= t("layouts.header.notification_item.no_notifications") %>">
+        </span>
+        <span class="show-for-small-only">
+          <%= t("layouts.header.notification_item.no_notifications") %>
+        </span>
+      <% end %>
+
+    <% end %>
+  </li>
+<% end %>
diff --git a/app/components/layout/notification_item_component.rb b/app/components/layout/notification_item_component.rb
new file mode 100644
index 000000000..62952be1c
--- /dev/null
+++ b/app/components/layout/notification_item_component.rb
@@ -0,0 +1,7 @@
+class Layout::NotificationItemComponent < ApplicationComponent
+  attr_reader :user
+
+  def initialize(user)
+    @user = user
+  end
+end
diff --git a/app/views/layouts/_notification_item.html.erb b/app/views/layouts/_notification_item.html.erb
index c766f862a..2e51085b6 100644
--- a/app/views/layouts/_notification_item.html.erb
+++ b/app/views/layouts/_notification_item.html.erb
@@ -1,30 +1 @@
-<% if user_signed_in? %>
-  <li id="notifications">
-    <%= link_to notifications_path, rel: "nofollow",
-                class: "notifications" do %>
-      <span class="show-for-sr">
-        <%= t("layouts.header.notification_item.notifications") %>
-      </span>
-
-      <% if current_user.notifications.unread.count > 0 %>
-        <span class="icon-circle" aria-hidden="true"></span>
-        <span class="icon-notification" aria-hidden="true"
-              title="<%= t("layouts.header.notification_item.new_notifications",
-                         count: current_user.notifications_count) %>">
-        </span>
-        <span class="show-for-small-only">
-          <%= t("layouts.header.notification_item.new_notifications",
-              count: current_user.notifications_count) %>
-        </span>
-      <% else %>
-        <span class="icon-no-notification" aria-hidden="true"
-              title="<%= t("layouts.header.notification_item.no_notifications") %>">
-        </span>
-        <span class="show-for-small-only">
-          <%= t("layouts.header.notification_item.no_notifications") %>
-        </span>
-      <% end %>
-
-    <% end %>
-  </li>
-<% end %>
+<%= render Layout::NotificationItemComponent.new(current_user) %>