Fix eslint errors

src-web/components/Dialog.tsx

@@ -2,7 +2,6 @@ import * as D from '@radix-ui/react-dialog';
 import classnames from 'classnames';
 import { motion } from 'framer-motion';
 import type { ComponentChildren } from 'preact';
-import React from 'react';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 

src-web/components/Editor/autocomplete.ts

@@ -11,7 +11,7 @@ export function debouncedAutocompletionDisplay({ millis }: { millis: number }) {
     startCompletion(view);
   }, millis);
 
-  return EditorView.updateListener.of(({ view, docChanged, focusChanged }) => {
+  return EditorView.updateListener.of(({ view, docChanged }) => {
     // const completions = currentCompletions(view.state);
     // const status = completionStatus(view.state);
 

src-web/components/Editor/url/extension.ts

@@ -1,4 +1,3 @@
-import { completeFromList } from '@codemirror/autocomplete';
 import { LanguageSupport, LRLanguage } from '@codemirror/language';
 import { completions } from './completion';
 import { parser } from './url';

src-web/components/Grid.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type { ComponentChildren } from 'preact';
 
-const colsClasses = {
+const colsClasses: Record<string | number, string> = {
   none: 'grid-cols-none',
   1: 'grid-cols-1',
   2: 'grid-cols-2',
@@ -24,13 +24,15 @@ const gapClasses = {
   3: 'gap-3',
 };
 
-type Props = HTMLAttributes<HTMLElement> & {
+interface Props {
   rows?: keyof typeof rowsClasses;
   cols?: keyof typeof colsClasses;
   gap?: keyof typeof gapClasses;
-};
+  className?: string;
+  children?: ComponentChildren;
+}
 
-export function Grid({ className, cols, gap, ...props }: Props) {
+export function Grid({ className, cols, gap, children }: Props) {
   return (
     <div
       className={classnames(
@@ -39,7 +41,8 @@ export function Grid({ className, cols, gap, ...props }: Props) {
         cols && colsClasses[cols],
         gap && gapClasses[gap],
       )}
-      {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }

src-web/components/HeaderEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useRequestUpdate } from '../hooks/useRequest';
 import type { HttpHeader, HttpRequest } from '../lib/models';
 import { IconButton } from './IconButton';
@@ -13,10 +13,13 @@ type PairWithId = { header: Partial<HttpHeader>; id: string };
 
 export function HeaderEditor({ request }: Props) {
   const updateRequest = useRequestUpdate(request);
-  const saveHeaders = (pairs: PairWithId[]) => {
-    const headers = pairs.map((p) => ({ name: '', value: '', ...p.header }));
-    updateRequest.mutate({ headers });
-  };
+  const saveHeaders = useCallback(
+    (pairs: PairWithId[]) => {
+      const headers = pairs.map((p) => ({ name: '', value: '', ...p.header }));
+      updateRequest.mutate({ headers });
+    },
+    [updateRequest],
+  );
 
   const newPair = () => {
     return { header: { name: '', value: '' }, id: Math.random().toString() };
@@ -26,13 +29,16 @@ export function HeaderEditor({ request }: Props) {
     request.headers.map((h) => ({ header: h, id: Math.random().toString() })),
   );
 
-  const setPairsAndSave = (fn: (pairs: PairWithId[]) => PairWithId[]) => {
-    setPairs((oldPairs) => {
-      const newPairs = fn(oldPairs);
-      saveHeaders(newPairs);
-      return newPairs;
-    });
-  };
+  const setPairsAndSave = useCallback(
+    (fn: (pairs: PairWithId[]) => PairWithId[]) => {
+      setPairs((oldPairs) => {
+        const newPairs = fn(oldPairs);
+        saveHeaders(newPairs);
+        return newPairs;
+      });
+    },
+    [saveHeaders],
+  );
 
   const handleChangeHeader = (pair: PairWithId) => {
     setPairsAndSave((pairs) =>
@@ -52,7 +58,7 @@ export function HeaderEditor({ request }: Props) {
     if (lastPair.header.name !== '' || lastPair.header.value !== '') {
       setPairsAndSave((pairs) => [...pairs, newPair()]);
     }
-  }, [pairs]);
+  }, [pairs, setPairsAndSave]);
 
   const handleDelete = (pair: PairWithId) => {
     setPairsAndSave((oldPairs) => oldPairs.filter((p) => p.id !== pair.id));

src-web/components/RouterError.tsx

@@ -1,23 +0,0 @@
-import { useRouteError } from 'react-router-dom';
-import { ButtonLink } from './ButtonLink';
-import { Heading } from './Heading';
-import { VStack } from './Stacks';
-
-export function RouterError() {
-  const error = useRouteError();
-  const stringified = JSON.stringify(error);
-  const message = (error as any).message ?? stringified;
-  return (
-    <div className="flex items-center justify-center h-full">
-      <VStack space={5} className="max-w-[30rem] !h-auto">
-        <Heading>Route Error 🔥</Heading>
-        <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
-          {message}
-        </pre>
-        <ButtonLink href="/" color="primary">
-          Go Home
-        </ButtonLink>
-      </VStack>
-    </div>
-  );
-}