Add page with exercise approaches (#6871)

* Add page with exercise approaches

* Change links

* Style generic_exercises/approaches

---------

Co-authored-by: dem4ron <demaaron88@gmail.com>

app/controllers/generic_exercises_controller.rb

@@ -1,11 +1,8 @@
 class GenericExercisesController < ApplicationController
-  before_action :use_exercise!, only: %i[show start edit complete tooltip no_test_runner]
-
-  skip_before_action :authenticate_user!, only: %i[index show tooltip]
-  skip_before_action :verify_authenticity_token, only: :start
+  before_action :use_exercise!, only: %i[show approaches]
+  skip_before_action :authenticate_user!, only: %i[show approaches]
 
   def show
-    @ps_data = @exercise.generic_exercise
     @track_variants = Exercise.available.where(
       slug: params[:id],
       track_id: Track.active.select(:id)
@@ -34,13 +31,24 @@ def show
     end
   end
 
+  def approaches
+    @approaches = Exercise::Approach.includes(:exercise, :track).joins(:exercise).
+      where(exercise: { slug: params[:id] }).
+      group_by(&:slug).
+      to_h.
+      transform_values { |approaches| approaches.sort_by { |a| a.track.title } }.
+      sort
+  end
+
   private
   def use_exercise!
     begin
       @exercise = Track.find_by(slug: 'elixir').exercises.find(params[:id])
     rescue ActiveRecord::RecordNotFound
       @exercise = Exercise.find(params[:id])
     end
+
+    @ps_data = @exercise.generic_exercise
   rescue ActiveRecord::RecordNotFound
     render_404
   end

app/views/challenges/implementation_status.html.haml

@@ -43,7 +43,7 @@
             - @featured_exercises.each.with_index do |featured_exercises, idx|
               %th.bg-backgroundColorD.align-top{ class: 'h-[100px]' }
                 .text-textColor7.mb-4 W#{idx + 1}
-                = link_to featured_exercises[:slug], generic_exercise_path(featured_exercises[:slug])
+                = link_to featured_exercises[:slug], approaches_generic_exercise_path(featured_exercises[:slug])
         %tbody
           - @tracks.each do |track|
             %tr

app/views/generic_exercises/approaches.html.haml

@@ -0,0 +1,29 @@
+- content_for :meta_title, "Explore different ways to solve #{@ps_data.title} on Exercism"
+- content_for :meta_description, "Explore the different ways to solve #{@ps_data.title}."
+- content_for :canonical_url, approaches_generic_exercise_url(@ps_data.slug)
+- require_stylesheet "track"
+
+#page-generic-exercise
+  .header.mb-8.py-8
+    .lg-container.flex.items-center.relative
+      = exercise_icon @exercise, css_class: "self-start md:self-center w-[68px] h-[68px] md:w-[118px] md:h-[118px] mr-12 md:mr-24"
+      .flex-grow
+        %h1.text-h1.md:mb-8
+          #{@exercise.title} approaches
+
+        .p
+          = link_to "← Back to the exercise", generic_exercise_path(@exercise.slug), class: "text-prominentLinkColor"
+
+  .lg-container
+    .flex.flex-col.md:flex-row.gap-48
+      .lhs.flex-grow
+        %section.approaches
+          - @approaches.each do |(slug, track_approaches)|
+            .border-1.px-8.py-4.rounded-8.mb-8.border-borderColor5
+              %h4.text-h4.mb-8.font-mono= slug
+              %ul.mb-8.flex.gap-4.flex-wrap
+                - track_approaches.each do |approach|
+                  %li
+                    = link_to track_exercise_approach_path(approach.track, approach.exercise, approach), class: 'flex items-center border-1 border-prominentLinkColor rounded-16 w-fit py-4 px-8' do
+                      = image_tag approach.track.icon_url, height: '24px', width: '24px', class: 'mr-4'
+                      .text-h6= approach.track.title

config/routes.rb

@@ -231,7 +231,11 @@
       post :join
     end
   end
-  resources :exercises, only: %i[show], controller: "generic_exercises", as: :generic_exercises
+  resources :exercises, only: %i[show], controller: "generic_exercises", as: :generic_exercises do
+    member do
+      get :approaches
+    end
+  end
 
   resource :user_onboarding, only: %i[show create], controller: "user_onboarding"
   resource :journey, only: [:show], controller: "journey" do