Feature to show recently active badge for developers (joemasilotti#649)

* Implemented code to show recently active badge for developers

* Cleaned badge component to only pass title and color attributes

* Tests for recently acitve badge for developers

* Updated Changelog file

* Feedback requested changes for badge color and recently_active method

* Make sure badges flow on mobile

Co-authored-by: Joe Masilotti <[email protected]>

Author: sarvaiyanidhi

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ## September
 
+* September 16 - Show "Recently Active" badge for developers active in last 7 days #640 @sarvaiyanidhi
 * September 15 - Allow rich text for developer bios #638 @rayhanw
 * September 15 - Show "Featured" badge in search results #642
 * September 14 - Only ever send one Celebration Promotion email #617 @sarvaiyanidhi

app/components/developers/badge_component.rb

@@ -0,0 +1,25 @@
+module Developers
+  class BadgeComponent < ApplicationComponent
+    private attr_reader :title, :color
+
+    def initialize(title, color:)
+      @title = title
+      @color = color
+    end
+
+    def call
+      tag.span title, class: class_names("inline-flex items-center rounded-md px-2.5 py-0.5 text-sm font-medium", color_classes)
+    end
+
+    def color_classes
+      case color.to_sym
+      when :blue
+        "bg-blue-100 text-blue-800"
+      when :green
+        "bg-green-100 text-green-800"
+      else
+        raise "Unknown color: #{color}"
+      end
+    end
+  end
+end

app/components/developers/card_component.html.erb

@@ -15,13 +15,16 @@
         </div>
       </div>
 
-      <% if featured? %>
-        <div class="mt-1 pb-1">
-          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-blue-100 text-blue-800"> <%= t(".featured") %> </span>
-        </div>
-      <% end %>
+     <div class="mt-3 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 items-start">
+        <% if featured? %>
+          <%= render Developers::BadgeComponent.new(t(".featured"), color: "blue") %>
+        <% end %>
+        <% if recently_active? %>
+          <%= render Developers::BadgeComponent.new(t(".recently_active"), color: "green") %>
+        <% end %>
+      </div>
 
-      <div class="mt-2 text-sm sm:text-base text-gray-700 space-y-4">
+      <div class="mt-3 text-sm sm:text-base text-gray-700 space-y-4">
         <p class="line-clamp-3 break-words"><%= developer.plain_text_bio %></p>
       </div>
     </div>

app/components/developers/card_component.rb

@@ -3,6 +3,7 @@ class CardComponent < ApplicationComponent
     with_collection_parameter :developer
 
     delegate :featured?, to: :developer
+    delegate :recently_active?, to: :developer
 
     private attr_reader :developer, :highlight_featured
 

app/models/developer.rb

@@ -8,6 +8,7 @@ class Developer < ApplicationRecord
   include PgSearch::Model
 
   FEATURE_LENGTH = 1.week
+  RECENTLY_ACTIVE_LENGTH = 1.week
 
   enum search_status: {
     actively_looking: 1,
@@ -98,4 +99,8 @@ def feature!
   def featured?
     featured_at? && featured_at >= FEATURE_LENGTH.ago
   end
+
+  def recently_active?
+    updated_at >= RECENTLY_ACTIVE_LENGTH.ago
+  end
 end

app/models/message.rb

@@ -8,7 +8,7 @@ class Message < ApplicationRecord
   )
 
   belongs_to :conversation, touch: true
-  belongs_to :sender, polymorphic: true
+  belongs_to :sender, polymorphic: true, touch: true
   has_one :developer, through: :conversation
   has_one :business, through: :conversation
 

config/locales/en.yml

@@ -264,6 +264,7 @@ en:
       unspecified_html: Currently unavailable
     card_component:
       featured: Featured developer
+      recently_active: Recently Active
     count_component:
       cta: Reset filters
       title_html: Showing <span class='font-bold'>%{count}</span> of <span class='font-bold'>%{total}</span>+ developers.

test/components/developers/badge_component_test.rb

@@ -0,0 +1,21 @@
+require "test_helper"
+
+module Developers
+  class BadgeComponentTest < ViewComponent::TestCase
+    setup do
+      @developer = developers(:one)
+    end
+
+    test "renders recently active badge if the developer profile is active in last 7 days" do
+      @developer.updated_at = Date.current
+      render_inline BadgeComponent.new("Recently Active Developer", color: "green")
+      assert_selector("span[class~='bg-green-100']")
+    end
+
+    test "renders feature badge if the developer profile is features" do
+      @developer.feature!
+      render_inline BadgeComponent.new("Featured Developer", color: "blue")
+      assert_selector("span[class~='bg-blue-100']")
+    end
+  end
+end

test/components/developers/card_component_test.rb

@@ -48,5 +48,19 @@ class CardComponentTest < ViewComponent::TestCase
       render_inline(CardComponent.new(developer: @developer, highlight_featured: true))
       assert_selector "a.border-l-4.border-blue-400"
     end
+
+    test "renders recently active badge if developer is active in last 7 days" do
+      @developer.update!(bio: "I am the first developer")
+      @developer.recently_active?
+      render_inline(CardComponent.new(developer: @developer))
+      assert_text I18n.t("developers.card_component.recently_active")
+    end
+
+    test "doesn't render recently active badge if developer is active more than 7 days ago" do
+      @developer.update!(updated_at: 2.weeks.ago)
+      @developer.recently_active?
+      render_inline(CardComponent.new(developer: @developer))
+      assert_no_text I18n.t("developers.card_component.recently_active")
+    end
   end
 end

test/models/developer_test.rb

@@ -215,4 +215,14 @@ class DeveloperTest < ActiveSupport::TestCase
 
     travel_back
   end
+
+  test "recently active developers within last one week" do
+    @developer = developers(:one)
+
+    @developer.updated_at = 2.weeks.ago
+    refute @developer.recently_active?
+
+    @developer.updated_at = Date.current
+    assert @developer.recently_active?
+  end
 end