genserver survive refresh

Author: kluvin

lib/pling_web/live/room_live.ex

@@ -11,14 +11,7 @@ defmodule PlingWeb.RoomLive do
         %{"user_id" => user_id},
         socket
       ) do
-    socket =
-      assign(socket,
-        room_code: room_code,
-        user_id: user_id,
-        show_playlist: false,
-        game_mode: game_mode,
-        current_track: nil
-      )
+    socket = init_assigns(socket, room_code, game_mode, user_id)
 
     if connected?(socket) do
       {:ok, state} = Rooms.join_room(room_code, user_id, self(), game_mode)
@@ -30,7 +23,9 @@ defmodule PlingWeb.RoomLive do
        |> assign(state)
        |> maybe_load_track(state.selection.track)}
     else
-      {:ok, assign(socket, Rooms.get_state(room_code))}
+      {:ok,
+       socket
+       |> assign(Rooms.get_state(room_code))}
     end
   end
 
@@ -39,6 +34,18 @@ defmodule PlingWeb.RoomLive do
     {:ok, redirect(socket, to: ~p"/login")}
   end
 
+  defp init_assigns(socket, room_code, game_mode, user_id) do
+    assign(socket,
+      room_code: room_code,
+      user_id: user_id,
+      show_playlist: false,
+      game_mode: game_mode,
+      current_track: nil,
+      leader?: false,
+      users: []
+    )
+  end
+
   # ------------------------------------------------------------------
   # Presence diff
   # ------------------------------------------------------------------
@@ -150,27 +157,27 @@ defmodule PlingWeb.RoomLive do
     <div class="w-full text-center space-y-2">
       <div class="text-sm text-gray-500">{@room_code}</div>
       <div class="text-sm text-gray-500">
-        <%= if length(@users) == 1 do %>
-          <span class={if Enum.at(@users, 0).user_id == @user_id, do: "font-bold"}>
-            {Enum.at(@users, 0).user_id}
-          </span>
-          {gettext("is here")}
+        <%= if @users == [] do %>
+          {gettext("Waiting for users...")}
         <% else %>
-          <span class={if Enum.at(@users, 0).user_id == @user_id, do: "font-bold"}>
-            {Enum.at(@users, 0).user_id}
-          </span>
-          {gettext("is joined by")}
-          <%= for {user, index} <- Enum.with_index(Enum.drop(@users, 1)) do %>
-            <span class={if user.user_id == @user_id, do: "font-bold"}>{user.user_id}</span>{if index <
-                                                                                                  length(
-                                                                                                    Enum.drop(
-                                                                                                      @users,
-                                                                                                      1
-                                                                                                    )
-                                                                                                  ) -
-                                                                                                    1,
-                                                                                                do:
-                                                                                                  ", "}
+          <%= if length(@users) == 1 do %>
+            <span class={if List.first(@users).user_id == @user_id, do: "font-bold"}>
+              {List.first(@users).user_id}
+            </span>
+            {gettext("is here")}
+          <% else %>
+            <span class={if List.first(@users).user_id == @user_id, do: "font-bold"}>
+              {List.first(@users).user_id}
+            </span>
+            {gettext("is joined by")}
+            <% other_users = fn -> Enum.drop(@users, 1) end %>
+            <% show_comma? = fn index, users -> index < length(users) - 1 end %>
+            <%= for {user, index} <- Enum.with_index(other_users.()) do %>
+              <span class={if user.user_id == @user_id, do: "font-bold"}>
+                {user.user_id}
+              </span>
+              {if show_comma?.(index, other_users.()), do: ", "}
+            <% end %>
           <% end %>
         <% end %>
       </div>

lib/pling_web/live/room_live.html.heex

@@ -1,6 +1,6 @@
-<pre class="absolute whitespace-pre-wrap text-xs p-4 bg-zinc-100 rounded-lg">
+<%!-- <pre class="absolute whitespace-pre-wrap text-xs p-4 bg-zinc-100 rounded-lg">
     <%= inspect(Map.take(assigns, [:room_code, :user_id, :users, :playing?, :countdown, :timer_threshold, :leader?, :show_playlist, :selection, :game_mode, :scores]), pretty: true) %>
-  </pre>
+  </pre> --%>
 <div class="w-full flex flex-col h-dvh space-y-4 py-4 justify-between" data-leader={@leader?}>
   <.room_info room_code={@room_code} users={@users} user_id={@user_id} />
   <.pling_button