🏗️ Migrate dnshole controls to tRPC

src/widgets/dnshole/DnsHoleControls.tsx

@@ -5,9 +5,10 @@ import { useConfigContext } from '../../config/provider';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
-import { useDnsHoleControlMutation, useDnsHoleSummeryQuery } from './query';
+import { useDnsHoleSummeryQuery } from './query';
 import { PiholeApiSummaryType } from './type';
 import { queryClient } from '../../tools/server/configurations/tanstack/queryClient.tool';
+import { api } from '~/utils/api';
 
 const definition = defineWidget({
   id: 'dns-hole-controls',
@@ -33,9 +34,9 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   const { mutateAsync } = useDnsHoleControlMutation();
   const { t } = useTranslation('common');
 
-  const { config } = useConfigContext();
+  const { name: configName, config } = useConfigContext();
 
-  if (isInitialLoading || !data) {
+  if (isInitialLoading || !data || !configName) {
     return <WidgetLoading />;
   }
 
@@ -44,7 +45,10 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
       <Group grow>
         <Button
           onClick={async () => {
-            await mutateAsync('enabled');
+            await mutateAsync({
+              status: 'enabled',
+              configName,
+            });
             await queryClient.invalidateQueries({ queryKey: ['dns-hole-summary'] });
           }}
           leftIcon={<IconPlayerPlay size={20} />}
@@ -55,7 +59,10 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
         </Button>
         <Button
           onClick={async () => {
-            await mutateAsync('disabled');
+            await mutateAsync({
+              status: 'disabled',
+              configName,
+            });
             await queryClient.invalidateQueries({ queryKey: ['dns-hole-summary'] });
           }}
           leftIcon={<IconPlayerStop size={20} />}
@@ -117,4 +124,6 @@ const StatusBadge = ({ status }: { status: PiholeApiSummaryType['status'] }) =>
   );
 };
 
+const useDnsHoleControlMutation = () => api.dnsHole.control.useMutation();
+
 export default definition;

src/widgets/dnshole/query.ts

@@ -1,5 +1,5 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { AdStatistics, PiholeApiSummaryType } from './type';
+import { useQuery } from '@tanstack/react-query';
+import { AdStatistics } from './type';
 
 export const useDnsHoleSummeryQuery = () =>
   useQuery({
@@ -10,14 +10,3 @@ export const useDnsHoleSummeryQuery = () =>
     },
     refetchInterval: 3 * 60 * 1000,
   });
-
-export const useDnsHoleControlMutation = () =>
-  useMutation({
-    mutationKey: ['dns-hole-control'],
-    mutationFn: async (status: PiholeApiSummaryType['status']) => {
-      const response = await fetch(`/api/modules/dns-hole/control?status=${status}`, {
-        method: 'POST',
-      });
-      return response.json();
-    },
-  });