🏗️ Migrate dashdot storage to tRPC

src/server/api/routers/dash-dot.ts

@@ -42,4 +42,26 @@ export const dashDotRouter = createTRPCRouter({
       });
       return response.data;
     }),
+  storage: publicProcedure
+    .input(
+      z.object({
+        url: dashDotUrlSchema.transform(removeLeadingSlash),
+      })
+    )
+    .output(z.array(z.number()))
+    .query(async ({ input }) => {
+      const response = await axios.get(`${input.url}/load/storage`).catch((error) => {
+        if (error.response.status === 404) {
+          throw new TRPCError({
+            code: 'NOT_FOUND',
+            message: 'Unable to find specified dash-dot',
+          });
+        }
+
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+        });
+      });
+      return response.data;
+    }),
 });

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -1,20 +1,18 @@
 import { Group, Stack, Text } from '@mantine/core';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
 import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../config/provider';
+import { api } from '~/utils/api';
 import { bytes } from '../../tools/bytesHelper';
 import { percentage } from '../../tools/shared/math/percentage.tool';
 import { DashDotInfo } from './DashDotCompactNetwork';
 
 interface DashDotCompactStorageProps {
   info: DashDotInfo;
-  widgetId: string;
+  url: string;
 }
 
-export const DashDotCompactStorage = ({ info, widgetId }: DashDotCompactStorageProps) => {
+export const DashDotCompactStorage = ({ info, url }: DashDotCompactStorageProps) => {
   const { t } = useTranslation('modules/dashdot');
-  const { data: storageLoad } = useDashDotStorage(widgetId);
+  const { data: storageLoad } = useDashDotStorage(url);
 
   const totalUsed = calculateTotalLayoutSize({
     layout: storageLoad ?? [],
@@ -55,25 +53,7 @@ interface CalculateTotalLayoutSizeProps<TLayoutItem> {
   key?: keyof TLayoutItem;
 }
 
-const useDashDotStorage = (widgetId: string) => {
-  const { name: configName, config } = useConfigContext();
-
-  return useQuery({
-    queryKey: [
-      'dashdot/storage',
-      {
-        configName,
-        url: config?.widgets.find((x) => x.type === 'dashdot')?.properties.url,
-        widgetId,
-      },
-    ],
-    queryFn: () => fetchDashDotStorageLoad(configName, widgetId),
+const useDashDotStorage = (url: string) =>
+  api.dashDot.storage.useQuery({
+    url,
   });
-};
-
-async function fetchDashDotStorageLoad(configName: string | undefined, widgetId: string) {
-  if (!configName) throw new Error('configName is undefined');
-  return (await (
-    await axios.get('/api/modules/dashdot/storage', { params: { configName, widgetId } })
-  ).data) as number[];
-}

src/widgets/dashDot/DashDotGraph.tsx

@@ -11,7 +11,6 @@ interface DashDotGraphProps {
   dashDotUrl: string;
   usePercentages: boolean;
   info: DashDotInfo;
-  widgetId: string;
 }
 
 export const DashDotGraph = ({
@@ -22,13 +21,12 @@ export const DashDotGraph = ({
   dashDotUrl,
   usePercentages,
   info,
-  widgetId,
 }: DashDotGraphProps) => {
   const { t } = useTranslation('modules/dashdot');
   const { classes } = useStyles();
 
   if (graph === 'storage' && isCompact) {
-    return <DashDotCompactStorage info={info} widgetId={widgetId} />;
+    return <DashDotCompactStorage info={info} url={dashDotUrl} />;
   }
 
   if (graph === 'network' && isCompact) {

src/widgets/dashDot/DashDotTile.tsx

@@ -198,7 +198,6 @@ function DashDotTile({ widget }: DashDotTileProps) {
                     isCompact={g.subValues.compactView ?? false}
                     multiView={g.subValues.multiView ?? false}
                     usePercentages={usePercentages}
-                    widgetId={widget.id}
                   />
                 </Grid.Col>
               ))}