chore: switch to react-router v7

app/routes/machines/dialogs/new.tsx

@@ -1,74 +1,73 @@
-import { Form, useFetcher, Link } from '@remix-run/react'
-import { Dispatch, SetStateAction, useState, useEffect } from 'react'
-import { PlusIcon, ServerIcon, KeyIcon } from '@primer/octicons-react'
-import { cn } from '~/utils/cn'
+import { Form, useFetcher, Link } from 'react-router';
+import { Dispatch, SetStateAction, useState, useEffect } from 'react';
+import { PlusIcon, ServerIcon, KeyIcon } from '@primer/octicons-react';
+import { cn } from '~/utils/cn';
 
-import Code from '~/components/Code'
-import Dialog from '~/components/Dialog'
-import TextField from '~/components/TextField'
-import Select from '~/components/Select'
-import Menu from '~/components/Menu'
-import Spinner from '~/components/Spinner'
-import { toast } from '~/components/Toaster'
-import { Machine, User } from '~/types'
+import Code from '~/components/Code';
+import Dialog from '~/components/Dialog';
+import TextField from '~/components/TextField';
+import Select from '~/components/Select';
+import Menu from '~/components/Menu';
+import Spinner from '~/components/Spinner';
+import { toast } from '~/components/Toaster';
+import { Machine, User } from '~/types';
 
 export interface NewProps {
-	server: string
-	users: User[]
+	server: string;
+	users: User[];
 }
 
 export default function New(data: NewProps) {
-	const fetcher = useFetcher<{ success?: boolean }>()
-	const mkeyState = useState(false)
-	const [mkey, setMkey] = useState('')
-	const [user, setUser] = useState('')
-	const [toasted, setToasted] = useState(false)
+	const fetcher = useFetcher<{ success?: boolean }>();
+	const mkeyState = useState(false);
+	const [mkey, setMkey] = useState('');
+	const [user, setUser] = useState('');
+	const [toasted, setToasted] = useState(false);
 
 	useEffect(() => {
 		if (!fetcher.data || toasted) {
-			return
+			return;
 		}
 
 		if (fetcher.data.success) {
-			toast('Registered new machine')
+			toast('Registered new machine');
 		} else {
-			toast('Failed to register machine due to an invalid key')
+			toast('Failed to register machine due to an invalid key');
 		}
 
-		setToasted(true)
-	}, [fetcher.data, toasted, mkey])
+		setToasted(true);
+	}, [fetcher.data, toasted, mkey]);
 
 	return (
 		<>
 			<Dialog>
 				<Dialog.Panel control={mkeyState}>
-					{close => (
+					{(close) => (
 						<>
-							<Dialog.Title>
-								Register Machine Key
-							</Dialog.Title>
-							<Dialog.Text className='mb-4'>
-								The machine key is given when you run
-								{' '}
+							<Dialog.Title>Register Machine Key</Dialog.Title>
+							<Dialog.Text className="mb-4">
+								The machine key is given when you run{' '}
 								<Code isCopyable>
 									tailscale up --login-server=
 									{data.server}
-								</Code>
-								{' '}
+								</Code>{' '}
 								on your device.
 							</Dialog.Text>
-							<fetcher.Form method="POST" onSubmit={e => {
-								fetcher.submit(e.currentTarget)
-								close()
-							}}>
+							<fetcher.Form
+								method="POST"
+								onSubmit={(e) => {
+									fetcher.submit(e.currentTarget);
+									close();
+								}}
+							>
 								<input type="hidden" name="_method" value="register" />
 								<input type="hidden" name="id" value="_" />
 								<TextField
-									label='Machine Key'
-									placeholder='mkey:ff.....'
+									label="Machine Key"
+									placeholder="mkey:ff....."
 									name="mkey"
 									state={[mkey, setMkey]}
-									className='my-2 font-mono'
+									className="my-2 font-mono"
 								/>
 								<Select
 									label="Owner"
@@ -76,28 +75,25 @@ export default function New(data: NewProps) {
 									placeholder="Select a user"
 									state={[user, setUser]}
 								>
-									{data.users.map(user => (
+									{data.users.map((user) => (
 										<Select.Item key={user.id} id={user.name}>
 											{user.name}
 										</Select.Item>
 									))}
 								</Select>
-								<div className='mt-6 flex justify-end gap-2 mt-6'>
-									<Dialog.Action
-										variant="cancel"
-										onPress={close}
-									>
+								<div className="mt-6 flex justify-end gap-2 mt-6">
+									<Dialog.Action variant="cancel" onPress={close}>
 										Cancel
 									</Dialog.Action>
 									<Dialog.Action
 										variant="confirm"
-										isDisabled={!mkey || !mkey.trim().startsWith('mkey:') || !user}
+										isDisabled={
+											!mkey || !mkey.trim().startsWith('mkey:') || !user
+										}
 									>
-										{fetcher.state === 'idle'
-											? undefined
-											: (
-												<Spinner className="w-3 h-3" />
-												)}
+										{fetcher.state === 'idle' ? undefined : (
+											<Spinner className="w-3 h-3" />
+										)}
 										Register
 									</Dialog.Action>
 								</div>
@@ -118,17 +114,17 @@ export default function New(data: NewProps) {
 				</Menu.Button>
 				<Menu.Items>
 					<Menu.ItemButton control={mkeyState}>
-						<ServerIcon className='w-4 h-4 mr-2'/>
+						<ServerIcon className="w-4 h-4 mr-2" />
 						Register Machine Key
 					</Menu.ItemButton>
 					<Menu.ItemButton>
 						<Link to="/settings/auth-keys">
-							<KeyIcon className='w-4 h-4 mr-2'/>
+							<KeyIcon className="w-4 h-4 mr-2" />
 							Generate Pre-auth Key
 						</Link>
 					</Menu.ItemButton>
 				</Menu.Items>
 			</Menu>
 		</>
-	)
+	);
 }