Chore: Display project submissions list using Hotwire

app/components/project_submissions/item_component.html.erb

@@ -0,0 +1,21 @@
+<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"><%= item.votes_for.size %></span>
+      <%= inline_svg_tag 'icons/heart.svg', class: 'h-5 w-5', aria: true, title: 'heart', desc: 'heart icon' %>
+    </button>
+
+    <p class="truncate max-w-xs lg:max-w-lg font-medium text-lg break-words"><%= item.user.username %></p>
+  </div>
+
+  <div class="flex flex-col md:flex-row md:items-center">
+    <%= link_to 'View code', item.repo_url, target: '_blank', rel: 'noreferrer', class: 'button button--gray font-semibold md:mr-4', data: { test_id: 'view-code-btn' } %>
+    <%= link_to 'Live preview', item.live_preview_url, target: '_blank', rel: 'noreferrer', class: 'button button--gray font-semibold mt-5 md:mt-0 md:mr-4', data: { test_id: 'live-preview-btn' } %>
+
+    <button aria-label="Report submission" data-test-id="flag-btn" class="submissions-flag text-gray-300 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300 hint--top-left">
+      <%= inline_svg_tag 'icons/flag.svg', class: 'h-4 w-4', aria: true, title: 'flag', desc: 'flag icon' %>
+    </button>
+  </div>
+</div>

app/components/project_submissions/item_component.rb

@@ -0,0 +1,11 @@
+module ProjectSubmissions
+  class ItemComponent < ApplicationComponent
+    def initialize(item:)
+      @item = item
+    end
+
+    private
+
+    attr_reader :item
+  end
+end

app/controllers/lessons/v2_project_submissions_controller.rb

@@ -0,0 +1,27 @@
+module Lessons
+  class V2ProjectSubmissionsController < ApplicationController
+    before_action :authenticate_user!
+    before_action :set_lesson
+
+    def index
+      @pagy, @project_submissions = pagy(public_project_submissions, items: params.fetch(:limit, 15))
+    end
+
+    private
+
+    def public_project_submissions
+      project_submissions_query.public_submissions
+    end
+
+    def project_submissions_query
+      @project_submissions_query ||= ::LessonProjectSubmissionsQuery.new(
+        lesson: @lesson,
+        current_user:
+      )
+    end
+
+    def set_lesson
+      @lesson = Lesson.find(params[:lesson_id])
+    end
+  end
+end

app/views/lessons/_project_submissions.html.erb

@@ -0,0 +1,26 @@
+<% if Feature.enabled?(:v2_project_submissions, current_user) %>
+  <%= turbo_frame_tag 'submissions-list', src: lesson_v2_project_submissions_path(lesson, limit: 10)  do %>
+    <div class="flex justify-center h-">
+      <%= inline_svg_tag 'icons/spinner.svg', class: 'animate-spin h-12 w-12 text-gray-400 dark:text-gray-300', aria: true, title: 'dismiss', desc: 'dismiss icon' %>
+    </div>
+  <% end %>
+
+  <div>
+    <p class="text-center py-6 px-0">
+      <span> Showing <%= limit %> most liked submissions -
+      <%= link_to 'View full list of solutions', lesson_v2_project_submissions_path(lesson), class: 'text-gold', data: { test_id: 'view-all-projects-link' } %>
+    </p>
+  </div>
+<% else %>
+  <%= react_component(
+        'project-submissions/index',
+        {
+          userId: current_user.id,
+          course: lesson.course.as_json,
+          lesson: lesson.as_json,
+          submissions: project_submissions,
+          allSubmissionsPath: lesson_project_submissions_path(lesson.id),
+          userSubmission: user_submission
+        }
+      ) %>
+<% end %>

app/views/lessons/show.html.erb

@@ -24,20 +24,15 @@
 
 <div class="bg-gray-100 dark:bg-gray-800/30 text-center">
   <div class="page-container">
-
     <%= render CardComponent.new do |card| %>
       <% card.with_body do %>
         <% if user_signed_in? && @lesson.accepts_submission? %>
-          <%= react_component(
-                'project-submissions/index',
-                {
-                  userId: current_user.id,
-                  course: @lesson.course.as_json,
-                  lesson: @lesson.as_json,
-                  submissions: @project_submissions,
-                  allSubmissionsPath: lesson_project_submissions_path(@lesson.id),
-                  userSubmission: @user_submission
-                }
+          <%= render(
+                'lessons/project_submissions',
+                  lesson: @lesson,
+                  project_submissions: @project_submissions,
+                  user_submission: @user_submission,
+                  limit: 10
               ) %>
         <% elsif @lesson.accepts_submission? %>
           <p class="mb-7">

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

@@ -0,0 +1,32 @@
+<%= title(@lesson.display_title) %>
+
+<div class="page-container">
+   <div>
+    <%= link_to lesson_path(@lesson, anchor: 'solutions'), class: 'inline-flex items-center pb-10 text-gray-600 text-base hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 gap-2' do %>
+      <%= inline_svg_tag 'icons/arrow-left-circle.svg', aria: true, title: 'Back to lesson icon' %>
+      Back to lesson
+    <% end %>
+  </div>
+
+<%= turbo_frame_tag 'submissions-list' do %>
+  <div class="mb-8 text-left">
+
+    <header class="flex flex-col space-y-6 justify-between items-center pb-8 text-center md:space-y-0 md:text-left md:flex-row">
+      <div class="flex md:flex-start flex-col space-y-1">
+        <h3 class="text-4xl font-medium" id="solutions">Solutions:</h3>
+        <h4 data-test-id="course-lesson-title" class="text-xl text-gray-500 dark:text-gray-400">
+          <%= @lesson.course.title %> : (<%= @lesson.title %>)
+        </h4>
+      </div>
+    </header>
+
+    <div data-test-id="submissions-list">
+      <%= render ProjectSubmissions::ItemComponent.with_collection(@project_submissions) %>
+    </div>
+  </div>
+<% end %>
+
+<div class="text-center overflow-x-auto">
+    <%== pagy_nav(@pagy) %>
+  </div>
+</div>

config/routes.rb

@@ -90,6 +90,7 @@
 
   resources :lessons, only: :show do
     resources :project_submissions, only: %i[index], controller: 'lessons/project_submissions'
+    resources :v2_project_submissions, only: %i[index], controller: 'lessons/v2_project_submissions'
     resource :completion, only: %i[create destroy], controller: 'lessons/completions'
   end