Prevent sidebar re-render on every keypress (#152)

src-web/hooks/useActiveRequest.ts

@@ -1,5 +1,6 @@
 import type { GrpcRequest, HttpRequest } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
+import {fallbackRequestName} from "../lib/fallbackRequestName";
 import {jotaiStore} from "../lib/jotai";
 import { activeRequestIdAtom } from './useActiveRequestId';
 import { grpcRequestsAtom } from './useGrpcRequests';
@@ -20,6 +21,11 @@ export function getActiveRequest() {
   return jotaiStore.get(activeRequestAtom);
 }
 
+export const activeRequestNameAtom = atom(get => {
+  const activeRequest = get(activeRequestAtom);
+  return fallbackRequestName(activeRequest);
+});
+
 export function useActiveRequest<T extends keyof TypeMap>(
   model?: T | undefined,
 ): TypeMap[T] | null {

src-web/hooks/useActiveWorkspace.ts

@@ -3,18 +3,18 @@ import type { Workspace } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai/index';
 import { useEffect } from 'react';
 import { jotaiStore } from '../lib/jotai';
-import { useWorkspaces } from './useWorkspaces';
+import { workspacesAtom } from './useWorkspaces';
 
 export const activeWorkspaceIdAtom = atom<string>();
 
-export function useActiveWorkspace(): Workspace | null {
-  const workspaceId = useActiveWorkspaceId();
-  const workspaces = useWorkspaces();
-  return workspaces.find((w) => w.id === workspaceId) ?? null;
-}
+export const activeWorkspaceAtom = atom<Workspace | null>((get) => {
+  const activeWorkspaceId = get(activeWorkspaceIdAtom);
+  const workspaces = get(workspacesAtom);
+  return workspaces.find((w) => w.id === activeWorkspaceId) ?? null;
+});
 
-function useActiveWorkspaceId(): string | null {
-  return useAtomValue(activeWorkspaceIdAtom) ?? null;
+export function useActiveWorkspace(): Workspace | null {
+  return useAtomValue(activeWorkspaceAtom);
 }
 
 export function getActiveWorkspaceId() {

src-web/hooks/useCreateDropdownItems.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import type { DropdownItem } from '../components/core/Dropdown';
 import { Icon } from '../components/core/Icon';
+import { generateId } from '../lib/generateId';
 import { BODY_TYPE_GRAPHQL } from '../lib/model_util';
 import { useCreateFolder } from './useCreateFolder';
 import { useCreateGrpcRequest } from './useCreateGrpcRequest';
@@ -36,7 +37,7 @@ export function useCreateDropdownItems({
             folderId,
             bodyType: BODY_TYPE_GRAPHQL,
             method: 'POST',
-            headers: [{ name: 'Content-Type', value: 'application/json' }],
+            headers: [{ name: 'Content-Type', value: 'application/json', id: generateId() }],
           }),
       },
       {

src-web/hooks/useCreateGrpcRequest.ts

@@ -2,15 +2,15 @@ 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 { useActiveWorkspace } from './useActiveWorkspace';
+import { activeWorkspaceAtom } from './useActiveWorkspace';
 import { useFastMutation } from './useFastMutation';
 import { grpcRequestsAtom } from './useGrpcRequests';
 import { updateModelList } from './useSyncModelStores';
 
 export function useCreateGrpcRequest() {
-  const workspace = useActiveWorkspace();
   const setGrpcRequests = useSetAtom(grpcRequestsAtom);
   const navigate = useNavigate();
 
@@ -21,6 +21,7 @@ export function useCreateGrpcRequest() {
   >({
     mutationKey: ['create_grpc_request'],
     mutationFn: async (patch) => {
+      const workspace = jotaiStore.get(activeWorkspaceAtom);
       if (workspace === null) {
         throw new Error("Cannot create grpc request when there's no active workspace");
       }
@@ -46,7 +47,7 @@ export function useCreateGrpcRequest() {
       // Optimistic update
       setGrpcRequests(updateModelList(request));
 
-      navigate({
+      await navigate({
         to: '/workspaces/$workspaceId/requests/$requestId',
         params: {
           workspaceId: request.workspaceId,

src-web/hooks/useImportQuerystring.ts

@@ -1,3 +1,4 @@
+import {generateId} from "../lib/generateId";
 import { useFastMutation } from './useFastMutation';
 import type { HttpUrlParameter } from '@yaakapp-internal/models';
 import { useToast } from './useToast';
@@ -27,6 +28,7 @@ export function useImportQuerystring(requestId: string) {
         name,
         value,
         enabled: true,
+        id: generateId(),
       }));
 
       await updateRequest.mutateAsync({

src-web/hooks/usePinnedHttpResponse.ts

@@ -1,10 +1,10 @@
-import type { HttpRequest, HttpResponse } from '@yaakapp-internal/models';
+import type { HttpResponse } from '@yaakapp-internal/models';
 import { useHttpResponses } from './useHttpResponses';
 import { useKeyValue } from './useKeyValue';
 import { useLatestHttpResponse } from './useLatestHttpResponse';
 
-export function usePinnedHttpResponse(activeRequest: HttpRequest) {
-  const latestResponse = useLatestHttpResponse(activeRequest.id);
+export function usePinnedHttpResponse(activeRequestId: string) {
+  const latestResponse = useLatestHttpResponse(activeRequestId);
   const { set, value: pinnedResponseId } = useKeyValue<string | null>({
     // Key on the latest response instead of activeRequest because responses change out of band of active request
     key: ['pinned_http_response_id', latestResponse?.id ?? 'n/a'],
@@ -12,7 +12,7 @@ export function usePinnedHttpResponse(activeRequest: HttpRequest) {
     namespace: 'global',
   });
   const allResponses = useHttpResponses();
-  const responses = allResponses.filter((r) => r.requestId === activeRequest.id);
+  const responses = allResponses.filter((r) => r.requestId === activeRequestId);
   const activeResponse: HttpResponse | null =
     responses.find((r) => r.id === pinnedResponseId) ?? latestResponse;