Fix eslint errors

package-lock.json

@@ -42,8 +42,6 @@
         "@types/node": "^18.7.10",
         "@types/parse-color": "^1.0.1",
         "@types/parse-json": "^4.0.0",
-        "@types/react": "^18.0.15",
-        "@types/react-dom": "^18.0.6",
         "@typescript-eslint/eslint-plugin": "^5.52.0",
         "@typescript-eslint/parser": "^5.52.0",
         "autoprefixer": "^10.4.13",
@@ -2406,33 +2404,27 @@
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/@types/react": {
       "version": "18.0.28",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
       "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "18.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
-      "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/@types/semver": {
       "version": "7.3.13",
@@ -9467,33 +9459,27 @@
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "@types/react": {
       "version": "18.0.28",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
       "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
-    "@types/react-dom": {
-      "version": "18.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
-      "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "@types/semver": {
       "version": "7.3.13",

package.json

@@ -49,8 +49,6 @@
     "@types/node": "^18.7.10",
     "@types/parse-color": "^1.0.1",
     "@types/parse-json": "^4.0.0",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
     "autoprefixer": "^10.4.13",

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 saveHeaders = useCallback(
-    const headers = pairs.map((p) => ({ name: '', value: '', ...p.header }));
+    (pairs: PairWithId[]) => {
-    updateRequest.mutate({ headers });
+      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[]) => {
+  const setPairsAndSave = useCallback(
-    setPairs((oldPairs) => {
+    (fn: (pairs: PairWithId[]) => PairWithId[]) => {
-      const newPairs = fn(oldPairs);
+      setPairs((oldPairs) => {
-      saveHeaders(newPairs);
+        const newPairs = fn(oldPairs);
-      return newPairs;
+        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>
-  );
-}

src-web/hooks/useRequest.ts

@@ -26,13 +26,15 @@ export function useRequestUpdate(request: HttpRequest | null) {
         throw new Error("Can't update a null request");
       }
 
-      const updatedRequest = { ...request, ...patch } as any;
+      const updatedRequest = { ...request, ...patch };
 
-      // TODO: Figure out why this is necessary
+      await invoke('update_request', {
-      updatedRequest.createdAt = updatedRequest.createdAt.toISOString().replace('Z', '');
+        request: {
-      updatedRequest.updatedAt = updatedRequest.updatedAt.toISOString().replace('Z', '');
+          ...updatedRequest,
-
+          createdAt: updatedRequest.createdAt.toISOString().replace('Z', ''),
-      await invoke('update_request', { request: updatedRequest });
+          updatedAt: updatedRequest.updatedAt.toISOString().replace('Z', ''),
+        },
+      });
     },
   });
 }

src-web/hooks/useResponses.ts

@@ -1,6 +1,7 @@
-import { invoke } from '@tauri-apps/api';
-import { convertDates, HttpResponse } from '../lib/models';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import type { HttpResponse } from '../lib/models';
+import { convertDates } from '../lib/models';
 
 export function responsesQueryKey(requestId: string) {
   return ['responses', { requestId }];

src-web/hooks/useWorkspaces.ts

@@ -1,5 +1,6 @@
 import { invoke } from '@tauri-apps/api';
-import { convertDates, Workspace } from '../lib/models';
+import type { Workspace } from '../lib/models';
+import { convertDates } from '../lib/models';
 import { useQuery } from '@tanstack/react-query';
 
 export function useWorkspaces() {

src-web/lib/debounce.ts

@@ -1,6 +1,8 @@
-export function debounce(fn: (...args: any[]) => any, delay: number) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce(fn: (...args: any[]) => void, delay: number) {
   let timer: ReturnType<typeof setTimeout>;
-  const result = function (...args: Parameters<typeof fn>) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const result = function (...args: any[]) {
     clearTimeout(timer);
     timer = setTimeout(() => fn(...args), delay);
   };

src-web/main.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { listen } from '@tauri-apps/api/event';
 import { MotionConfig } from 'framer-motion';
-import { render } from 'preact';
+import { render } from 'react-dom';
 import { HelmetProvider } from 'react-helmet-async';
 import { AppRouter } from './components/AppRouter';
 import { requestsQueryKey } from './hooks/useRequest';

src-web/pages/Workspaces.tsx

@@ -3,6 +3,7 @@ import { Heading } from '../components/Heading';
 import { VStack } from '../components/Stacks';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Workspaces(props: { path: string }) {
   const workspaces = useWorkspaces();
   return (

vite.config.ts

@@ -4,7 +4,7 @@ import { ViteRsw } from 'vite-plugin-rsw';
 import topLevelAwait from 'vite-plugin-top-level-await';
 
 // https://vitejs.dev/config/
-export default defineConfig({
+const config = defineConfig({
   plugins: [preact({ devToolsEnabled: true }), ViteRsw(), topLevelAwait()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
@@ -30,3 +30,5 @@ export default defineConfig({
     chunkSizeWarningLimit: Infinity,
   },
 });
+
+export default config;