handle toggle enablement reactivity

active_admin.js

// vendor/assets/javascripts/active_admin.js
//= require active_admin/toggles_change_handling

toggles_change_handling.js

// app/assets/javascripts/active_admin/toggles_change_handling.js
$(() => {
  console.log('testing')

  const channel = new BroadcastChannel('toggles_change');

  channel.addEventListener('message', () => {});

  const snakeToCamel = str =>
    str.toLowerCase().replace(/([-_][a-z])/g, (group) =>
      group
        .toUpperCase()
        .replace('-', '')
        .replace('_', '')
  );

  const booleanOrNumber = (name, value) => {
    const isSelect = document.querySelector(`[name="${name}"]`)?.matches('select');
    const intValue = parseInt(value);

    return isSelect ? intValue : Boolean(intValue);
  }

  $('#edit_account').on('submit', (e) => {
    const data = $(e.target)
      .serializeArray()
      .filter(({name}) => name.includes('[toggle_'))
      .map(({name, value}) => ({ name, value: booleanOrNumber(name, value) }))
      .map(({name, value}) => ({ name: snakeToCamel(name.replace(/account|[^a-z_]/gi, '')), value}))
      .reduce((curr, {name, value}) => ({...curr, ...{ [name]: value } }), {});

    console.log(JSON.stringify(data));

    channel.postMessage({ type: 'allToggles', toggles: data});
  });

  $('.row-toggle').on('click', (e) => {
    const { toggle: toggleName } = $(e.currentTarget).data();

    if ($(e.target).hasClass('active')) {
      channel.postMessage({
        type: 'updateToggle',
        // put reverse value before target transition end and set new state
        toggles: { [snakeToCamel(toggleName)]: false },
      });
    } else {
      channel.postMessage({
        type: 'updateToggle',
        // put reverse value before target transition end and set new state
        toggles: { [snakeToCamel(toggleName)]: true },
      });
    }
  })
});

useHandleToggleChange.js

import { useStore } from '@/store';

const channel = new BroadcastChannel('toggles_change');

// TODO: check if current opened account is same from admin
channel.addEventListener('message', (e) => {
  switch(e.data.type) {
    case 'allToggles':
      store.dispatch('featureFlags/setFeatureFlags', { toggles: e.data.toggles });
    case 'updateToggle':
      console.log('update toggle', e.data.toggles);
      const toggles = store.getters['featureFlags/getToggles'];
      store.dispatch('featureFlags/setFeatureFlags', { toggles: { ...toggles, ...e.data.toggles } });
  }
});