0

iam working on a task that make appointments that will show on calendar in which the appointment's position be calculated by its start_time and end_time, iam using Rails7 + TurboStream to sync (real time) the appointment(create/update/destroy) between its participants.

Here is the problem: participants (users) live in different timezones so that the position of the appointment on each user's calendar are different, for example, i setup a appointment at my timezone at 8AM->10AM, my partner will see the appointment on 8PM->10PM due to his timezone. Now if the appointment data in json format then which some code in js (on frontend) we could handle this case. But how could we do it by server rendering effectively ? Hotwire style will sync HTML directly to clients, hence i have to broadcast the appointment's html in variant timezones to all participants.

  # appointment view on calendar
  <div id="appointment<%= appointment.id %><%= current_user.timezone %>"
       class="absolute top- left-" # <-- base on timezone

  # update appointment success -> sync
  def update
    # ...
    if @appointment.save
      # ....
      @appointment.participant_timezones.each do |tz|
        Turbo::StreamsChannel.broadcast_replace_to(
          @appointment,
          target: ...,
          partial: ..., # this will be render base on user timezone       
          locals: {timezone: tz}
        )
      end
  end

As you can see, in my current solution, i have to sync multiple turbo frames (for each participant's timezone) and i also need to sync/cache timezones, i think it is not an effective way.

Is there any way to intercept turbo js so that i just broadcast only one turbo frame and each client js will manipulate it before do Dom actions ?

                                                    -> user1: turbo.js update css position -> dom replace
                                                    |
one update appointment -> broadcast updated frame ->|->user2:  ................................
                                                    |
                                                    -> ...
Lam Phan
  • 3,405
  • 2
  • 9
  • 20
  • Typically the solution to this problem is to just have the server deal with UTC and output global times. For example ``. That lets you cache the response and avoid the complexity on the server side. The client side is then responsible for replacing the text with a localized respresentation. Not completely sure how to apply this approach to turboframes though. – max Mar 30 '22 at 18:14
  • thanks @max, i actually did it, from services to db, time always in UTC time zone, from controllers , presenters and views time in user current time zone. Today i came up with a cheating way that server side will always render with UTC time zone but the view is `hidden` and stick to a stimulus controller which will manipulate the view before remove css `hidden` and show the view at the position it should be show, however it only work for `create/destroy` since the dom actions always be executed before that so i still stuck in case `update`. – Lam Phan Mar 31 '22 at 16:26

0 Answers0