From dbdccb2e3dbd45e8043f460b29333b6fec830862 Mon Sep 17 00:00:00 2001
From: rxdn <29165304+rxdn@users.noreply.github.com>
Date: Sun, 1 Sep 2024 00:21:40 +0100
Subject: [PATCH] Retry with default icon

---
 frontend/src/includes/ManageSidebar.svelte    | 33 +++++++------------
 frontend/src/js/icons.js                      | 23 +++++++++++++
 .../src/views/premium/SelectServers.svelte    |  0
 3 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/js/icons.js
 create mode 100644 frontend/src/views/premium/SelectServers.svelte

diff --git a/frontend/src/includes/ManageSidebar.svelte b/frontend/src/includes/ManageSidebar.svelte
index 2082c88..ce02dec 100644
--- a/frontend/src/includes/ManageSidebar.svelte
+++ b/frontend/src/includes/ManageSidebar.svelte
@@ -1,6 +1,6 @@
 <section class="sidebar">
     <header>
-        <img src="{iconUrl}" class="guild-icon" alt="Guild icon" width="50" height="50"/>
+        <img src="{iconUrl}" class="guild-icon" alt="Guild icon" width="50" height="50" on:error={handleIconLoadError} />
         {guild.name}
     </header>
     <nav>
@@ -91,6 +91,7 @@
     import axios from "axios";
     import {API_URL} from "../js/constants";
     import {notifyError, withLoadingScreen} from "../js/util";
+    import {getIconUrl, getDefaultIcon} from "../js/icons";
     import ManageSidebarLink from "./ManageSidebarLink.svelte";
     import SubNavigation from "./SubNavigation.svelte";
     import SubNavigationLink from "./SubNavigationLink.svelte";
@@ -105,6 +106,14 @@
     let guild = {};
     let iconUrl = "";
 
+    let retried = false;
+    function handleIconLoadError(e) {
+        if (retried) return;
+
+        retried = true;
+        iconUrl = getDefaultIcon(guildId);
+    }
+
     async function loadGuild() {
         const res = await axios.get(`${API_URL}/api/${guildId}/guild`);
         if (res.status !== 200) {
@@ -115,31 +124,11 @@
         guild = res.data;
     }
 
-    function isAnimated() {
-        if (guild.icon === undefined || guild.icon === "") {
-            return false;
-        } else {
-            return guild.icon.startsWith('a_')
-        }
-    }
-
-    function getIconUrl() {
-        if (!guild.icon) {
-            return `https://cdn.discordapp.com/embed/avatars/${Number((BigInt(guildId) >> BigInt(22)) % BigInt(6))}.png`
-        }
-
-        if (isAnimated()) {
-            return `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.gif?size=256`
-        } else {
-            return `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=256`
-        }
-    }
-
     onMount(async () => {
         await withLoadingScreen(async () => {
             await loadGuild();
 
-            iconUrl = getIconUrl();
+            iconUrl = getIconUrl(guildId, guild.icon);
         })
     });
 </script>
\ No newline at end of file
diff --git a/frontend/src/js/icons.js b/frontend/src/js/icons.js
new file mode 100644
index 0000000..f89e7cc
--- /dev/null
+++ b/frontend/src/js/icons.js
@@ -0,0 +1,23 @@
+export function isAnimated(icon) {
+    if (icon === undefined || icon === "") {
+        return false;
+    } else {
+        return icon.startsWith('a_')
+    }
+}
+
+export function getIconUrl(id, icon) {
+    if (!icon || icon === "") {
+        return getDefaultIcon(id);
+    }
+
+    if (isAnimated(icon)) {
+        return `https:\/\/cdn.discordapp.com/icons/${id}/${icon}.gif?size=256`
+    } else {
+        return `https:\/\/cdn.discordapp.com/icons/${id}/${icon}.webp?size=256`
+    }
+}
+
+export function getDefaultIcon(id) {
+    return `https://cdn.discordapp.com/embed/avatars/${Number((BigInt(id) >> BigInt(22)) % BigInt(6))}.png`
+}
\ No newline at end of file
diff --git a/frontend/src/views/premium/SelectServers.svelte b/frontend/src/views/premium/SelectServers.svelte
new file mode 100644
index 0000000..e69de29