fix: resolve type errors and lint components/routes

app/routes/acls/editor.tsx

@@ -5,8 +5,8 @@ import {
 	PencilIcon,
 } from '@primer/octicons-react';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
-import { useLoaderData, useRevalidator } from 'react-router';
-import { useDebounceFetcher } from 'remix-utils/use-debounce-fetcher';
+import { useLoaderData, useRevalidator, useFetcher } from 'react-router';
+//import { useDebounceFetcher } from 'remix-utils/use-debounce-fetcher';
 import { useEffect, useState, useMemo } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
 import { setTimeout } from 'node:timers/promises';
@@ -149,7 +149,7 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export default function Page() {
 	const data = useLoaderData<typeof loader>();
-	const fetcher = useDebounceFetcher<typeof action>();
+	const fetcher = useFetcher<typeof action>();
 	const revalidator = useRevalidator();
 
 	const [acl, setAcl] = useState(data.policy ?? '');

app/routes/auth/login.tsx

@@ -1,4 +1,8 @@
-import { type ActionFunctionArgs, type LoaderFunctionArgs, redirect } from 'react-router';
+import {
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+	redirect,
+} from 'react-router';
 import { Form, useActionData, useLoaderData } from 'react-router';
 import { useMemo } from 'react';
 

app/routes/dns/components/nameservers.tsx

@@ -48,7 +48,7 @@ export default function Nameservers({ nameservers, isDisabled }: Props) {
 interface ListProps {
 	isGlobal: boolean;
 	isDisabled: boolean;
-	nameservers: string[];
+	nameservers: Record<string, string[]>;
 	name: string;
 }
 

app/routes/dns/overview.tsx

@@ -43,22 +43,22 @@ export async function loader() {
 export async function action({ request }: ActionFunctionArgs) {
 	const session = await getSession(request.headers.get('Cookie'));
 	if (!session.has('hsApiKey')) {
-		return send({ success: false }, 401);
+		return data({ success: false }, { status: 401 });
 	}
 
 	const context = await loadContext();
 	if (!context.config.write) {
-		return send({ success: false }, 403);
+		return data({ success: false }, { status: 403 });
 	}
 
-	const data = (await request.json()) as Record<string, unknown>;
-	await patchConfig(data);
+	const patch = (await request.json()) as Record<string, unknown>;
+	await patchConfig(patch);
 
 	if (context.integration?.onConfigChange) {
 		await context.integration.onConfigChange(context.integration.context);
 	}
 
-	return { success: true };
+	return data({ success: true });
 }
 
 export default function Page() {

app/routes/machines/components/machine.tsx

@@ -1,6 +1,6 @@
 import { ChevronDownIcon, CopyIcon } from '@primer/octicons-react';
 import { Link } from 'react-router';
-
+import { useMemo } from 'react';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import { toast } from '~/components/Toaster';
@@ -35,7 +35,11 @@ export default function MachineRow({ machine, routes, magic, users }: Props) {
 		: magic;
 
 	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet, subnetApproved } = routes.reduce(
+	const { exit, subnet, subnetApproved } = routes.reduce<{
+		exit: Route[];
+		subnetApproved: Route[];
+		subnet: Route[];
+	}>(
 		(acc, route) => {
 			if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
 				acc.exit.push(route);

app/routes/machines/dialogs/routes.tsx

@@ -1,5 +1,5 @@
 import { useFetcher } from 'react-router';
-import { type Dispatch, type SetStateAction, useMemo } from 'react';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 
 import Dialog from '~/components/Dialog';
 import Switch from '~/components/Switch';
@@ -18,7 +18,10 @@ export default function Routes({ machine, routes, state }: RoutesProps) {
 	const fetcher = useFetcher();
 
 	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet } = routes.reduce(
+	const { exit, subnet } = routes.reduce<{
+		exit: Route[];
+		subnet: Route[];
+	}>(
 		(acc, route) => {
 			if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
 				acc.exit.push(route);

app/routes/machines/machine.tsx

@@ -81,7 +81,11 @@ export default function Page() {
 	}
 
 	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet, subnetApproved } = routes.reduce(
+	const { exit, subnet, subnetApproved } = routes.reduce<{
+		exit: Route[];
+		subnet: Route[];
+		subnetApproved: Route[];
+	}>(
 		(acc, route) => {
 			if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
 				acc.exit.push(route);
@@ -133,7 +137,6 @@ export default function Page() {
 				</span>
 
 				<MenuOptions
-					className={cn('bg-ui-100 dark:bg-ui-800')}
 					machine={machine}
 					routes={routes}
 					users={users}

app/routes/users/overview.tsx

@@ -1,4 +1,9 @@
-import { type DataRef, DndContext, useDraggable, useDroppable } from '@dnd-kit/core';
+import {
+	DataRef,
+	DndContext,
+	useDraggable,
+	useDroppable,
+} from '@dnd-kit/core';
 import { PersonIcon } from '@primer/octicons-react';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
 import { useActionData, useLoaderData, useSubmit } from 'react-router';

app/routes/util/healthz.ts

@@ -22,5 +22,5 @@ export async function loader() {
 		}
 	}
 
-	return { status: 'OK' };
+	return data({ status: 'OK' });
 }