Move some stuff around

src-web/App.tsx

@@ -0,0 +1,89 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { listen } from '@tauri-apps/api/event';
+import { MotionConfig } from 'framer-motion';
+import { HelmetProvider } from 'react-helmet-async';
+import { AppRouter } from './components/AppRouter';
+import { requestsQueryKey } from './hooks/useRequest';
+import { responsesQueryKey } from './hooks/useResponses';
+import { DEFAULT_FONT_SIZE } from './lib/constants';
+import type { HttpRequest, HttpResponse } from './lib/models';
+import { convertDates } from './lib/models';
+
+const queryClient = new QueryClient();
+
+await listen('updated_request', ({ payload: request }: { payload: HttpRequest }) => {
+  queryClient.setQueryData(
+    requestsQueryKey(request.workspaceId),
+    (requests: HttpRequest[] = []) => {
+      const newRequests = [];
+      let found = false;
+      for (const r of requests) {
+        if (r.id === request.id) {
+          found = true;
+          newRequests.push(convertDates(request));
+        } else {
+          newRequests.push(r);
+        }
+      }
+      if (!found) {
+        newRequests.push(convertDates(request));
+      }
+      return newRequests;
+    },
+  );
+});
+
+await listen('deleted_request', ({ payload: request }: { payload: HttpRequest }) => {
+  queryClient.setQueryData(requestsQueryKey(request.workspaceId), (requests: HttpRequest[] = []) =>
+    requests.filter((r) => r.id !== request.id),
+  );
+});
+
+await listen('updated_response', ({ payload: response }: { payload: HttpResponse }) => {
+  queryClient.setQueryData(
+    responsesQueryKey(response.requestId),
+    (responses: HttpResponse[] = []) => {
+      const newResponses = [];
+      let found = false;
+      for (const r of responses) {
+        if (r.id === response.id) {
+          found = true;
+          newResponses.push(convertDates(response));
+        } else {
+          newResponses.push(r);
+        }
+      }
+      if (!found) {
+        newResponses.push(convertDates(response));
+      }
+      return newResponses;
+    },
+  );
+});
+
+await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => {
+  const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+
+  let newFontSize;
+  if (zoomDelta === 0) {
+    newFontSize = DEFAULT_FONT_SIZE;
+  } else if (zoomDelta > 0) {
+    newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5);
+  } else if (zoomDelta < 0) {
+    newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4);
+  }
+
+  document.documentElement.style.fontSize = `${newFontSize}px`;
+});
+
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MotionConfig transition={{ duration: 0.1 }}>
+        <HelmetProvider>
+          <AppRouter />
+        </HelmetProvider>
+      </MotionConfig>
+    </QueryClientProvider>
+  );
+}

src-web/components/AppRouter.tsx

@@ -1,6 +1,6 @@
 import { Router } from 'preact-router';
 import { Workspaces } from '../pages/Workspaces';
-import { Workspace } from '../Workspace';
+import { Workspace } from '../pages/Workspace';
 
 export function AppRouter() {
   return (

src-web/main.tsx

@@ -1,93 +1,9 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { listen } from '@tauri-apps/api/event';
-import { MotionConfig } from 'framer-motion';
 import { render } from 'preact';
-import { HelmetProvider } from 'react-helmet-async';
+import { App } from './App';
-import { AppRouter } from './components/AppRouter';
-import { requestsQueryKey } from './hooks/useRequest';
-import { responsesQueryKey } from './hooks/useResponses';
-import { DEFAULT_FONT_SIZE } from './lib/constants';
-import type { HttpRequest, HttpResponse } from './lib/models';
-import { convertDates } from './lib/models';
 import { setAppearance } from './lib/theme/window';
 import './main.css';
 
 setAppearance();
 
-const queryClient = new QueryClient();
+// root holds our app's root DOM Element:
-
+render(<App />, document.getElementById('root') as HTMLElement);
-await listen('updated_request', ({ payload: request }: { payload: HttpRequest }) => {
-  queryClient.setQueryData(
-    requestsQueryKey(request.workspaceId),
-    (requests: HttpRequest[] = []) => {
-      const newRequests = [];
-      let found = false;
-      for (const r of requests) {
-        if (r.id === request.id) {
-          found = true;
-          newRequests.push(convertDates(request));
-        } else {
-          newRequests.push(r);
-        }
-      }
-      if (!found) {
-        newRequests.push(convertDates(request));
-      }
-      return newRequests;
-    },
-  );
-});
-
-await listen('deleted_request', ({ payload: request }: { payload: HttpRequest }) => {
-  queryClient.setQueryData(requestsQueryKey(request.workspaceId), (requests: HttpRequest[] = []) =>
-    requests.filter((r) => r.id !== request.id),
-  );
-});
-
-await listen('updated_response', ({ payload: response }: { payload: HttpResponse }) => {
-  queryClient.setQueryData(
-    responsesQueryKey(response.requestId),
-    (responses: HttpResponse[] = []) => {
-      const newResponses = [];
-      let found = false;
-      for (const r of responses) {
-        if (r.id === response.id) {
-          found = true;
-          newResponses.push(convertDates(response));
-        } else {
-          newResponses.push(r);
-        }
-      }
-      if (!found) {
-        newResponses.push(convertDates(response));
-      }
-      return newResponses;
-    },
-  );
-});
-
-await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => {
-  const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-
-  let newFontSize;
-  if (zoomDelta === 0) {
-    newFontSize = DEFAULT_FONT_SIZE;
-  } else if (zoomDelta > 0) {
-    newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5);
-  } else if (zoomDelta < 0) {
-    newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4);
-  }
-
-  document.documentElement.style.fontSize = `${newFontSize}px`;
-});
-
-render(
-  <QueryClientProvider client={queryClient}>
-    <MotionConfig transition={{ duration: 0.1 }}>
-      <HelmetProvider>
-        <AppRouter />
-      </HelmetProvider>
-    </MotionConfig>
-  </QueryClientProvider>,
-  document.getElementById('root') as HTMLElement,
-);

src-web/pages/Workspace.tsx

@@ -1,11 +1,11 @@
 import classnames from 'classnames';
 import { useWindowSize } from 'react-use';
-import { RequestPane } from './components/RequestPane';
+import { RequestPane } from '../components/RequestPane';
-import { ResponsePane } from './components/ResponsePane';
+import { ResponsePane } from '../components/ResponsePane';
-import { Sidebar } from './components/Sidebar';
+import { Sidebar } from '../components/Sidebar';
-import { HStack } from './components/Stacks';
+import { HStack } from '../components/Stacks';
-import { WindowDragRegion } from './components/WindowDragRegion';
+import { WindowDragRegion } from '../components/WindowDragRegion';
-import { useRequests } from './hooks/useRequest';
+import { useRequests } from '../hooks/useRequest';
 
 type Params = {
   workspaceId: string;

tsconfig.json

@@ -16,7 +16,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
   },
   "include": [
     "src-web"