how to update LiveComponent from LiveView Phoenix

Question

I have a LV as..

page_live.ex

defmodule EverdeployWeb.PageLive do
  use EverdeployWeb, :live_view

  def mount(_params, session, socket) do
    if connected?(socket), do: send(self(), :add_branches)
    {:ok, assign(socket, current_user: session["current_user"], evercam_server_branches: [], loading: true)}
  end

  def handle_info(:add_branches, socket) do
    {:noreply, assign(socket, evercam_server_branches: Github.branches("evercam-server2"), loading: false)}
  end
end

and in html.leex I have

<section id="cd-timeline" class="cd-container">
  <%= if @loading, do: "loading", else: "" %> 
  <%= for branch <- @evercam_server_branches do %>
    <%= live_component @socket, Server, id: branch.sha, branch: branch %>
  <% end %>
</section>

In the Server LiveComponent I have

<div class="cd-timeline-block">
  <div class="cd-timeline-img cd-picture">
    loading
  </div>

  <div class="cd-timeline-content">
    <h2><%= @branch.branch_name %></h2>
    <p>loading</p>
    <a href="#0" class="cd-read-more">Deploy</a>
    <span class="cd-date">loading</span>
  </div>
</div>

As the LV will mount and send evercam_server_branches to :live_view I am only displaying the branch_name the other values will come from an other method.

Which is basically, Github.branch(repo, branch) But I am not sure where to call this method and update all values which are loading right now on Server and I will update them will values returned from the branch/2 method.

As In start when :live_view load. I just want to show a screen with a branch name and loading icons, and then after getting the branch/2 values update the Server.

I am looking for way , how I can call something here

defmodule Server do
  use Phoenix.LiveComponent

end

and update the Server values?

Derk153 Derk153 · Accepted Answer · 2020-06-24T08:06:59

You may call update function with timer in "mount", check:

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#connected?/1-examples

next, you'll need to update each component via send_update/2 https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#send_update/2

how to update LiveComponent from LiveView Phoenix

1 Answers