Optimized a few components

src-web/hooks/useActiveRequest.ts

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
 import type { HttpRequest } from '../lib/models';
+import { useActiveRequestId } from './useActiveRequestId';
 import { useRequests } from './useRequests';
 
 export function useActiveRequest(): HttpRequest | null {
   const requests = useRequests();
-  const { requestId } = useParams<{ requestId?: string }>();
+  const requestId = useActiveRequestId();
   const [activeRequest, setActiveRequest] = useState<HttpRequest | null>(null);
 
   useEffect(() => {

src-web/hooks/useActiveRequestId.ts

@@ -0,0 +1,6 @@
+import { useParams } from 'react-router-dom';
+
+export function useActiveRequestId(): string | null {
+  const { requestId } = useParams<{ requestId?: string }>();
+  return requestId ?? null;
+}

src-web/hooks/useActiveWorkspace.ts

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
 import type { Workspace } from '../lib/models';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useWorkspaces } from './useWorkspaces';
 
 export function useActiveWorkspace(): Workspace | null {
   const workspaces = useWorkspaces();
-  const { workspaceId } = useParams<{ workspaceId?: string }>();
+  const workspaceId = useActiveWorkspaceId();
   const [activeWorkspace, setActiveWorkspace] = useState<Workspace | null>(null);
 
   useEffect(() => {

src-web/hooks/useActiveWorkspaceId.ts

@@ -0,0 +1,6 @@
+import { useParams } from 'react-router-dom';
+
+export function useActiveWorkspaceId(): string | null {
+  const { workspaceId } = useParams<{ workspaceId?: string }>();
+  return workspaceId ?? null;
+}

src-web/hooks/useDeleteRequest.ts

@@ -1,18 +1,19 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import type { HttpRequest } from '../lib/models';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { requestsQueryKey } from './useRequests';
 
-export function useDeleteRequest(request: HttpRequest | null) {
+export function useDeleteRequest(id: string | null) {
+  const workspaceId = useActiveWorkspaceId();
   const queryClient = useQueryClient();
   return useMutation<void, string>({
     mutationFn: async () => {
-      if (!request) return;
-      await invoke('delete_request', { requestId: request.id });
+      if (id === null) return;
+      await invoke('delete_request', { requestId: id });
     },
     onSuccess: async () => {
-      if (!request) return;
-      await queryClient.invalidateQueries(requestsQueryKey(request.workspaceId));
+      if (workspaceId === null || id === null) return;
+      await queryClient.invalidateQueries(requestsQueryKey(workspaceId));
     },
   });
 }

src-web/hooks/useRequest.ts

@@ -0,0 +1,7 @@
+import type { HttpRequest } from '../lib/models';
+import { useRequests } from './useRequests';
+
+export function useRequest(id: string | null): HttpRequest | null {
+  const requests = useRequests();
+  return requests.find((r) => r.id === id) ?? null;
+}

src-web/hooks/useSendRequest.ts

@@ -1,18 +1,17 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import type { HttpRequest } from '../lib/models';
 import { responsesQueryKey } from './useResponses';
 
-export function useSendRequest(request: HttpRequest | null) {
+export function useSendRequest(id: string | null) {
   const queryClient = useQueryClient();
   return useMutation<void, string>({
     mutationFn: async () => {
-      if (request == null) return;
-      await invoke('send_request', { requestId: request.id });
+      if (id === null) return;
+      await invoke('send_request', { requestId: id });
     },
     onSuccess: async () => {
-      if (request == null) return;
-      await queryClient.invalidateQueries(responsesQueryKey(request.id));
+      if (id === null) return;
+      await queryClient.invalidateQueries(responsesQueryKey(id));
     },
   }).mutate;
 }

src-web/hooks/useTheme.ts

@@ -1,4 +1,3 @@
-import { app } from '@tauri-apps/api';
 import { useEffect } from 'react';
 import type { Appearance } from '../lib/theme/window';
 import {

src-web/hooks/useUpdateRequest.ts

@@ -1,8 +1,10 @@
 import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
+import { useRequest } from './useRequest';
 
-export function useUpdateRequest(request: HttpRequest | null) {
+export function useUpdateRequest(id: string | null) {
+  const request = useRequest(id);
   return useMutation<void, unknown, Partial<HttpRequest>>({
     mutationFn: async (patch) => {
       if (request == null) {