kawsay

Nice one ! I do like to check Mastodon source code as reference too. For example, they've a lot of association on the Account model, and instead of bloating the model, they've defined a Account::Associations module that they include. It allow them to keep associations well organized, with a small comment on related associations. See: https://github.com/mastodon/mastodon/blob/main/app/models/concerns/account/associations.rb

Thanks a lot for this tutorial ! :)

How would you deal with N+1 ? Using :includes doesn't look quite effective (because of polymorphic associations ?).

Should we fine tune ActiveRecord::Associations::Preloader in that case ?

btw, here's a development demo of the application: https://open-calendar-dev.herokuapp.com/

Credentials are "foo@bar.com" / "foobar" (and will change at some point)

And here's the forge repository: https://gitlab.com/kawsay/open_calendar
(Anyone is welcome to join :) )

Hi there,

It's a great pleasure to use this gem which is really handy ! I started using Turbo recently on my application and still had troubles wrapping my head around... Idea here is not only to get things working, but having a better understanding of how Turbo works.

As per the documentation, it says "if you are using Hotwire, just wrap in a Turbo Frame", which is what I did:

# app/views/calendars/index.html.erb

    <%= turbo_frame_tag 'calendar' do %>
      <%= month_calendar(events: @events, attribute: :start_date, end_attribute: :end_date) do |date, events| %>
        <div class='d-flex justify-content-end'><%= date.day %></div>

        <div class='mb-5'>
          <%= render partial: 'events/calendar_event', collection: events, as: :event %>
        </div>
      <% end %>
    <% end %>

But I still got Processing by CalendarsController#index as HTML...

• Is that because I'm using simple_calendar on @events within a Calendar view ?

• Shouldn't 'Previous' and 'Next' links be aware of which turbo-frame to replace ?

• Will my instance variables be redefined in my CalendarController#index ? (I guess it'll, that's kind of a stupid question)

EDIT 1: Tried to set a format.turbo_stream inside CalendarController#index rendering a partial containing a turbo_frame_tag, without result

EDIT 2: Tried to add a data-turbo-action: replace to navigation links, without result

EDIT 3: When using <%= turbo_frame_tag 'calendar' do %> backend sends me the HTML portion of app/views/calendars/index.html.erb. When omitting that tag, backend sends me the whole page (include navbar and so on). Server logs does not indicate request is processed as TURBO_STREAM, but it looks to me that it is...

EDIT 4: Let's be more precise:

My Calendar#index action renders a view containing 3 parts: a sidebar, the actual calendar, and a modal template.

# app/views/calendars/index.html.erb

<div class='row'>
  <div class='col-2'>
    <%= render partial: 'calendars_sidebar', collection: @calendars, as: :calendar %>
    <hr class='text-white'>
    <%= render partial: 'form', locals: { calendar: @calendar} %>
  </div>

  <div class='col-10'>
    <%= render partial: 'calendars/calendar' %>
  </div>

  <div id='add-event-modal-placeholder'>
    <%= render partial: 'events/add_event_modal' %>
  </div>
</div>

The goal to me is that when a user clicks 'Previous' or 'Next', only the calendar is actualized. I used a turbo_frame_tag block to do this:

# app/views/calendars/_calendar.html.erb

<%= turbo_frame_tag 'calendar' do %>
  <%= month_calendar(events: @events, attribute: :start_date, end_attribute: :end_date) do |date, events| %>
    <div class='d-flex justify-content-end'><%= date.day %></div>

    <div class='mb-5'>
      <%= render partial: 'events/calendar_event', collection: events, as: :event %>
    </div>
  <% end %>
<% end %>

And set the corresponding controller's format (which I believe isn't required)

# app/controller/calendars_controller.rb

    respond_to do |format|
      format.turbo_stream
      format.html
    end

However, according to the logs, the page is processed as HTML:

Processing by CalendarsController#index as HTML                                                                                                                                               
  Parameters: {"start_date"=>"2022-03-07"} 
...

And here's the HTML returned (shorten):

<div class='row'>
  <div class='col-2'>
    <!-- CALENDAR SIDEBAR -->
  </div>

  <div class='col-10'>
    <turbo-frame id="calendar">
      <!-- CONTENT OF THE CALENDAR (each days + events) -->
    </turbo-frame>
  </div>

  <div id='add-event-modal-placeholder'>
    <!-- MODAL TEMPLATE OMITTED -->
   </div>
  </div>
</div>

Which does only contain the HTML corresponding to the index action (does not includes the navbar). Though, it contains the sidebar and the modal template...

Question is, how to replace only the calendar's turbo-frame instead of the whole #index action ?

As a begginner moving from the asset pipeline to Webpack lost me... You're demonstration brings a bit of clarity, thanks for that !

I'd really appreciate a tutorial on writing page specific ES6 Javascript, how to structure ES6 customs modules, how to use JS inside views, etc...

Thanks for all Chris !