cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use <.async_result> component

Browse Source 
Removes need for custom conditional logic, and covers all needed states.
This commit is contained in:
Claudio Ortolina
2024-12-03 23:34:25 +00:00
parent 4dcd0f2dd0
commit 740e94fdf6
3 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/artist_live/show.ex
-9
View File
@@ -50,15 +50,6 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
}
end
defp bio_available?(artist_info_result) do
artist_info_result.ok? && artist_info_result.result && artist_info_result.result.bio !== ""
end
defp played?(artist_info_result) do
artist_info_result.ok? && artist_info_result.result &&
artist_info_result.result.play_count > 0
end
# Bios start with text, then a link to read more on Last.fm, followed by a license text.
# We split the bio at the read more link in order to render the license separately.
@last_fm_link_regex ~r/<a.*Read more on Last\.fm<\/a>\.\s*/
lib/music_library_web/live/artist_live/show.html.heex
+52 -27
View File
@@ -1,35 +1,60 @@
<div class="mt-4 px-4 sm:px-6 lg:px-8">
<h1 class="flex items-end mt-1 font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
{@artist.name}
<span :if={played?(@artist_info)}>
<span class="sr-only">
{gettext("Number of scrobbles")}
<.async_result :let={artist_info} assign={@artist_info}>
<:loading>
<div class="ml-2">
<span class="sr-only">{gettext("Loading play count")}</span>
<.icon
name="hero-arrow-path"
class="-mt-1 h-5 w-5 animate-spin"
aria-hidden="true"
data-slot="icon"
/>
</div>
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
{gettext("There was an error loading the play count")}
</div>
</:failed>
<span :if={artist_info.play_count > 0}>
<span class="sr-only">
{gettext("Number of scrobbles")}
</span>
<span class={[
"rounded-full ml-2",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-gray-50 dark:bg-gray-400/10",
"text-gray-600 dark:text-gray-500",
"ring-gray-500/10 dark:ring-gray-400/20"
]}>
{artist_info.play_count}
</span>
</span>
<span class={[
"rounded-full ml-2",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-gray-50 dark:bg-gray-400/10",
"text-gray-600 dark:text-gray-500",
"ring-gray-500/10 dark:ring-gray-400/20"
]}>
{@artist_info.result.play_count}
</span>
</span>
</.async_result>
</h1>
<details
:if={bio_available?(@artist_info)}
class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
>
<summary class="text-sm mb-4">{gettext("Biography")}</summary>
{render_bio(@artist_info.result.bio)}
</details>
<div
:if={!bio_available?(@artist_info)}
class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
>
{gettext("Biography not available")}
</div>
<.async_result :let={artist_info} assign={@artist_info}>
<:loading>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
{gettext("Loading biography")}
</div>
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
{gettext("There was an error loading the biography")}
</div>
</:failed>
<details
:if={artist_info.bio !== ""}
class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
>
<summary class="text-sm mb-4">{gettext("Biography")}</summary>
{render_bio(@artist_info.result.bio)}
</details>
</.async_result>
<div :if={@artist_records.collection !== []} class="mt-4">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
priv/gettext/default.pot
+26 -11
View File
@@ -51,7 +51,7 @@ msgid "Choose a value"
msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:13
#: lib/music_library_web/live/artist_live/show.html.heex:36
#: lib/music_library_web/live/artist_live/show.html.heex:61
#: lib/music_library_web/live/collection_live/index.ex:77
#: lib/music_library_web/live/collection_live/show.ex:102
#: lib/music_library_web/live/collection_live/show.ex:119
@@ -328,7 +328,7 @@ msgid "Welcome to your Music Library"
msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:19
#: lib/music_library_web/live/artist_live/show.html.heex:74
#: lib/music_library_web/live/artist_live/show.html.heex:99
#: lib/music_library_web/live/wishlist_live/index.ex:75
#: lib/music_library_web/live/wishlist_live/show.ex:102
#, elixir-autogen, elixir-format
@@ -477,23 +477,38 @@ msgstr ""
msgid "Dev dashboard"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:31
#, elixir-autogen, elixir-format
msgid "Biography not available"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:54
#: lib/music_library_web/live/artist_live/show.html.heex:92
#: lib/music_library_web/live/artist_live/show.html.heex:79
#: lib/music_library_web/live/artist_live/show.html.heex:117
#, elixir-autogen, elixir-format
msgid "View details"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:6
#: lib/music_library_web/live/artist_live/show.html.heex:23
#, elixir-autogen, elixir-format
msgid "Number of scrobbles"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:24
#: lib/music_library_web/live/artist_live/show.html.heex:54
#, elixir-autogen, elixir-format
msgid "Biography"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:42
#, elixir-autogen, elixir-format
msgid "Loading biography"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:7
#, elixir-autogen, elixir-format
msgid "Loading play count"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:47
#, elixir-autogen, elixir-format
msgid "There was an error loading the biography"
msgstr ""
#: lib/music_library_web/live/artist_live/show.html.heex:18
#, elixir-autogen, elixir-format
msgid "There was an error loading the play count"
msgstr ""