feat: recargar automáticamente el estado de publicación #13611

app/controllers/sites_controller.rb

@@ -15,6 +15,13 @@ class SitesController < ApplicationController
     fresh_when @sites
   end
 
+  # Genera la caja del estado para HTMX
+  def status
+    authorize site
+
+    render('sites/status', layout: false) if stale? site
+  end
+
   # No tenemos propiedades de un sitio aún, así que vamos al listado de
   # artículos
   def show

app/javascript/packs/application.js

@@ -33,3 +33,5 @@ import 'chartkick/chart.js'
 Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
+
+window.htmx = require('htmx.org/dist/htmx')

app/views/sites/_status.haml

@@ -1,3 +1,4 @@
+- cache site do
   - link = nil
   - if site.not_published_yet?
     - message = t('.not_published_yet')
@@ -17,5 +18,7 @@
     - message = t('.available')
     - link = true
 
+  -# TODO: Calcular cada cuanto sería óptimo recargar
+  %div{ 'hx-get': site_status_path(site), 'hx-trigger': 'every 10s', 'hx-swap': 'outerHTML' }
     = render 'bootstrap/alert' do
       = link_to_if link, message.html_safe, site_build_stats_path(site), class: 'alert-link'

app/views/sites/status.haml

@@ -0,0 +1 @@
+= render 'sites/status', site: @site

config/locales/en.yml

@@ -389,7 +389,7 @@ en:
     static_file_migration: 'File migration'
     find_and_replace: 'Search and replace'
     status:
-      building: "Your site is building, refresh this page in <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
+      building: "Your site is building, it will be ready in <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
       not_published_yet: "Your site is being published for the first time, please wait up to 1 minute..."
       available: "Your site is available! Click here to find all the different ways to visit it."
       awaiting_publication: "There are unpublished changes.  Click the button below and wait a moment to find them on your site."

config/locales/es.yml

@@ -394,7 +394,7 @@ es:
     static_file_migration: 'Migración de archivos'
     find_and_replace: 'Búsqueda y reemplazo'
     status:
-      building: "Tu sitio se está publicando, recargá esta página en <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
+      building: "Tu sitio se está publicando, estará listo en <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
       not_published_yet: "Tu sitio se está publicando por primera vez, por favor espera hasta un minuto..."
       available: "¡Tu sitio está disponible!  Cliqueá aquí para encontrar todas las formas en que podés visitarlo."
       awaiting_publication: "Hay cambios sin publicar, cliqueá el botón debajo y espera un momento para encontrarlos en tu sitio."

config/routes.rb

@@ -37,6 +37,8 @@ Rails.application.routes.draw do
     get 'pull', to: 'sites#fetch'
     post 'pull', to: 'sites#merge'
 
+    get 'status', to: 'sites#status'
+
     # Gestionar usuaries
     get 'usuaries/invite', to: 'usuaries#invite'
     post 'usuaries/invite', to: 'usuaries#send_invitations'

package.json

@@ -34,6 +34,7 @@
     "zepto": "^1.2.0"
   },
   "devDependencies": {
-    "@types/rails__activestorage": "^6.0.0"
+    "@types/rails__activestorage": "^6.0.0",
+    "htmx.org": "^1.9.11"
   }
 }

yarn.lock

@@ -4548,6 +4548,11 @@ html-entities@^1.3.1:
   resolved "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz"
   integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
 
+htmx.org@^1.9.11:
+  version "1.9.11"
+  resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-1.9.11.tgz#00192041ee682d6ca7146d0fbd901169ffe72d87"
+  integrity sha512-WlVuICn8dfNOOgYmdYzYG8zSnP3++AdHkMHooQAzGZObWpVXYathpz/I37ycF4zikR6YduzfCvEcxk20JkIUsw==
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz"