Feature: Liking project submissions with Hotwire

Because:
* We are moving our React components to Hotwire

This commit:
* Add like view component to encapsulate the like button.
* Add like singular resource route and controller - now with a proper delete route instead of reusing the create action.
* Decorates submissions with current user likes when they are being fetched. This saves us from checking each one individually and hitting the database each time.
* Adds a reusable sorting stimulus controller - can be used to automatically sort lists on page load or when a list item changes.

app/components/project_submissions/item_component.html.erb

@@ -1,13 +1,8 @@
-<%= turbo_frame_tag project_submission do %>
+<%= turbo_frame_tag project_submission, data: { sort_target: 'item', sort_code: sort_by } do %>
   <div data-test-id="submission-item" class="relative py-6 border-solid border-t border-gray-300 flex flex-col md:flex-row justify-between items-center">
 
     <div class="flex items-center mb-4 md:mb-0">
-
-      <button class="text-gray-300 mr-4 flex items-center hint--top" data-test-id="like-btn" aria-label="Like submission">
-        <span class="mr-1" data-test-id="number-of-likes"><%= project_submission.votes_for.size %></span>
-        <%= inline_svg_tag 'icons/heart.svg', class: 'h-5 w-5', aria: true, title: 'heart', desc: 'heart icon' %>
-      </button>
-
+      <%= render ProjectSubmissions::LikeComponent.new(project_submission) %>
       <p class="truncate max-w-xs lg:max-w-lg font-medium text-lg break-words"><%= project_submission.user.username %></p>
     </div>
 
@@ -31,7 +26,7 @@
           data-transition-leave="transition ease-in duration-75"
           data-transition-leave-start="transform opacity-100 scale-100"
           data-transition-leave-end="transform opacity-10 scale-95"
-          class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-0-button" tabindex="-1">
+          class="hidden absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-0-button" tabindex="-1">
 
           <% if project_submission.user == current_user %>
             <%= link_to edit_lesson_v2_project_submission_path(project_submission.lesson, project_submission), class: 'text-gray-700 group flex items-center px-4 py-2 text-sm', role: 'menuitem', tabindex: '-1', data: { turbo_frame: 'modal', test_id: 'edit-submission'} do %>

app/components/project_submissions/item_component.rb

@@ -14,5 +14,11 @@ def render?
     private
 
     attr_reader :project_submission, :current_user
+
+    def sort_by
+      return 9999 if project_submission.user == current_user
+
+      (project_submission.cached_votes_total + 1) * 10
+    end
   end
 end

app/components/project_submissions/like_component.html.erb

@@ -0,0 +1,6 @@
+<%= turbo_frame_tag dom_id(project_submission, :likes) do %>
+  <%= button_to project_submission_v2_like_path(project_submission), method: http_action, class: 'text-gray-400 mr-4 flex items-center hint--top', data: { test_id: 'like-submission' }, aria: { label: 'Like submission' } do %>
+    <span class="mr-1" data-test-id="like-count"><%= project_submission.cached_votes_total %></span>
+    <%= inline_svg_tag 'icons/heart.svg', class: "h-5 w-5 #{bg_color_class}", aria: true, title: 'heart', desc: 'heart icon' %>
+  <% end %>
+<% end %>

app/components/project_submissions/like_component.rb

@@ -0,0 +1,19 @@
+module ProjectSubmissions
+  class LikeComponent < ApplicationComponent
+    def initialize(project_submission)
+      @project_submission = project_submission
+    end
+
+    private
+
+    attr_reader :project_submission
+
+    def http_action
+      project_submission.liked? ? :delete : :post
+    end
+
+    def bg_color_class
+      project_submission.liked? ? 'text-teal-700' : 'text-gray-400'
+    end
+  end
+end

app/controllers/lessons/v2_project_submissions_controller.rb

@@ -5,7 +5,7 @@ class V2ProjectSubmissionsController < ApplicationController
 
     def index
       @current_user_submission = current_user.project_submissions.find_by(lesson: @lesson)
-      @pagy, @project_submissions = pagy(project_submissions_query.public_submissions, items: params.fetch(:limit, 15))
+      @pagy, @project_submissions = pagy_array(project_submissions_query, items: params.fetch(:limit, 15))
     end
 
     def new
@@ -56,6 +56,11 @@ def project_submissions_query
         lesson: @lesson,
         current_user:
       )
+
+      ProjectSubmissions::MarkLiked.call(
+        user: current_user,
+        project_submissions: @project_submissions_query.public_submissions
+      )
     end
 
     def set_lesson

app/controllers/project_submissions/v2_likes_controller.rb

@@ -0,0 +1,21 @@
+class ProjectSubmissions::V2LikesController < ApplicationController
+  before_action :authenticate_user!
+
+  def create
+    @project_submission = ProjectSubmission.find(params[:project_submission_id])
+    @project_submission.like!(current_user)
+
+    respond_to do |format|
+      format.turbo_stream
+    end
+  end
+
+  def destroy
+    @project_submission = ProjectSubmission.find(params[:project_submission_id])
+    @project_submission.unlike!(current_user)
+
+    respond_to do |format|
+      format.turbo_stream { render :create }
+    end
+  end
+end

app/javascript/controllers/sort_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus';
+import { useTargetMutation } from 'stimulus-use';
+
+export default class extends Controller {
+  static targets = ['item'];
+
+  connect() {
+    useTargetMutation(this);
+    this.sortItems();
+  }
+
+  itemTargetAdded() {
+    this.sortItems();
+  }
+
+  sortItems() {
+    const items = Array.from(this.itemTargets);
+
+    if (this.itemsAreSorted(items)) return;
+    items.sort((a, b) => this.compareItems(a, b)).forEach((child) => this.element.append(child));
+  }
+
+  itemsAreSorted() {
+    return this.itemSortCodes().every((sortCode, index, items) => {
+      if (index === 0) return true;
+      return sortCode <= items[index - 1];
+    });
+  }
+
+  itemSortCodes() {
+    return this.itemTargets.map((item) => this.getSortCode(item));
+  }
+
+  /* eslint-disable class-methods-use-this */
+  getSortCode(item) {
+    return parseFloat(item.getAttribute('data-sort-code')) || 0;
+  }
+
+  compareItems(left, right) {
+    return this.getSortCode(right) - this.getSortCode(left);
+  }
+}

app/models/project_submission.rb

@@ -22,6 +22,20 @@ class ProjectSubmission < ApplicationRecord
   scope :created_today, -> { where('created_at >= ?', Time.zone.now.beginning_of_day) }
   scope :discardable, -> { not_removed_by_admin.where('discard_at <= ?', Time.zone.now) }
 
+  attribute :liked, :boolean, default: false
+
+  def like!(user = nil)
+    liked_by(user) if user
+
+    self.liked = true
+  end
+
+  def unlike!(user = nil)
+    unliked_by(user) if user
+
+    self.liked = false
+  end
+
   private
 
   def live_preview_allowed

app/services/project_submissions/mark_liked.rb

@@ -0,0 +1,28 @@
+module ProjectSubmissions
+  class MarkLiked
+    def initialize(user:, project_submissions:)
+      @user = user
+      @project_submissions = project_submissions
+    end
+
+    def self.call(**args)
+      new(**args).call
+    end
+
+    def call
+      project_submissions.each do |submission|
+        next if liked_submission_ids.exclude?(submission.id)
+
+        submission.like!
+      end
+    end
+
+    private
+
+    attr_reader :user, :project_submissions
+
+    def liked_submission_ids
+      @liked_submission_ids ||= user.votes.where(votable: project_submissions).pluck(:votable_id)
+    end
+  end
+end

app/views/lessons/v2_project_submissions/index.html.erb

@@ -23,7 +23,7 @@
       <% end %>
     </header>
 
-    <%= turbo_frame_tag 'submissions-list', data: { test_id: 'submissions-list' } do %>
+    <%= turbo_frame_tag 'submissions-list', data: { test_id: 'submissions-list', controller: 'sort' } do %>
       <%= render ProjectSubmissions::ItemComponent.new(project_submission: @current_user_submission, current_user:) %>
       <%= render ProjectSubmissions::ItemComponent.with_collection(@project_submissions, current_user:) %>
     <% end %>

app/views/project_submissions/v2_likes/create.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace @project_submission do %>
+ <%= render ProjectSubmissions::ItemComponent.new(project_submission: @project_submission, current_user: current_user) %>
+<% end %>

config/initializers/pagy.rb

@@ -33,7 +33,7 @@
 
 # Array extra: Paginate arrays efficiently, avoiding expensive array-wrapping and without overriding
 # See https://ddnexus.github.io/pagy/extras/array
-# require 'pagy/extras/array'
+require 'pagy/extras/array'
 
 # Calendar extra: Add pagination filtering by calendar time unit (year, quarter, month, week, day)
 # See https://ddnexus.github.io/pagy/extras/calendar

config/routes.rb

@@ -101,6 +101,7 @@
   resources :project_submissions do
     resources :flags, only: %i[create], controller: 'project_submissions/flags'
     resources :likes, controller: 'project_submissions/likes'
+    resource :v2_like, only: %i[create destroy], controller: 'project_submissions/v2_likes'
   end
 
   resources :paths, only: %i[index show] do

spec/models/project_submission_spec.rb

@@ -153,4 +153,55 @@
       end
     end
   end
+
+  describe '#liked' do
+    it 'return false by default' do
+      expect(project_submission).not_to be_liked
+    end
+
+    context 'when the project submission is liked' do
+      it 'returns true' do
+        project_submission.liked = true
+        expect(project_submission).to be_liked
+      end
+    end
+
+    context 'when the project submission is not liked' do
+      it 'returns false' do
+        project_submission.liked = false
+        expect(project_submission).not_to be_liked
+      end
+    end
+  end
+
+  describe '#like!' do
+    it 'marks the project submission as liked' do
+      user = create(:user)
+      expect { project_submission.like!(user) }.to change { project_submission.liked }.from(false).to(true)
+    end
+
+    context 'when a user is provided' do
+      it 'creates a like for the user' do
+        expect { project_submission.like!(create(:user)) }.to change { project_submission.votes_for.count }.by(1)
+      end
+    end
+  end
+
+  describe '#unlike!' do
+    it 'marks the project submission as unliked' do
+      user = create(:user)
+      project_submission.liked = true
+      expect { project_submission.unlike!(user) }.to change { project_submission.liked }.from(true).to(false)
+    end
+
+    context 'when a user has been provided' do
+      it 'removes the users like' do
+        user = create(:user)
+
+        project_submission.like!(user)
+
+        expect { project_submission.unlike!(user) }.to change { project_submission.votes_for.count }.by(-1)
+      end
+    end
+  end
 end

spec/system/v2_lesson_project_submissions/like_spec.rb

@@ -0,0 +1,70 @@
+require 'rails_helper'
+
+RSpec.describe 'Liking project submissions' do
+  let(:user) { create(:user) }
+  let(:lesson) { create(:lesson, :project) }
+
+  context "when liking other users' submissions" do
+    before do
+      Flipper.enable(:v2_project_submissions)
+      create(:project_submission, lesson:)
+
+      sign_in(user)
+      visit lesson_path(lesson)
+    end
+
+    after do
+      Flipper.disable(:v2_project_submissions)
+    end
+
+    it 'you can like another users submission' do
+      within(:test_project_submission, 1) do
+        expect(find(:test_id, 'like-count')).to have_content('0')
+        find(:test_id, 'like-submission').click
+        expect(find(:test_id, 'like-count')).to have_content('1')
+      end
+    end
+
+    it 'you can unlike another users submission' do
+      within(:test_project_submission, 1) do
+        find(:test_id, 'like-submission').click
+        expect(find(:test_id, 'like-count')).to have_content('1')
+        find(:test_id, 'like-submission').click
+        expect(find(:test_id, 'like-count')).to have_content('0')
+      end
+    end
+  end
+
+  context 'when liking your own submission' do
+    before do
+      Flipper.enable(:v2_project_submissions)
+      create(:project_submission, lesson:, user:)
+
+      sign_in(user)
+      visit lesson_path(lesson)
+    end
+
+    after do
+      Flipper.disable(:v2_project_submissions)
+    end
+
+    it 'you can like your submission' do
+      within(:test_project_submission, 1) do |submission|
+        expect(submission).to have_content(user.username)
+        expect(find(:test_id, 'like-count')).to have_content('0')
+        find(:test_id, 'like-submission').click
+        expect(find(:test_id, 'like-count')).to have_content('1')
+      end
+    end
+
+    it 'you can unlike your submission' do
+      within(:test_project_submission, 1) do |submission|
+        expect(submission).to have_content(user.username)
+        find(:test_id, 'like-submission').click
+        expect(find(:test_id, 'like-count')).to have_content('1')
+        find(:test_id, 'like-submission').click
+        expect(find(:test_id, 'like-count')).to have_content('0')
+      end
+    end
+  end
+end