Merge pull request #7186 from tchak/remove-ds-page-update

refactor(js): get rid of ds:page:update

app/javascript/components/MapEditor/hooks.ts

@@ -37,9 +37,7 @@ export function useFeatureCollection(
         type: 'FeatureCollection',
         features: callback(features)
       }));
-      ajax({ url, type: 'GET' })
-        .then(() => fire(document, 'ds:page:update'))
-        .catch(() => null);
+      ajax({ url, type: 'GET' }).catch(() => null);
     },
     [url, setFeatureCollection]
   );

app/javascript/controllers/application_controller.ts

@@ -0,0 +1,25 @@
+import { Controller } from '@hotwired/stimulus';
+import { debounce } from '@utils';
+
+export type Detail = Record<string, unknown>;
+
+export class ApplicationController extends Controller {
+  #debounced = new Map<() => void, () => void>();
+
+  protected debounce(fn: () => void, interval: number): void {
+    let debounced = this.#debounced.get(fn);
+    if (!debounced) {
+      debounced = debounce(fn.bind(this), interval);
+      this.#debounced.set(fn, debounced);
+    }
+    debounced();
+  }
+
+  protected globalDispatch(type: string, detail: Detail): void {
+    this.dispatch(type, {
+      detail,
+      prefix: '',
+      target: document.documentElement
+    });
+  }
+}

app/javascript/controllers/geo_area_controller.tsx

@@ -0,0 +1,31 @@
+import { ApplicationController } from './application_controller';
+
+export class GeoAreaController extends ApplicationController {
+  static values = {
+    id: Number
+  };
+  static targets = ['description'];
+
+  declare readonly idValue: number;
+  declare readonly descriptionTarget: HTMLInputElement;
+
+  onFocus() {
+    this.globalDispatch('map:feature:focus', { id: this.idValue });
+  }
+
+  onClick(event: MouseEvent) {
+    event.preventDefault();
+    this.globalDispatch('map:feature:focus', { id: this.idValue });
+  }
+
+  onInput() {
+    this.debounce(this.updateDescription, 200);
+  }
+
+  private updateDescription(): void {
+    this.globalDispatch('map:feature:update', {
+      id: this.idValue,
+      properties: { description: this.descriptionTarget.value.trim() }
+    });
+  }
+}

app/javascript/controllers/turbo_event_controller.ts

@@ -1,10 +1,9 @@
-import { Controller } from '@hotwired/stimulus';
 import invariant from 'tiny-invariant';
 import { z } from 'zod';
 
-type Detail = Record<string, unknown>;
+import { ApplicationController, Detail } from './application_controller';
 
-export class TurboEventController extends Controller {
+export class TurboEventController extends ApplicationController {
   static values = {
     type: String,
     detail: Object
@@ -17,14 +16,6 @@ export class TurboEventController extends Controller {
     this.globalDispatch(this.typeValue, this.detailValue);
     this.element.remove();
   }
-
-  private globalDispatch(type: string, detail: Detail): void {
-    this.dispatch(type, {
-      detail,
-      prefix: '',
-      target: document.documentElement
-    });
-  }
 }
 
 const MutationAction = z.enum(['show', 'hide', 'focus']);

app/javascript/new_design/champs/carte.js

@@ -1,40 +0,0 @@
-import { delegate, fire, debounce } from '@utils';
-
-const inputHandlers = new Map();
-
-addEventListener('ds:page:update', () => {
-  const inputs = document.querySelectorAll('.areas input[data-geo-area]');
-
-  for (const input of inputs) {
-    input.addEventListener('focus', (event) => {
-      const id = parseInt(event.target.dataset.geoArea);
-      fire(document, 'map:feature:focus', { id });
-    });
-  }
-});
-
-delegate('click', '.areas a[data-geo-area]', (event) => {
-  event.preventDefault();
-  const id = parseInt(event.target.dataset.geoArea);
-  fire(document, 'map:feature:focus', { id });
-});
-
-delegate('input', '.areas input[data-geo-area]', (event) => {
-  const id = parseInt(event.target.dataset.geoArea);
-
-  let handler = inputHandlers.get(id);
-  if (!handler) {
-    handler = debounce(() => {
-      const input = document.querySelector(`input[data-geo-area="${id}"]`);
-      if (input) {
-        fire(document, 'map:feature:update', {
-          id,
-          properties: { description: input.value.trim() }
-        });
-      }
-    }, 200);
-    inputHandlers.set(id, handler);
-  }
-
-  handler();
-});

app/javascript/new_design/messagerie.js

@@ -54,5 +54,5 @@ function saveMessageContent() {
   }
 }
 
-addEventListener('ds:page:update', scrollMessagerie);
-addEventListener('ds:page:update', saveMessageContent);
+addEventListener('DOMContentLoaded', scrollMessagerie);
+addEventListener('DOMContentLoaded', saveMessageContent);

app/javascript/new_design/procedure-context.js

@@ -14,7 +14,7 @@ function expandProcedureDescription() {
   descBody.classList.remove('read-more-collapsed');
 }
 
-addEventListener('ds:page:update', updateReadMoreVisibility);
+addEventListener('DOMContentLoaded', updateReadMoreVisibility);
 addEventListener('resize', updateReadMoreVisibility);
 
 delegate('click', '.read-more-button', expandProcedureDescription);

app/javascript/new_design/support.js

@@ -101,7 +101,7 @@ class ButtonExpand {
 
 if (document.querySelector('#contact-form')) {
   window.addEventListener(
-    'ds:page:update',
+    'DOMContentLoaded',
     function () {
       var buttons = document.querySelectorAll(
         'button[aria-expanded][aria-controls], button.button-without-hint'

app/javascript/packs/application.js

@@ -5,7 +5,6 @@ import 'whatwg-fetch'; // window.fetch polyfill
 import { Application } from '@hotwired/stimulus';
 import { Turbo } from '@hotwired/turbo-rails';
 
-import '../shared/page-update-event';
 import '../shared/activestorage/ujs';
 import '../shared/remote-poller';
 import '../shared/safari-11-file-xhr-workaround';
@@ -19,6 +18,7 @@ import {
   registerComponents
 } from '../controllers/react_controller';
 import { TurboEventController } from '../controllers/turbo_event_controller';
+import { GeoAreaController } from '../controllers/geo_area_controller';
 
 import '../new_design/dropdown';
 import '../new_design/form-validation';
@@ -30,7 +30,6 @@ import '../new_design/messagerie';
 import '../new_design/dossiers/auto-save';
 import '../new_design/dossiers/auto-upload';
 
-import '../new_design/champs/carte';
 import '../new_design/champs/linked-drop-down-list';
 import '../new_design/champs/repetition';
 import '../new_design/champs/drop-down-list';
@@ -96,6 +95,7 @@ Turbo.session.drive = false;
 const Stimulus = Application.start();
 Stimulus.register('react', ReactController);
 Stimulus.register('turbo-event', TurboEventController);
+Stimulus.register('geo-area', GeoAreaController);
 
 // Expose globals
 window.DS = window.DS || DS;

app/javascript/shared/franceconnect.js

@@ -20,7 +20,7 @@ function init() {
   }
 }
 
-addEventListener('ds:page:update', init);
+addEventListener('DOMContentLoaded', init);
 
 function toggleElement(event) {
   event.preventDefault();

app/javascript/shared/page-update-event.js

@@ -1,9 +0,0 @@
-import { fire } from '@utils';
-
-addEventListener('DOMContentLoaded', function () {
-  fire(document, 'ds:page:update');
-});
-
-addEventListener('ajax:success', function () {
-  fire(document, 'ds:page:update');
-});

app/views/shared/champs/carte/_geo_area.html.haml

@@ -1,10 +1,10 @@
-%li{ class: editing ? 'mb-1' : 'flex column mb-2' }
+%li{ class: editing ? 'mb-1' : 'flex column mb-2', data: { controller: 'geo-area', geo_area_id_value: geo_area.id } }
   - if editing
-    = link_to '#', data: { geo_area: geo_area.id } do
+    = link_to '#', data: { action: 'geo-area#onClick' } do
       = geo_area_label(geo_area)
-    = text_field_tag :description, geo_area.description, data: { geo_area: geo_area.id }, placeholder: 'Description', class: 'no-margin'
+    = text_field_tag :description, geo_area.description, data: { action: 'focus->geo-area#onFocus input->geo-area#onInput', geo_area_target: 'description' }, placeholder: 'Description', class: 'no-margin'
   - else
-    = link_to '#', data: { geo_area: geo_area.id } do
+    = link_to '#', data: { action: 'geo-area#onClick' } do
       = geo_area_label(geo_area)
     - if geo_area.description.present?
       %span