Add bounty filters

excid3 · Dec 12, 2023 · 5ebef72 · 5ebef72
1 parent 15f789d
commit 5ebef72
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 17 deletions.
diff --git a/app/controllers/bounties_controller.rb b/app/controllers/bounties_controller.rb
@@ -5,7 +5,9 @@ class BountiesController < ApplicationController
 
   # GET /bounties or /bounties.json
   def index
-    @pagy, @bounties = pagy(Bounty.sorted)
+    @bounties = Bounty.sorted
+    @filter, @bounties = params[:filter], @bounties.filtered(params[:filter]) if Bounty::STATUSES.include?(params[:filter])
+    @pagy, @bounties = pagy(@bounties)
   end
 
   # GET /bounties/1 or /bounties/1.json

diff --git a/app/models/bounty.rb b/app/models/bounty.rb
@@ -5,6 +5,7 @@ class Bounty < ApplicationRecord
   has_rich_text :description
 
   scope :sorted, -> { in_order_of(:status, STATUSES).order(created_at: :desc) }
+  scope :filtered, ->(status) { where(status: status) }
 
   validates :amount, presence: true, numericality: {greater_than: 0, only_integer: true}
   validates :description, presence: true

diff --git a/app/views/bounties/_bounty.html.erb b/app/views/bounties/_bounty.html.erb
@@ -1,24 +1,21 @@
 <div id="<%= dom_id bounty %>" class="mb-8 bg-white border shadow rounded-md pt-8 px-8">
   <div class="flex justify-between gap-8">
-    <div class="[overflow-wrap:anywhere]">
-      <div class="mb-4 text-2xl font-bold text-green-600">
-        <%= number_to_currency bounty.amount, precision: 0 %>
-      </div>
+    <h2 class="m-0"><%= link_to bounty.title, bounty_path(bounty), class: "no-underline font-bold tracking-tight" %></h2>
 
-      <h2 class="m-0"><%= link_to bounty.title, bounty_path(bounty) %></h2>
-      <div class="text-sm">Created by <%= bounty.user.name %></div>
-      <%= simple_format truncate(bounty.description.to_plain_text, length: 1000) %>
+    <div class="mb-4 text-2xl font-bold text-green-600">
+      <%= number_to_currency bounty.amount, precision: 0 %>
     </div>
   </div>
 
   <div class="bg-gray-50 -mx-8 px-8 py-4">
     <div class="flex items-center justify-between gap-8">
       <%= status_badge bounty.status %>
 
-      <%= link_to bounty.url, class: "no-underline flex items-center gap-1", target: :_blank do %>
+      <%= link_to bounty.url, class: "no-underline inline-flex gap-2 items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500", target: :_blank do %>
         View Project
-        <svg class="inline h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="inline w-5 h-5">
+          <path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z" clip-rule="evenodd" />
+          <path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z" clip-rule="evenodd" />
         </svg>
       <% end %>
     </div>

diff --git a/app/views/bounties/_hero.html.erb b/app/views/bounties/_hero.html.erb
@@ -1,8 +1,8 @@
-<div class="mx-auto max-w-7xl py-8 sm:px-6 lg:px-8">
+<div class="mx-auto max-w-7xl py-4">
   <div class="relative isolate overflow-hidden bg-gray-900 px-6 py-8 text-center shadow-2xl sm:rounded-3xl sm:px-16">
-    <h2 class="mt-4 mx-auto max-w-2xl text-3xl font-bold tracking-tight text-white sm:text-4xl">Small projects for Junior Developers</h2>
-    <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-300">Help Junior developers get hired by sharing small projects they can work on to build their resume with paid work.</p>
-    <div class="mt-10 flex items-center justify-center gap-x-6">
+    <h2 class="my-4 mx-auto max-w-2xl text-3xl font-bold tracking-tight text-white sm:text-4xl">Small projects for Junior Developers</h2>
+    <p class="mx-auto mt-4 max-w-xl text-lg leading-8 text-gray-300">Help Junior developers get hired by sharing small projects they can work on to build their resume with paid work.</p>
+    <div class="mt-4 flex items-center justify-center gap-x-6">
       <%= link_to "Post a bounty", new_user_registration_path, class: "no-underline rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" %>
       <a href="<%= how_it_works_path %>" class="text-sm font-semibold leading-6 text-white">How it works <span aria-hidden="true">→</span></a>
     </div>

diff --git a/app/views/bounties/index.html.erb b/app/views/bounties/index.html.erb
@@ -2,10 +2,18 @@
   <%= render 'hero' %>
 <% end %>
 
-<h2>All Bounties</h2>
+<div class="my-8 flex gap-2 items-center justify-between">
+  <h2 class="m-0"><%= (@filter || "All").titleize %> Bounties</h2>
+  <nav class="flex gap-2">
+    <%= link_to "All", bounties_path, class: class_names("font-bold" => @filter.blank?) %>
+    <% Bounty::STATUSES.each do |status| %>
+      <%= link_to status.titleize, bounties_path(filter: status), class: class_names("font-bold" => status == @filter) %>
+    <% end %>
+  </nav>
+</div>
 
 <div id="bounties">
   <%= render @bounties %>
 </div>
 
-<%== pagy_nav(@pagy).html_safe %>
+<%== pagy_nav(@pagy).html_safe %>