Hello,
I’m working on a LiveView parent (EventLive) with two LiveComponents: TrackingComponent and TracingComponent. These components can be accessed independently via the main menu. The parent LiveView uses @live_action to determine which component to display, and switching between them works as expected. Here are some code from the the parent :
def handle_params(_params, _uri, socket) do
{:noreply,
socket
|> assign(display: socket.assigns.live_action)
|> assign(current_user: get_user(socket))
}
end
<.live_component module={TracingComponent} id="tracing" current_user={@current_user} :if={@display == :tracing}/>
<.live_component module={TrackingComponent} id="tracking" current_user={@current_user} :if={@display == :tracking}/>
TrackingComponent displays a paginated list of the latest events per product using an infinite scroll mechanism. New events are added in real-time using LiveView’s stream, and they are prepended to the list.
TracingComponent displays the full history of all events for all products. When accessed from the main menu, the user can search for events using a dedicated search input.
Additionally, TracingComponent can be accessed from each element in the TrackingComponent via a button, allowing the user to view the historical events for a specific product. In this case: The TracingComponent should hide the search input and display a “Return” button. When clicked, it should return the user to the exact page and scroll position they were on in the TrackingComponent.
To achieve this behavior, I could store the current page in the parent LiveView’s socket or pass it via URL params. I could also use a client-side hook to store and restore the scroll position. However, new events can arrive in real-time while the user is in TracingComponent, which can result in mismatched state (page and scroll position) when the user returns to TrackingComponent.
The database request and pagination logic for the events are implemented in TrackingComponent.update and cannot be moved to mount, as it relies on assigns passed from the parent LiveView to perform the request like the current user.
def update(assigns, socket) do
{:ok,
socket
|> assign(assigns)
|> assign(page: 1, per_page: 10)
|> paginate_events(1)
}
end
Before considering using a modal which is not the preferred solution due to UX requirements, is there a better approach to acheive it ?
Thanks for your help
