🏗️ Migrate icons to tRPC

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,
+  });

src/hooks/icons/useGetDashboardIcons.tsx

@@ -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,
-  });

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

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;
+  }),
+});