From 458fea369c72d0fd142854afa36490749a2288b1 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 10 Jun 2023 13:10:02 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Migrate=20icons=20to=20?=
 =?UTF-8?q?tRPC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconSelector/IconSelector.tsx | 11 +++++-
 src/hooks/icons/useGetDashboardIcons.tsx     | 17 ----------
 src/server/api/root.ts                       |  2 ++
 src/server/api/routers/icon.ts               | 35 ++++++++++++++++++++
 4 files changed, 47 insertions(+), 18 deletions(-)
 delete mode 100644 src/hooks/icons/useGetDashboardIcons.tsx
 create mode 100644 src/server/api/routers/icon.ts

diff --git a/src/components/IconSelector/IconSelector.tsx b/src/components/IconSelector/IconSelector.tsx
index 55a8ea377..5929fc22c 100644
--- a/src/components/IconSelector/IconSelector.tsx
+++ b/src/components/IconSelector/IconSelector.tsx
@@ -15,9 +15,9 @@ import {
 } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-import { useGetDashboardIcons } from '../../hooks/icons/useGetDashboardIcons';
 import { humanFileSize } from '../../tools/humanFileSize';
 import { DebouncedImage } from './DebouncedImage';
+import { api } from '~/utils/api';
 
 export const IconSelector = forwardRef(
   (
@@ -175,3 +175,12 @@ interface ItemProps extends SelectItemProps {
   size: number;
   copyright: string | undefined;
 }
+
+const useGetDashboardIcons = () =>
+  api.icon.all.useQuery(undefined, {
+    refetchOnMount: false,
+    // Cache for infinity, refetch every so often.
+    cacheTime: Infinity,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    refetchOnWindowFocus: false,
+  });
diff --git a/src/hooks/icons/useGetDashboardIcons.tsx b/src/hooks/icons/useGetDashboardIcons.tsx
deleted file mode 100644
index bd1cdc6f7..000000000
--- a/src/hooks/icons/useGetDashboardIcons.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { NormalizedIconRepositoryResult } from '../../tools/server/images/abstract-icons-repository';
-
-export const useGetDashboardIcons = () =>
-  useQuery({
-    queryKey: ['repository-icons'],
-    queryFn: async () => {
-      const response = await fetch('/api/icons/');
-      const data = await response.json();
-      return data as NormalizedIconRepositoryResult[];
-    },
-    refetchOnMount: false,
-    // Cache for infinity, refetch every so often.
-    cacheTime: Infinity,
-    staleTime: 1000 * 60 * 5, // 5 minutes
-    refetchOnWindowFocus: false,
-  });
diff --git a/src/server/api/root.ts b/src/server/api/root.ts
index d2d4b23d4..b032f1587 100644
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -3,6 +3,7 @@ import { appRouter } from './routers/app';
 import { rssRouter } from './routers/rss';
 import { configRouter } from './routers/config';
 import { dockerRouter } from './routers/docker/router';
+import { iconRouter } from './routers/icon';
 
 /**
  * This is the primary router for your server.
@@ -14,6 +15,7 @@ export const rootRouter = createTRPCRouter({
   rss: rssRouter,
   config: configRouter,
   docker: dockerRouter,
+  icon: iconRouter,
 });
 
 // export type definition of API
diff --git a/src/server/api/routers/icon.ts b/src/server/api/routers/icon.ts
new file mode 100644
index 000000000..f3320775d
--- /dev/null
+++ b/src/server/api/routers/icon.ts
@@ -0,0 +1,35 @@
+import { LocalIconsRepository } from '~/tools/server/images/local-icons-repository';
+import { createTRPCRouter, publicProcedure } from '../trpc';
+import { JsdelivrIconsRepository } from '~/tools/server/images/jsdelivr-icons-repository';
+import { UnpkgIconsRepository } from '~/tools/server/images/unpkg-icons-repository';
+
+export const iconRouter = createTRPCRouter({
+  all: publicProcedure.query(async () => {
+    const respositories = [
+      new LocalIconsRepository(),
+      new JsdelivrIconsRepository(
+        JsdelivrIconsRepository.tablerRepository,
+        'Walkxcode Dashboard Icons',
+        'Walkxcode on Github'
+      ),
+      new UnpkgIconsRepository(
+        UnpkgIconsRepository.tablerRepository,
+        'Tabler Icons',
+        'Tabler Icons - GitHub (MIT)'
+      ),
+      new JsdelivrIconsRepository(
+        JsdelivrIconsRepository.papirusRepository,
+        'Papirus Icons',
+        'Papirus Development Team on GitHub (Apache 2.0)'
+      ),
+      new JsdelivrIconsRepository(
+        JsdelivrIconsRepository.homelabSvgAssetsRepository,
+        'Homelab Svg Assets',
+        'loganmarchione on GitHub (MIT)'
+      ),
+    ];
+    const fetches = respositories.map((rep) => rep.fetch());
+    const data = await Promise.all(fetches);
+    return data;
+  }),
+});