🏗️ 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;