🏗️ Migrate dashdot info to tRPC

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -2,21 +2,13 @@ import { Group, Stack, Text } from '@mantine/core';
 import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { bytes } from '../../tools/bytesHelper';
+import { RouterOutputs } from '~/utils/api';
 
 interface DashDotCompactNetworkProps {
   info: DashDotInfo;
 }
 
-export interface DashDotInfo {
-  storage: {
-    size: number;
-    disks: { device: string; brand: string; type: string }[];
-  }[];
-  network: {
-    speedUp: number;
-    speedDown: number;
-  };
-}
+export type DashDotInfo = RouterOutputs['dashDot']['info'];
 
 export const DashDotCompactNetwork = ({ info }: DashDotCompactNetworkProps) => {
   const { t } = useTranslation('modules/dashdot');

src/widgets/dashDot/DashDotGraph.tsx

@@ -1,4 +1,4 @@
-import { createStyles, Title, useMantineTheme, getStylesRef } from '@mantine/core';
+import { Title, createStyles, getStylesRef, useMantineTheme } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
 import { DashDotCompactStorage } from './DashDotCompactStorage';

src/widgets/dashDot/DashDotTile.tsx

@@ -1,12 +1,9 @@
 import { Center, createStyles, Grid, Stack, Text, Title } from '@mantine/core';
 import { IconUnlink } from '@tabler/icons-react';
-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 { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
-import { DashDotInfo } from './DashDotCompactNetwork';
 import { DashDotGraph } from './DashDotGraph';
 
 const definition = defineWidget({
@@ -161,10 +158,9 @@ function DashDotTile({ widget }: DashDotTileProps) {
   const detectedProtocolDowngrade =
     locationProtocol === 'https:' && dashDotUrl.toLowerCase().startsWith('http:');
 
-  const { data: info } = useDashDotInfo({
+  const { data: info } = useDashDotInfoQuery({
     dashDotUrl,
     enabled: !detectedProtocolDowngrade,
-    widgetId: widget.id,
   });
 
   if (detectedProtocolDowngrade) {
@@ -212,37 +208,16 @@ function DashDotTile({ widget }: DashDotTileProps) {
     </Stack>
   );
 }
-
-const useDashDotInfo = ({
-  dashDotUrl,
-  enabled,
-  widgetId,
-}: {
-  dashDotUrl: string;
-  enabled: boolean;
-  widgetId: string;
-}) => {
-  const { name: configName } = useConfigContext();
-  return useQuery({
-    refetchInterval: 50000,
-    queryKey: [
-      'dashdot/info',
-      {
-        configName,
-        dashDotUrl,
-      },
-    ],
-    queryFn: () => fetchDashDotInfo(configName, widgetId),
-    enabled,
-  });
-};
-
-const fetchDashDotInfo = async (configName: string | undefined, widgetId: string) => {
-  if (!configName) return {} as DashDotInfo;
-  return (await (
-    await axios.get('/api/modules/dashdot/info', { params: { configName, widgetId } })
-  ).data) as DashDotInfo;
-};
+const useDashDotInfoQuery = ({ dashDotUrl, enabled }: { dashDotUrl: string; enabled: boolean }) =>
+  api.dashDot.info.useQuery(
+    {
+      url: dashDotUrl,
+    },
+    {
+      refetchInterval: 50000,
+      enabled,
+    }
+  );
 
 export const useDashDotTileStyles = createStyles((theme) => ({
   graphsContainer: {