From 3cb806d20adb749d84a26c477aba2414619dfed3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 24 Dec 2024 10:29:24 +1100
Subject: [PATCH] Handle error when loading icon pack (#8753) (#8755)

* Handle error when loading icon pack

* Update

(cherry picked from commit 8fcebefa0b26deb8c9d63b68d4f4a1b1b10e65fe)

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>
---
 src/frontend/src/states/IconState.tsx | 36 +++++++++++++++++++--------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/states/IconState.tsx b/src/frontend/src/states/IconState.tsx
index 008d93ffb4..d2b9de3a95 100644
--- a/src/frontend/src/states/IconState.tsx
+++ b/src/frontend/src/states/IconState.tsx
@@ -1,5 +1,7 @@
 import { create } from 'zustand';
 
+import { t } from '@lingui/macro';
+import { showNotification } from '@mantine/notifications';
 import { api } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { generateUrl } from '../functions/urls';
@@ -38,17 +40,29 @@ export const useIconState = create<IconState>()((set, get) => ({
 
     await Promise.all(
       packs.data.map(async (pack: any) => {
-        const fontName = `inventree-icon-font-${pack.prefix}`;
-        const src = Object.entries(pack.fonts as Record<string, string>)
-          .map(
-            ([format, url]) => `url(${generateUrl(url)}) format("${format}")`
-          )
-          .join(',\n');
-        const font = new FontFace(fontName, `${src};`);
-        await font.load();
-        document.fonts.add(font);
+        if (pack.prefix && pack.fonts) {
+          const fontName = `inventree-icon-font-${pack.prefix}`;
+          const src = Object.entries(pack.fonts as Record<string, string>)
+            .map(
+              ([format, url]) => `url(${generateUrl(url)}) format("${format}")`
+            )
+            .join(',\n');
+          const font = new FontFace(fontName, `${src};`);
+          await font.load();
+          document.fonts.add(font);
+          return font;
+        } else {
+          console.error(
+            "ERR: Icon package is missing 'prefix' or 'fonts' field"
+          );
+          showNotification({
+            title: t`Error`,
+            message: t`Error loading icon package from server`,
+            color: 'red'
+          });
 
-        return font;
+          return null;
+        }
       })
     );
 
@@ -56,7 +70,7 @@ export const useIconState = create<IconState>()((set, get) => ({
       hasLoaded: true,
       packages: packs.data,
       packagesMap: Object.fromEntries(
-        packs.data.map((pack: any) => [pack.prefix, pack])
+        packs.data?.map((pack: any) => [pack.prefix, pack])
       )
     });
   }