From 592c1228f1cf4c375686d9ac7c3564aebf94b8ca Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 4 Jan 2025 07:01:31 -0800
Subject: [PATCH] Fix tauri event listener hook

---
 src-web/components/Sidebar.tsx             |  4 +--
 src-web/components/core/Dialog.tsx         |  4 +--
 src-web/hooks/useCommands.ts               | 13 ---------
 src-web/hooks/useCreateCookieJar.ts        | 10 -------
 src-web/hooks/useCreateEnvironment.ts      |  8 ------
 src-web/hooks/useCreateGrpcRequest.ts      |  7 -----
 src-web/hooks/useCreateHttpRequest.ts      |  7 -----
 src-web/hooks/useDeleteActiveWorkspace.tsx |  8 ------
 src-web/hooks/useDeleteAnyGrpcRequest.tsx  | 12 +-------
 src-web/hooks/useDeleteAnyHttpRequest.tsx  | 12 +-------
 src-web/hooks/useListenToTauriEvent.ts     | 33 +++++++---------------
 src-web/main.tsx                           | 17 +++++++++--
 12 files changed, 30 insertions(+), 105 deletions(-)

diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index c39f23b5..af049004 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -39,7 +39,7 @@ export type SidebarModel = Folder | GrpcRequest | HttpRequest;
 
 export function Sidebar({ className }: Props) {
   const [hidden, setHidden] = useSidebarHidden();
-  const sidebarRef = useRef<HTMLLIElement>(null);
+  const sidebarRef = useRef<HTMLElement>(null);
   const activeWorkspace = useActiveWorkspace();
   const httpResponses = useHttpResponses();
   const grpcConnections = useGrpcConnections();
@@ -326,7 +326,7 @@ export function Sidebar({ className }: Props) {
 
   return (
     <aside
-      aria-hidden={hidden}
+      aria-hidden={hidden ?? undefined}
       ref={sidebarRef}
       onFocus={handleFocus}
       onBlur={handleBlur}
diff --git a/src-web/components/core/Dialog.tsx b/src-web/components/core/Dialog.tsx
index 398a20e8..d37df665 100644
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -87,9 +87,9 @@ export function Dialog({
             )}
 
             {description ? (
-              <p className="px-6 text-text-subtle" id={descriptionId}>
+              <div className="px-6 text-text-subtle" id={descriptionId}>
                 {description}
-              </p>
+              </div>
             ) : (
               <span />
             )}
diff --git a/src-web/hooks/useCommands.ts b/src-web/hooks/useCommands.ts
index 12fad602..b28d1bd8 100644
--- a/src-web/hooks/useCommands.ts
+++ b/src-web/hooks/useCommands.ts
@@ -2,15 +2,11 @@ import { useNavigate } from '@tanstack/react-router';
 import type { Folder, Workspace } from '@yaakapp-internal/models';
 import { useMemo } from 'react';
 import { trackEvent } from '../lib/analytics';
-import { jotaiStore } from '../lib/jotai';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
 import { createFastMutation } from './useFastMutation';
-import { foldersAtom } from './useFolders';
 import { usePrompt } from './usePrompt';
-import { updateModelList } from './useSyncModelStores';
 import { useToast } from './useToast';
-import { workspacesAtom } from './useWorkspaces';
 
 function makeCommands({
   navigate,
@@ -25,9 +21,6 @@ function makeCommands({
       mutationKey: ['create_workspace'],
       mutationFn: (patch) => invokeCmd<Workspace>('cmd_update_workspace', { workspace: patch }),
       onSuccess: async (workspace) => {
-        // Optimistic update
-        jotaiStore.set(workspacesAtom, updateModelList(workspace));
-
         await navigate({
           to: '/workspaces/$workspaceId',
           params: { workspaceId: workspace.id },
@@ -65,12 +58,6 @@ function makeCommands({
         patch.sortPriority = patch.sortPriority || -Date.now();
         return invokeCmd<Folder>('cmd_update_folder', { folder: { workspaceId, ...patch } });
       },
-      onSuccess: async (folder) => {
-        if (folder == null) return;
-
-        // Optimistic update
-        jotaiStore.set(foldersAtom, updateModelList(folder));
-      },
       onSettled: () => trackEvent('folder', 'create'),
     }),
   } as const;
diff --git a/src-web/hooks/useCreateCookieJar.ts b/src-web/hooks/useCreateCookieJar.ts
index 897b32f9..ed408f6a 100644
--- a/src-web/hooks/useCreateCookieJar.ts
+++ b/src-web/hooks/useCreateCookieJar.ts
@@ -1,16 +1,12 @@
 import type { CookieJar } from '@yaakapp-internal/models';
-import { useSetAtom } from 'jotai';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
-import { cookieJarsAtom } from './useCookieJars';
 import { useFastMutation } from './useFastMutation';
 import { usePrompt } from './usePrompt';
-import { updateModelList } from './useSyncModelStores';
 
 export function useCreateCookieJar() {
   const prompt = usePrompt();
-  const setCookieJars = useSetAtom(cookieJarsAtom);
 
   return useFastMutation<CookieJar | null>({
     mutationKey: ['create_cookie_jar'],
@@ -31,12 +27,6 @@ export function useCreateCookieJar() {
 
       return invokeCmd('cmd_create_cookie_jar', { workspaceId, name });
     },
-    onSuccess: (cookieJar) => {
-      if (cookieJar == null) return;
-
-      // Optimistic update
-      setCookieJars(updateModelList(cookieJar));
-    },
     onSettled: () => trackEvent('cookie_jar', 'create'),
   });
 }
diff --git a/src-web/hooks/useCreateEnvironment.ts b/src-web/hooks/useCreateEnvironment.ts
index d50d2814..24057c37 100644
--- a/src-web/hooks/useCreateEnvironment.ts
+++ b/src-web/hooks/useCreateEnvironment.ts
@@ -1,18 +1,14 @@
 import type { Environment } from '@yaakapp-internal/models';
-import { useSetAtom } from 'jotai';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveEnvironment } from './useActiveEnvironment';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
-import { environmentsAtom } from './useEnvironments';
 import { useFastMutation } from './useFastMutation';
 import { usePrompt } from './usePrompt';
-import { updateModelList } from './useSyncModelStores';
 
 export function useCreateEnvironment() {
   const [, setActiveEnvironmentId] = useActiveEnvironment();
   const prompt = usePrompt();
-  const setEnvironments = useSetAtom(environmentsAtom);
 
   return useFastMutation<Environment | null, unknown, Environment | null>({
     mutationKey: ['create_environment'],
@@ -43,10 +39,6 @@ export function useCreateEnvironment() {
     onSettled: () => trackEvent('environment', 'create'),
     onSuccess: async (environment) => {
       if (environment == null) return;
-
-      // Optimistic update
-      setEnvironments(updateModelList(environment));
-
       await setActiveEnvironmentId(environment.id);
     },
   });
diff --git a/src-web/hooks/useCreateGrpcRequest.ts b/src-web/hooks/useCreateGrpcRequest.ts
index 4aaf89a3..6594f81b 100644
--- a/src-web/hooks/useCreateGrpcRequest.ts
+++ b/src-web/hooks/useCreateGrpcRequest.ts
@@ -1,17 +1,13 @@
 import { useNavigate } from '@tanstack/react-router';
 import type { GrpcRequest } from '@yaakapp-internal/models';
-import { useSetAtom } from 'jotai';
 import { trackEvent } from '../lib/analytics';
 import { jotaiStore } from '../lib/jotai';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveRequest } from './useActiveRequest';
 import { activeWorkspaceAtom } from './useActiveWorkspace';
 import { useFastMutation } from './useFastMutation';
-import { grpcRequestsAtom } from './useGrpcRequests';
-import { updateModelList } from './useSyncModelStores';
 
 export function useCreateGrpcRequest() {
-  const setGrpcRequests = useSetAtom(grpcRequestsAtom);
   const navigate = useNavigate();
 
   return useFastMutation<
@@ -44,9 +40,6 @@ export function useCreateGrpcRequest() {
     },
     onSettled: () => trackEvent('grpc_request', 'create'),
     onSuccess: async (request) => {
-      // Optimistic update
-      setGrpcRequests(updateModelList(request));
-
       await navigate({
         to: '/workspaces/$workspaceId/requests/$requestId',
         params: {
diff --git a/src-web/hooks/useCreateHttpRequest.ts b/src-web/hooks/useCreateHttpRequest.ts
index 6c0436e5..3fea71dd 100644
--- a/src-web/hooks/useCreateHttpRequest.ts
+++ b/src-web/hooks/useCreateHttpRequest.ts
@@ -1,16 +1,12 @@
 import { useNavigate } from '@tanstack/react-router';
 import type { HttpRequest } from '@yaakapp-internal/models';
-import { useSetAtom } from 'jotai/index';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveRequest } from './useActiveRequest';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
 import { useFastMutation } from './useFastMutation';
-import { httpRequestsAtom } from './useHttpRequests';
-import { updateModelList } from './useSyncModelStores';
 
 export function useCreateHttpRequest() {
-  const setHttpRequests = useSetAtom(httpRequestsAtom);
   const navigate = useNavigate();
 
   return useFastMutation<HttpRequest, unknown, Partial<HttpRequest>>({
@@ -38,9 +34,6 @@ export function useCreateHttpRequest() {
     },
     onSettled: () => trackEvent('http_request', 'create'),
     onSuccess: async (request) => {
-      // Optimistic update
-      setHttpRequests(updateModelList(request));
-
       await navigate({
         to: '/workspaces/$workspaceId/requests/$requestId',
         params: { workspaceId: request.workspaceId, requestId: request.id },
diff --git a/src-web/hooks/useDeleteActiveWorkspace.tsx b/src-web/hooks/useDeleteActiveWorkspace.tsx
index 2746f3f1..243db508 100644
--- a/src-web/hooks/useDeleteActiveWorkspace.tsx
+++ b/src-web/hooks/useDeleteActiveWorkspace.tsx
@@ -1,18 +1,14 @@
 import { useNavigate } from '@tanstack/react-router';
 import type { Workspace } from '@yaakapp-internal/models';
-import { useSetAtom } from 'jotai';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveWorkspace } from './useActiveWorkspace';
 import { useConfirm } from './useConfirm';
 import { useFastMutation } from './useFastMutation';
-import { removeModelById } from './useSyncModelStores';
-import { workspacesAtom } from './useWorkspaces';
 
 export function useDeleteActiveWorkspace() {
   const confirm = useConfirm();
-  const setWorkspaces = useSetAtom(workspacesAtom);
   const navigate = useNavigate();
 
   return useFastMutation<Workspace | null, string>({
@@ -35,10 +31,6 @@ export function useDeleteActiveWorkspace() {
     onSettled: () => trackEvent('workspace', 'delete'),
     onSuccess: async (workspace) => {
       if (workspace === null) return;
-
-      // Optimistic update
-      setWorkspaces(removeModelById(workspace));
-
       await navigate({ to: '/workspaces' });
     },
   });
diff --git a/src-web/hooks/useDeleteAnyGrpcRequest.tsx b/src-web/hooks/useDeleteAnyGrpcRequest.tsx
index c239e26f..e6f00133 100644
--- a/src-web/hooks/useDeleteAnyGrpcRequest.tsx
+++ b/src-web/hooks/useDeleteAnyGrpcRequest.tsx
@@ -1,18 +1,14 @@
-import { useFastMutation } from './useFastMutation';
 import type { GrpcRequest } from '@yaakapp-internal/models';
-import {useSetAtom} from "jotai";
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { getGrpcRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { useConfirm } from './useConfirm';
-import {grpcRequestsAtom} from "./useGrpcRequests";
-import {removeModelById} from "./useSyncModelStores";
+import { useFastMutation } from './useFastMutation';
 
 export function useDeleteAnyGrpcRequest() {
   const confirm = useConfirm();
-  const setGrpcRequests = useSetAtom(grpcRequestsAtom);
 
   return useFastMutation<GrpcRequest | null, string, string>({
     mutationKey: ['delete_any_grpc_request'],
@@ -33,12 +29,6 @@ export function useDeleteAnyGrpcRequest() {
       if (!confirmed) return null;
       return invokeCmd('cmd_delete_grpc_request', { requestId: id });
     },
-    onSuccess: (request) => {
-      if (request == null) return;
-
-      // Optimistic update
-      setGrpcRequests(removeModelById(request));
-    },
     onSettled: () => trackEvent('grpc_request', 'delete'),
   });
 }
diff --git a/src-web/hooks/useDeleteAnyHttpRequest.tsx b/src-web/hooks/useDeleteAnyHttpRequest.tsx
index 7ec1a7b5..2760548e 100644
--- a/src-web/hooks/useDeleteAnyHttpRequest.tsx
+++ b/src-web/hooks/useDeleteAnyHttpRequest.tsx
@@ -1,18 +1,14 @@
-import { useFastMutation } from './useFastMutation';
 import type { HttpRequest } from '@yaakapp-internal/models';
-import { useSetAtom } from 'jotai';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { getHttpRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { useConfirm } from './useConfirm';
-import { httpRequestsAtom } from './useHttpRequests';
-import { removeModelById } from './useSyncModelStores';
+import { useFastMutation } from './useFastMutation';
 
 export function useDeleteAnyHttpRequest() {
   const confirm = useConfirm();
-  const setHttpRequests = useSetAtom(httpRequestsAtom);
 
   return useFastMutation<HttpRequest | null, string, string>({
     mutationKey: ['delete_any_http_request'],
@@ -33,12 +29,6 @@ export function useDeleteAnyHttpRequest() {
       if (!confirmed) return null;
       return invokeCmd<HttpRequest>('cmd_delete_http_request', { requestId: id });
     },
-    onSuccess: (request) => {
-      if (request == null) return;
-
-      // Optimistic update
-      setHttpRequests(removeModelById(request));
-    },
     onSettled: () => trackEvent('http_request', 'delete'),
   });
 }
diff --git a/src-web/hooks/useListenToTauriEvent.ts b/src-web/hooks/useListenToTauriEvent.ts
index b5b51509..d99f12db 100644
--- a/src-web/hooks/useListenToTauriEvent.ts
+++ b/src-web/hooks/useListenToTauriEvent.ts
@@ -1,35 +1,22 @@
-import type { EventCallback, EventName } from '@tauri-apps/api/event';
-import { listen } from '@tauri-apps/api/event';
-import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
-import type { DependencyList } from 'react';
-import { useEffect } from 'react';
+import type {EventCallback, EventName} from '@tauri-apps/api/event';
+import {listen} from '@tauri-apps/api/event';
+import {getCurrentWebviewWindow} from '@tauri-apps/api/webviewWindow';
+import {useEffect} from 'react';
 
 /**
  * React hook to listen to a Tauri event.
  */
-export function useListenToTauriEvent<T>(
-  event: EventName,
-  fn: EventCallback<T>,
-  deps: DependencyList = [],
-) {
+export function useListenToTauriEvent<T>(event: EventName, fn: EventCallback<T>) {
   useEffect(() => {
-    let unMounted = false;
-    let unsubFn: (() => void) | undefined = undefined;
-
-    listen(
+    const unlisten = listen(
       event,
       fn,
       // Listen to `emit_all()` events or events specific to the current window
       { target: { label: getCurrentWebviewWindow().label, kind: 'Window' } },
-    ).then((unsub) => {
-      if (unMounted) unsub();
-      else unsubFn = unsub;
-    });
+    );
 
     return () => {
-      unMounted = true;
-      unsubFn?.();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [event, fn, ...deps]);
+      unlisten.then((fn) => fn());
+    }
+  }, [event, fn]);
 }
diff --git a/src-web/main.tsx b/src-web/main.tsx
index 13e43b07..555f6447 100644
--- a/src-web/main.tsx
+++ b/src-web/main.tsx
@@ -20,9 +20,20 @@ if (osType !== 'macos') {
 }
 
 window.addEventListener('keydown', (e) => {
-  // Hack to not go back in history on backspace. Check for document body
-  // or else it will prevent backspace in input fields.
-  if (e.key === 'Backspace' && e.target === document.body) e.preventDefault();
+  const rx = /input|select|textarea/i;
+
+  const target = e.target;
+  if (e.key !== 'Backspace') return;
+  if (!(target instanceof Element)) return;
+  if (target.getAttribute('contenteditable') !== null) return;
+
+  if (
+    !rx.test(target.tagName) ||
+    ('disabled' in target && target.disabled) ||
+    ('readOnly' in target && target.readOnly)
+  ) {
+    e.preventDefault();
+  }
 });
 
 console.log('Creating React root');