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,21 +1,24 @@
-- link = nil
+- cache site do
-- if site.not_published_yet?
+  - link = nil
-  - message = t('.not_published_yet')
+  - if site.not_published_yet?
-- elsif site.awaiting_publication?
+    - message = t('.not_published_yet')
-  - message = t('.awaiting_publication')
+  - elsif site.awaiting_publication?
-- elsif site.building?
+    - message = t('.awaiting_publication')
-  - if site.average_publication_time_calculable?
+  - elsif site.building?
-    - average_building_time = site.average_publication_time
+    - if site.average_publication_time_calculable?
-  - elsif !site.similar_sites?
+      - average_building_time = site.average_publication_time
-    - average_building_time = 60
+    - elsif !site.similar_sites?
+      - average_building_time = 60
+    - else
+      - average_building_time = site.average_publication_time_for_similar_sites
+
+    - average_publication_time_human = distance_of_time_in_words average_building_time
+    - message = t('.building', average_time: average_publication_time_human, seconds: average_building_time)
   - else
-    - average_building_time = site.average_publication_time_for_similar_sites
+    - message = t('.available')
+    - link = true
 
-  - average_publication_time_human = distance_of_time_in_words average_building_time
+  -# TODO: Calcular cada cuanto sería óptimo recargar
-  - message = t('.building', average_time: average_publication_time_human, seconds: average_building_time)
+  %div{ 'hx-get': site_status_path(site), 'hx-trigger': 'every 10s', 'hx-swap': 'outerHTML' }
-- else
+    = render 'bootstrap/alert' do
-  - message = t('.available')
+      = link_to_if link, message.html_safe, site_build_stats_path(site), class: 'alert-link'
-  - link = true
-
-= 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"