feat: in case of a super long translating job, make the user wait (+ polling)

Author: did

app/controllers/maglev/api/page_translations_controller.rb

@@ -3,12 +3,24 @@
 module Maglev
   module Api
     class PageTranslationsController < ::Maglev::ApiController
+      before_action :set_page
+
+      def index
+        translations = @page.translations_for(:sections, params[:locale])
+        render json: { translated: translations&.size.to_i > 0 }
+      end
+
       def create
-        @page = translate_page(resources.find(params[:page_id]))
+        translate_page(@page)
+        head :ok
       end
 
       private
 
+      def set_page
+        @page ||= resources.find(params[:page_id])
+      end
+
       def translate_page(page)
         services.translate_page.call(
           page: page,

app/frontend/editor/components/translate-dialog/index.vue

@@ -39,7 +39,7 @@
 export default {
   name: 'TranslateDialog',
   data() {
-    return { submitState: 'default' }
+    return { submitState: 'default', pollingSubmission: false, pollingInterval: null }
   },
   computed: {
     localeName() {
@@ -49,17 +49,45 @@ export default {
       return this.$t(`support.locales.${this.currentDefaultLocale}`)
     }
   },
+  unmounted() {
+    if (this.pollingInterval) clearInterval(this.pollingInterval)
+  },
   methods: {
     translate() {
       this.submitState = 'inProgress'
       this.services.page.translate(this.currentPage.id, this.currentLocale)
-      .then(() => {        
-         // Force a refresh
-        this.$nextTick(() => { this.$router.go(0) })
+      .then(() => {
+        this.pollingSubmission = true
+        // Force a refresh
+        // this.$nextTick(() => { this.$router.go(0) })
       })
       .catch(() => {
         this.submitState = 'fail'        
       })
+    },
+    isTranslated() {
+      this.services.page.isTranslated(this.currentPage.id, this.currentLocale)
+      .then((translated) => {
+        if (translated) {
+          this.pollingSubmission = false
+          // Force a refresh
+          this.$nextTick(() => { this.$router.go(0) })
+        }
+      })
+      .catch(() => {
+        this.pollingSubmission = false
+        this.submitState = 'fail'
+      })
+    }
+  },
+  watch: {
+    pollingSubmission(newValue, oldValue) {
+      if (!newValue) {
+        if (this.pollingInterval) clearInterval(this.pollingInterval)
+        return
+      }
+
+      this.pollingInterval = setInterval(() => this.isTranslated(), 1000)
     }
   }
 }

app/frontend/editor/services/page.js

@@ -97,6 +97,11 @@ export default (api) => ({
     return api.post(`/pages/${id}/translations`, { locale }).then(({ data }) => data)
   },
 
+  isTranslated: (id, locale) => {
+    console.log('[PageService] Checking if page is translated #', id, locale)
+    return api.get(`/pages/${id}/translations`, { params: { locale } }).then(({ data }) => data.translated)
+  },
+
   destroy: (id) => {
     console.log('[PageService] Destroying page #', id)
     return api.destroy(`/pages/${id}`)

config/routes.rb

@@ -9,7 +9,7 @@
       resource :site, only: :show
       resources :pages do
         resources :clones, controller: :page_clones, only: :create
-        resources :translations, controller: :page_translations, only: %i[create]
+        resources :translations, controller: :page_translations, only: %i[index create]
       end
       resources :assets
       resource :publication, only: %i[show create]