CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-5fullcalendarruby-on-rails-6turbolinks
v2lrf
v2lrf

Reputation: 331

Turbolinks 5.2.0 rendering components twice => well understand Full List of Events and fixe that effect

The issue encountered is when user want to go back to the previous view ⬅️ (View -1).

It happens when :

The result is the same.

If the previous page was displaying a calendar (full calendar.js) for instance (but all component build through JavaScript libraries ), this calendar will be build twice.

Lets that user move back to ➡️ View N and go back to View - 1 ⬅️ ... At the end he will have 3 calendars....

The issue is around the wrong Events called

turbolinks:before-cache Vs turbolinks:before-render

I share here the àpplication.jsfile I have 

require('@rails/ujs').start();
require('turbolinks').start();
require('@rails/activestorage').start();
require('channels');
console.log('not enter yet inside turbolink');

import 'bootstrap';
import 'controllers';
import 'stylesheets/application';
import { localStorageScript } from '../admin/localStorageScript';
import { directUploads } from '../admin/direct_uploads';

import { allComponentForAdminDesk } from '../admin/allComponentForAdminDesk';

// I have tryied to add that event to fight the issue 
// 👇🏼 that s not do the job
document.addEventListener('turbolinks:before-render', function () {
  Turbolinks.clearCache();
});

// I have tryied to add that event to fight the issue 
// 👇🏼 that s not do the job neither
document.addEventListener('turbolinks:before-cache', function () {
  Turbolinks.clearCache();
});

document.addEventListener('turbolinks:load', () => {
  Turbolinks.clearCache(); // 👈🏽 that s not do the job neither
  document.querySelector('body').style.display = 'none';
  localStorageScript();
  allComponentForAdminDesk();
  directUploads();
  console.log('inside turbolink');
});

just to share also some libraries version used inside the appthe package.json

 ...
 {
  "dependencies": {
    "@fancyapps/fancybox": "3.5.7",
    "@fullcalendar/bootstrap": "4.4.0",
    "@fullcalendar/core": "4.3.1",
    "@fullcalendar/daygrid": "4.3.0",
    "@fullcalendar/interaction": "4.3.0",
    "@fullcalendar/list": "4.3.0",
    "@fullcalendar/timegrid": "4.3.0",
    "@mapbox/mapbox-gl-geocoder": "^4.5.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.0.1",
    "select2": "^4.0.12",
    "stimulus": "^1.1.1",
    "swiper": "5.2.1",
    "tailwindcss": "^1.1.2",
    "turbolinks": "5.2.0",
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }

Does anyone have encountered that challenge too ? what is the best practice to use the full power of turbolinks 5?

Upvotes: 1

Views: 654

Answers (1)

v2lrf
v2lrf

Reputation: 331

proposition

I have finally opted for that solution. Here the thing, the issue concern specific action so specifics views.

To deal with <meta name="turbolinks-cache-control" content="no-cache">

Ad a helper

i have created an helper #TurbolinksApiHelper

module TurbolinksApiHelper

  def turbolinks_action_to_be_cleared
    [
      'edit',
      'new',
      'calendar',
      'stats' #... other keywords could be added here
    ]
  end
  
  def clear_cache(path_str)
    turbolinks_action_to_be_cleared.any? { |word| path_str.include?(word) }
  end
end

Call the helper from the header partial

<meta charset="utf-8">
<meta name="ROBOTS" content="NOODP">
<meta name="viewport" content="initial-scale=1">
<title>
  <%= content_for(:title) %> - <%= application_title %>
</title>
<% if clear_cache(request.env["PATH_INFO"]) %>
  <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

I'm pretty sure that there is a better way described inside the Turbolinks doc, but at this point I have never succeeded to deal that with the sum of JavaScript called inside my rails app.If someone has a better proposition I'm interested. Thanks.

Upvotes: 1

Related Questions