From 6745ee85297d946f7988e37546f039f274a0694e Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Mon, 6 Jan 2025 08:18:46 +0530
Subject: [PATCH] fix: resolve type errors and lint components/routes

---
 app/components/Code.tsx                    |  8 ++++++--
 app/components/Footer.tsx                  |  6 +++++-
 app/components/Toaster.tsx                 | 17 +++++++++++------
 app/routes/acls/editor.tsx                 |  6 +++---
 app/routes/auth/login.tsx                  |  6 +++++-
 app/routes/dns/components/nameservers.tsx  |  2 +-
 app/routes/dns/overview.tsx                | 10 +++++-----
 app/routes/machines/components/machine.tsx |  8 ++++++--
 app/routes/machines/dialogs/routes.tsx     |  7 +++++--
 app/routes/machines/machine.tsx            |  7 +++++--
 app/routes/users/overview.tsx              |  7 ++++++-
 app/routes/util/healthz.ts                 |  2 +-
 biome.json                                 |  5 ++++-
 13 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/app/components/Code.tsx b/app/components/Code.tsx
index 1606610..4fbb2b4 100644
--- a/app/components/Code.tsx
+++ b/app/components/Code.tsx
@@ -1,4 +1,4 @@
-import { useState, type HTMLProps } from 'react';
+import { useState, HTMLProps } from 'react';
 import { CopyIcon, CheckIcon } from '@primer/octicons-react';
 import { cn } from '~/utils/cn';
 import { toast } from '~/components/Toaster';
@@ -20,7 +20,7 @@ export default function Code(props: Props) {
 			>
 				{props.children}
 			</code>
-			{props.isCopyable && props.children ? (
+			{props.isCopyable ? (
 				<button
 					className={cn(
 						'ml-1 p-1 rounded-md',
@@ -29,6 +29,10 @@ export default function Code(props: Props) {
 						'inline-flex items-center justify-center',
 					)}
 					onClick={() => {
+						if (!props.children) {
+							throw new Error('Made copyable without children');
+						}
+
 						navigator.clipboard.writeText(props.children.join(''));
 						toast('Copied to clipboard');
 						setIsCopied(true);
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 132e129..37be9c6 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,12 +1,16 @@
 import { cn } from '~/utils/cn';
 import Link from '~/components/Link';
 
+declare global {
+	const __VERSION__: string;
+}
+
 interface FooterProps {
 	url: string;
 	debug: boolean;
 }
 
-export default function Footer({ url, debug, integration }: FooterProps) {
+export default function Footer({ url, debug }: FooterProps) {
 	return (
 		<footer
 			className={cn(
diff --git a/app/components/Toaster.tsx b/app/components/Toaster.tsx
index 60a66bc..ddc9a91 100644
--- a/app/components/Toaster.tsx
+++ b/app/components/Toaster.tsx
@@ -1,7 +1,15 @@
 import { XIcon } from '@primer/octicons-react';
-import { type AriaToastProps, useToast, useToastRegion } from '@react-aria/toast';
-import { ToastQueue, type ToastState, useToastQueue } from '@react-stately/toast';
-import { type ReactNode, useRef } from 'react';
+import {
+	AriaToastProps,
+	useToast,
+	useToastRegion,
+} from '@react-aria/toast';
+import {
+	ToastQueue,
+	ToastState,
+	useToastQueue,
+} from '@react-stately/toast';
+import { ReactNode, useRef } from 'react';
 import { Button } from 'react-aria-components';
 import { createPortal } from 'react-dom';
 import { ClientOnly } from 'remix-utils/client-only';
@@ -14,7 +22,6 @@ type ToastProps = AriaToastProps<ReactNode> & {
 function Toast({ state, ...properties }: ToastProps) {
 	const reference = useRef(null);
 
-	// @ts-expect-error: RefObject doesn't map to FocusableElement?
 	const { toastProps, titleProps, closeButtonProps } = useToast(
 		properties,
 		state,
@@ -58,13 +65,11 @@ export function Toaster() {
 	const reference = useRef(null);
 	const state = useToastQueue(toasts);
 
-	// @ts-expect-error: React 19 has weird types for Portal vs Node
 	const { regionProps } = useToastRegion({}, state, reference);
 
 	return (
 		<ClientOnly>
 			{
-				// @ts-expect-error: Portal doesn't match Node in React 19 yet
 				() =>
 					createPortal(
 						state.visibleToasts.length >= 0 ? (
diff --git a/app/routes/acls/editor.tsx b/app/routes/acls/editor.tsx
index ccd7358..dda09b6 100644
--- a/app/routes/acls/editor.tsx
+++ b/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 ?? '');
diff --git a/app/routes/auth/login.tsx b/app/routes/auth/login.tsx
index 6b4d17a..0fbfb39 100644
--- a/app/routes/auth/login.tsx
+++ b/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';
 
diff --git a/app/routes/dns/components/nameservers.tsx b/app/routes/dns/components/nameservers.tsx
index 9d057b3..3e3d694 100644
--- a/app/routes/dns/components/nameservers.tsx
+++ b/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;
 }
 
diff --git a/app/routes/dns/overview.tsx b/app/routes/dns/overview.tsx
index 1523cea..9888a5e 100644
--- a/app/routes/dns/overview.tsx
+++ b/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() {
diff --git a/app/routes/machines/components/machine.tsx b/app/routes/machines/components/machine.tsx
index 9a612c2..c317771 100644
--- a/app/routes/machines/components/machine.tsx
+++ b/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);
diff --git a/app/routes/machines/dialogs/routes.tsx b/app/routes/machines/dialogs/routes.tsx
index 8f9c781..181432a 100644
--- a/app/routes/machines/dialogs/routes.tsx
+++ b/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);
diff --git a/app/routes/machines/machine.tsx b/app/routes/machines/machine.tsx
index d25d046..df20c3a 100644
--- a/app/routes/machines/machine.tsx
+++ b/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}
diff --git a/app/routes/users/overview.tsx b/app/routes/users/overview.tsx
index 3cf8e24..d786c69 100644
--- a/app/routes/users/overview.tsx
+++ b/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';
diff --git a/app/routes/util/healthz.ts b/app/routes/util/healthz.ts
index d7f6b14..d0e16fe 100644
--- a/app/routes/util/healthz.ts
+++ b/app/routes/util/healthz.ts
@@ -22,5 +22,5 @@ export async function loader() {
 		}
 	}
 
-	return { status: 'OK' };
+	return data({ status: 'OK' });
 }
diff --git a/biome.json b/biome.json
index bb2193f..d139dfd 100644
--- a/biome.json
+++ b/biome.json
@@ -21,7 +21,10 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true
+			"recommended": true,
+			"style": {
+				"useImportType": "off"
+			}
 		}
 	},
 	"javascript": {