starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-24 10:21:15 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix performance related to having 100s of requests (#123)

Browse Source
This commit is contained in:
Gregory Schier
2024-10-08 15:16:57 -06:00
committed by GitHub
parent 4b7712df80
commit c7eccddac9
34 changed files with 456 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-web/components/App.tsx
View File

@@ -13,8 +13,10 @@ const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: true,
networkMode: 'offlineFirst',
refetchOnWindowFocus: true,
refetchOnReconnect: false,
refetchOnMount: false, // Don't refetch when a hook mounts
},
},
});

10
src-web/components/AppRouter.tsx
View File

@@ -1,6 +1,10 @@
import { lazy } from 'react';
import { createBrowserRouter, Navigate, RouterProvider, useParams } from 'react-router-dom';
import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
import { useGenerateThemeCss } from '../hooks/useGenerateThemeCss';
import { useSyncFontSizeSetting } from '../hooks/useSyncFontSizeSetting';
import { useSyncModelStores } from '../hooks/useSyncModelStores';
import { useSyncZoomSetting } from '../hooks/useSyncZoomSetting';
import { DefaultLayout } from './DefaultLayout';
import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
import RouteError from './RouteError';
@@ -50,6 +54,12 @@ const router = createBrowserRouter([
]);
export function AppRouter() {
// Add some global hooks that should remain persistent
useSyncModelStores();
useSyncZoomSetting();
useSyncFontSizeSetting();
useGenerateThemeCss();
return <RouterProvider router={router} />;
}

2
src-web/components/CookieDialog.tsx
View File

@@ -12,7 +12,7 @@ interface Props {
export const CookieDialog = function ({ cookieJarId }: Props) {
const updateCookieJar = useUpdateCookieJar(cookieJarId ?? null);
const cookieJars = useCookieJars().data ?? [];
const cookieJars = useCookieJars();
const cookieJar = cookieJars.find((c) => c.id === cookieJarId);
if (cookieJar == null) {

2
src-web/components/CookieDropdown.tsx
View File

@@ -12,7 +12,7 @@ import { InlineCode } from './core/InlineCode';
import { useDialog } from './DialogContext';
export function CookieDropdown() {
const cookieJars = useCookieJars().data ?? [];
const cookieJars = useCookieJars();
const [activeCookieJar, setActiveCookieJarId] = useActiveCookieJar();
const updateCookieJar = useUpdateCookieJar(activeCookieJar?.id ?? null);
const deleteCookieJar = useDeleteCookieJar(activeCookieJar ?? null);

2
src-web/components/DefaultLayout.tsx
View File

@@ -2,8 +2,8 @@ import classNames from 'classnames';
import { Outlet } from 'react-router-dom';
import { useOsInfo } from '../hooks/useOsInfo';
import { DialogProvider, Dialogs } from './DialogContext';
import { GlobalHooks } from './GlobalHooks';
import { ToastProvider, Toasts } from './ToastContext';
import { GlobalHooks } from './GlobalHooks';
export function DefaultLayout() {
const osInfo = useOsInfo();

200
src-web/components/GlobalHooks.tsx
View File

@@ -1,50 +1,17 @@
import { useQueryClient } from '@tanstack/react-query';
import { emit } from '@tauri-apps/api/event';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
import type { AnyModel } from '@yaakapp-internal/models';
import type { PromptTextRequest, PromptTextResponse } from '@yaakapp-internal/plugin';
import { useSetAtom } from 'jotai';
import { useEffect } from 'react';
import { useEnsureActiveCookieJar, useMigrateActiveCookieJarId } from '../hooks/useActiveCookieJar';
import { useEnsureActiveCookieJar } from '../hooks/useActiveCookieJar';
import { useActiveWorkspaceChangedToast } from '../hooks/useActiveWorkspaceChangedToast';
import { cookieJarsQueryKey } from '../hooks/useCookieJars';
import { useCopy } from '../hooks/useCopy';
import { environmentsAtom } from '../hooks/useEnvironments';
import { foldersQueryKey } from '../hooks/useFolders';
import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
import { grpcRequestsAtom } from '../hooks/useGrpcRequests';
import { useHotKey } from '../hooks/useHotKey';
import { httpRequestsAtom } from '../hooks/useHttpRequests';
import { httpResponsesQueryKey } from '../hooks/useHttpResponses';
import { keyValueQueryKey } from '../hooks/useKeyValue';
import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
import { useNotificationToast } from '../hooks/useNotificationToast';
import { pluginsAtom } from '../hooks/usePlugins';
import { usePrompt } from '../hooks/usePrompt';
import { useRecentCookieJars } from '../hooks/useRecentCookieJars';
import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
import { useRecentRequests } from '../hooks/useRecentRequests';
import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
import { settingsAtom, useSettings } from '../hooks/useSettings';
import { useSyncWorkspaceChildModels } from '../hooks/useSyncWorkspaceChildModels';
import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
import { workspacesAtom } from '../hooks/useWorkspaces';
import { useZoom } from '../hooks/useZoom';
import { extractKeyValue } from '../lib/keyValueStore';
import { modelsEq } from '../lib/model_util';
import { catppuccinMacchiato } from '../lib/theme/themes/catppuccin';
import { githubLight } from '../lib/theme/themes/github';
import { hotdogStandDefault } from '../lib/theme/themes/hotdog-stand';
import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
import { rosePineDefault } from '../lib/theme/themes/rose-pine';
import { yaakDark } from '../lib/theme/themes/yaak';
import { getThemeCSS } from '../lib/theme/window';
export interface ModelPayload {
model: AnyModel;
windowLabel: string;
}
export function GlobalHooks() {
// Include here so they always update, even if no component references them
@@ -52,136 +19,16 @@ export function GlobalHooks() {
useRecentEnvironments();
useRecentCookieJars();
useRecentRequests();
useSyncWorkspaceChildModels();
// Other useful things
useNotificationToast();
useActiveWorkspaceChangedToast();
useEnsureActiveCookieJar();
// TODO: Remove in future version
useMigrateActiveCookieJarId();
const toggleCommandPalette = useToggleCommandPalette();
useHotKey('command_palette.toggle', toggleCommandPalette);
const queryClient = useQueryClient();
const { wasUpdatedExternally } = useRequestUpdateKey(null);
const setSettings = useSetAtom(settingsAtom);
const setWorkspaces = useSetAtom(workspacesAtom);
const setPlugins = useSetAtom(pluginsAtom);
const setHttpRequests = useSetAtom(httpRequestsAtom);
const setGrpcRequests = useSetAtom(grpcRequestsAtom);
const setEnvironments = useSetAtom(environmentsAtom);
useListenToTauriEvent<ModelPayload>('upserted_model', ({ payload }) => {
console.log('Upserted model', payload.model);
const { model, windowLabel } = payload;
const queryKey =
model.model === 'http_response'
? httpResponsesQueryKey(model)
: model.model === 'folder'
? foldersQueryKey(model)
: model.model === 'grpc_connection'
? grpcConnectionsQueryKey(model)
: model.model === 'grpc_event'
? grpcEventsQueryKey(model)
: model.model === 'key_value'
? keyValueQueryKey(model)
: model.model === 'cookie_jar'
? cookieJarsQueryKey(model)
: null;
if (model.model === 'http_request' && windowLabel !== getCurrentWebviewWindow().label) {
wasUpdatedExternally(model.id);
}
const pushToFront = (['http_response', 'grpc_connection'] as AnyModel['model'][]).includes(
model.model,
);
if (shouldIgnoreModel(model, windowLabel)) return;
if (model.model === 'workspace') {
setWorkspaces(updateModelList(model, pushToFront));
} else if (model.model === 'plugin') {
setPlugins(updateModelList(model, pushToFront));
} else if (model.model === 'http_request') {
setHttpRequests(updateModelList(model, pushToFront));
} else if (model.model === 'grpc_request') {
setGrpcRequests(updateModelList(model, pushToFront));
} else if (model.model === 'environment') {
setEnvironments(updateModelList(model, pushToFront));
} else if (model.model === 'settings') {
setSettings(model);
} else if (queryKey != null) {
// TODO: Convert all models to use Jotai
queryClient.setQueryData(queryKey, (current: unknown) => {
if (model.model === 'key_value') {
// Special-case for KeyValue
return extractKeyValue(model);
}
if (Array.isArray(current)) {
return updateModelList(model, pushToFront)(current);
}
});
}
});
useListenToTauriEvent<ModelPayload>('deleted_model', ({ payload }) => {
const { model, windowLabel } = payload;
if (shouldIgnoreModel(model, windowLabel)) return;
console.log('Delete model', payload.model);
if (model.model === 'workspace') {
setWorkspaces(removeById(model));
} else if (model.model === 'plugin') {
setPlugins(removeById(model));
} else if (model.model === 'http_request') {
setHttpRequests(removeById(model));
} else if (model.model === 'http_response') {
queryClient.setQueryData(httpResponsesQueryKey(model), removeById(model));
} else if (model.model === 'folder') {
queryClient.setQueryData(foldersQueryKey(model), removeById(model));
} else if (model.model === 'environment') {
setEnvironments(removeById(model));
} else if (model.model === 'grpc_request') {
setGrpcRequests(removeById(model));
} else if (model.model === 'grpc_connection') {
queryClient.setQueryData(grpcConnectionsQueryKey(model), removeById(model));
} else if (model.model === 'grpc_event') {
queryClient.setQueryData(grpcEventsQueryKey(model), removeById(model));
} else if (model.model === 'key_value') {
queryClient.setQueryData(keyValueQueryKey(model), undefined);
} else if (model.model === 'cookie_jar') {
queryClient.setQueryData(cookieJarsQueryKey(model), undefined);
}
});
const settings = useSettings();
useEffect(() => {
if (settings == null) {
return;
}
const { interfaceScale, editorFontSize } = settings;
getCurrentWebviewWindow().setZoom(interfaceScale).catch(console.error);
document.documentElement.style.setProperty('--editor-font-size', `${editorFontSize}px`);
}, [settings]);
// Handle Zoom.
// Note, Mac handles it in the app menu, so need to also handle keyboard
// shortcuts for Windows/Linux
const zoom = useZoom();
useHotKey('app.zoom_in', zoom.zoomIn);
useListenToTauriEvent('zoom_in', zoom.zoomIn);
useHotKey('app.zoom_out', zoom.zoomOut);
useListenToTauriEvent('zoom_out', zoom.zoomOut);
useHotKey('app.zoom_reset', zoom.zoomReset);
useListenToTauriEvent('zoom_reset', zoom.zoomReset);
const prompt = usePrompt();
useListenToTauriEvent<{ replyId: string; args: PromptTextRequest }>(
'show_prompt',
@@ -192,46 +39,5 @@ export function GlobalHooks() {
},
);
const copy = useCopy();
useListenToTauriEvent('generate_theme_css', () => {
const themesCss = [
yaakDark,
monokaiProDefault,
rosePineDefault,
catppuccinMacchiato,
githubLight,
hotdogStandDefault,
]
.map(getThemeCSS)
.join('\n\n');
copy(themesCss);
});
return null;
}
function updateModelList<T extends AnyModel>(model: T, pushToFront: boolean) {
return (current: T[]): T[] => {
const index = current.findIndex((v) => modelsEq(v, model)) ?? -1;
if (index >= 0) {
return [...current.slice(0, index), model, ...current.slice(index + 1)];
} else {
return pushToFront ? [model, ...(current ?? [])] : [...(current ?? []), model];
}
};
}
function removeById<T extends { id: string }>(model: T) {
return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id) ?? [];
}
const shouldIgnoreModel = (payload: AnyModel, windowLabel: string) => {
if (windowLabel === getCurrentWebviewWindow().label) {
// Never ignore same-window updates
return false;
}
if (payload.model === 'key_value') {
return payload.namespace === 'no_sync';
}
return false;
};

2
src-web/components/GrpcConnectionLayout.tsx
View File

@@ -22,7 +22,7 @@ const emptyArray: string[] = [];
export function GrpcConnectionLayout({ style }: Props) {
const activeRequest = useActiveRequest('grpc_request');
const updateRequest = useUpdateAnyGrpcRequest();
const connections = useGrpcConnections(activeRequest?.id ?? null);
const connections = useGrpcConnections().filter((c) => c.requestId === activeRequest?.id);
const activeConnection = connections[0] ?? null;
const messages = useGrpcEvents(activeConnection?.id ?? null);
const protoFilesKv = useGrpcProtoFiles(activeRequest?.id ?? null);

63
src-web/components/Sidebar.tsx
View File

@@ -1,8 +1,10 @@
import type {
AnyModel,
Folder,
GrpcConnection,
GrpcRequest,
HttpRequest,
HttpResponse,
Workspace,
} from '@yaakapp-internal/models';
import classNames from 'classnames';
@@ -22,18 +24,19 @@ import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { useDuplicateGrpcRequest } from '../hooks/useDuplicateGrpcRequest';
import { useDuplicateHttpRequest } from '../hooks/useDuplicateHttpRequest';
import { useFolders } from '../hooks/useFolders';
import { useGrpcConnections } from '../hooks/useGrpcConnections';
import { useHotKey } from '../hooks/useHotKey';
import type { CallableHttpRequestAction } from '../hooks/useHttpRequestActions';
import { useHttpRequestActions } from '../hooks/useHttpRequestActions';
import { useHttpResponses } from '../hooks/useHttpResponses';
import { useKeyValue } from '../hooks/useKeyValue';
import { useLatestGrpcConnection } from '../hooks/useLatestGrpcConnection';
import { useLatestHttpResponse } from '../hooks/useLatestHttpResponse';
import { useMoveToWorkspace } from '../hooks/useMoveToWorkspace';
import { usePrompt } from '../hooks/usePrompt';
import { useRenameRequest } from '../hooks/useRenameRequest';
import { useRequests } from '../hooks/useRequests';
import { useScrollIntoView } from '../hooks/useScrollIntoView';
import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
import { useSendManyRequests } from '../hooks/useSendFolder';
import { useSendManyRequests } from '../hooks/useSendManyRequests';
import { useSidebarHidden } from '../hooks/useSidebarHidden';
import { useUpdateAnyFolder } from '../hooks/useUpdateAnyFolder';
import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
@@ -73,6 +76,9 @@ export function Sidebar({ className }: Props) {
const folders = useFolders();
const requests = useRequests();
const activeWorkspace = useActiveWorkspace();
const httpRequestActions = useHttpRequestActions();
const httpResponses = useHttpResponses();
const grpcConnections = useGrpcConnections();
const duplicateHttpRequest = useDuplicateHttpRequest({
id: activeRequest?.id ?? null,
navigateAfter: true,
@@ -453,6 +459,9 @@ export function Sidebar({ className }: Props) {
selectedId={selectedId}
selectedTree={selectedTree}
isCollapsed={isCollapsed}
httpRequestActions={httpRequestActions}
httpResponses={httpResponses}
grpcConnections={grpcConnections}
tree={tree}
focused={hasFocus}
draggingId={draggingId}
@@ -483,6 +492,9 @@ interface SidebarItemsProps {
handleDragStart: (id: string) => void;
onSelect: (requestId: string) => void;
isCollapsed: (id: string) => boolean;
httpRequestActions: CallableHttpRequestAction[];
httpResponses: HttpResponse[];
grpcConnections: GrpcConnection[];
}
function SidebarItems({
@@ -500,6 +512,9 @@ function SidebarItems({
handleEnd,
handleMove,
handleDragStart,
httpRequestActions,
httpResponses,
grpcConnections,
}: SidebarItemsProps) {
return (
<VStack
@@ -537,6 +552,11 @@ function SidebarItems({
/>
)
}
httpRequestActions={httpRequestActions}
latestHttpResponse={httpResponses.find((r) => r.requestId === child.item.id) ?? null}
latestGrpcConnection={
grpcConnections.find((c) => c.requestId === child.item.id) ?? null
}
onMove={handleMove}
onEnd={handleEnd}
onSelect={onSelect}
@@ -549,20 +569,23 @@ function SidebarItems({
!isCollapsed(child.item.id) &&
draggingId !== child.item.id && (
<SidebarItems
treeParentMap={treeParentMap}
tree={child}
isCollapsed={isCollapsed}
draggingId={draggingId}
hoveredTree={hoveredTree}
hoveredIndex={hoveredIndex}
focused={focused}
activeId={activeId}
draggingId={draggingId}
focused={focused}
handleDragStart={handleDragStart}
handleEnd={handleEnd}
handleMove={handleMove}
hoveredIndex={hoveredIndex}
hoveredTree={hoveredTree}
httpRequestActions={httpRequestActions}
httpResponses={httpResponses}
grpcConnections={grpcConnections}
isCollapsed={isCollapsed}
onSelect={onSelect}
selectedId={selectedId}
selectedTree={selectedTree}
onSelect={onSelect}
handleMove={handleMove}
handleEnd={handleEnd}
handleDragStart={handleDragStart}
tree={child}
treeParentMap={treeParentMap}
/>
)}
</SidebarItem>
@@ -590,7 +613,9 @@ type SidebarItemProps = {
onDragStart: (id: string) => void;
children?: ReactNode;
child: TreeNode;
} & Pick<SidebarItemsProps, 'isCollapsed' | 'onSelect'>;
latestHttpResponse: HttpResponse | null;
latestGrpcConnection: GrpcConnection | null;
} & Pick<SidebarItemsProps, 'isCollapsed' | 'onSelect' | 'httpRequestActions'>;
type DragItem = {
id: string;
@@ -612,6 +637,9 @@ function SidebarItem({
selected,
itemFallbackName,
useProminentStyles,
latestHttpResponse,
latestGrpcConnection,
httpRequestActions,
children,
}: SidebarItemProps) {
const ref = useRef<HTMLLIElement>(null);
@@ -659,14 +687,9 @@ function SidebarItem({
const renameRequest = useRenameRequest(itemId);
const duplicateHttpRequest = useDuplicateHttpRequest({ id: itemId, navigateAfter: true });
const duplicateGrpcRequest = useDuplicateGrpcRequest({ id: itemId, navigateAfter: true });
const httpRequestActions = useHttpRequestActions();
const sendRequest = useSendAnyHttpRequest();
const moveToWorkspace = useMoveToWorkspace(itemId);
const sendManyRequests = useSendManyRequests();
const latestHttpResponse = useLatestHttpResponse(itemModel === 'http_request' ? itemId : null);
const latestGrpcConnection = useLatestGrpcConnection(
itemModel === 'grpc_request' ? itemId : null,
);
const updateHttpRequest = useUpdateAnyHttpRequest();
const workspaces = useWorkspaces();
const updateGrpcRequest = useUpdateAnyGrpcRequest();

2
src-web/font-size.ts
View File

@@ -1,6 +1,6 @@
// Listen for settings changes, the re-compute theme
import { listen } from '@tauri-apps/api/event';
import type { ModelPayload } from './components/GlobalHooks';
import type { ModelPayload } from './hooks/useSyncModelStores';
import { getSettings } from './lib/store';
function setFontSizeOnDocument(fontSize: number) {

43
src-web/hooks/useActiveCookieJar.ts
View File

@@ -1,8 +1,6 @@
import { useCallback, useEffect, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useActiveWorkspace } from './useActiveWorkspace';
import { useCookieJars } from './useCookieJars';
import { useKeyValue } from './useKeyValue';
export const QUERY_COOKIE_JAR_ID = 'cookie_jar_id';
@@ -11,9 +9,8 @@ export function useActiveCookieJar() {
const cookieJars = useCookieJars();
const activeCookieJar = useMemo(() => {
if (cookieJars.data == null) return undefined;
return cookieJars.data.find((cookieJar) => cookieJar.id === activeCookieJarId) ?? null;
}, [activeCookieJarId, cookieJars.data]);
return cookieJars.find((cookieJar) => cookieJar.id === activeCookieJarId) ?? null;
}, [activeCookieJarId, cookieJars]);
return [activeCookieJar ?? null, setActiveCookieJarId] as const;
}
@@ -22,13 +19,11 @@ export function useEnsureActiveCookieJar() {
const cookieJars = useCookieJars();
const [activeCookieJarId, setActiveCookieJarId] = useActiveCookieJarId();
useEffect(() => {
if (cookieJars.data == null) return;
if (cookieJars.data.find((j) => j.id === activeCookieJarId)) {
if (cookieJars.find((j) => j.id === activeCookieJarId)) {
return; // There's an active jar
}
const firstJar = cookieJars.data[0];
const firstJar = cookieJars[0];
if (firstJar == null) {
console.log("Workspace doesn't have any cookie jars to activate");
return;
@@ -37,35 +32,7 @@ export function useEnsureActiveCookieJar() {
// There's no active jar, so set it to the first one
console.log('Setting active cookie jar to', firstJar.id);
setActiveCookieJarId(firstJar.id);
}, [activeCookieJarId, cookieJars, cookieJars.data, setActiveCookieJarId]);
}
export function useMigrateActiveCookieJarId() {
const workspace = useActiveWorkspace();
const [, setActiveCookieJarId] = useActiveCookieJarId();
const {
set: setLegacyActiveCookieJarId,
value: legacyActiveCookieJarId,
isLoading: isLoadingLegacyActiveCookieJarId,
} = useKeyValue<string | null>({
namespace: 'global',
key: ['activeCookieJar', workspace?.id ?? 'n/a'],
fallback: null,
});
useEffect(() => {
if (legacyActiveCookieJarId == null || isLoadingLegacyActiveCookieJarId) return;
console.log('Migrating active cookie jar ID to query param', legacyActiveCookieJarId);
setActiveCookieJarId(legacyActiveCookieJarId);
setLegacyActiveCookieJarId(null).catch(console.error);
}, [
workspace,
isLoadingLegacyActiveCookieJarId,
legacyActiveCookieJarId,
setActiveCookieJarId,
setLegacyActiveCookieJarId,
]);
}, [activeCookieJarId, cookieJars, setActiveCookieJarId]);
}
function useActiveCookieJarId() {

20
src-web/hooks/useCookieJars.ts
View File

@@ -1,22 +1,8 @@
import { useQuery } from '@tanstack/react-query';
import type { CookieJar } from '@yaakapp-internal/models';
import { invokeCmd } from '../lib/tauri';
import { useActiveWorkspace } from './useActiveWorkspace';
import { atom, useAtomValue } from 'jotai';
export function cookieJarsQueryKey({ workspaceId }: { workspaceId: string }) {
return ['cookie_jars', { workspaceId }];
}
export const cookieJarsAtom = atom<CookieJar[]>([]);
export function useCookieJars() {
const workspace = useActiveWorkspace();
return useQuery({
enabled: workspace != null,
queryKey: cookieJarsQueryKey({ workspaceId: workspace?.id ?? 'n/a' }),
queryFn: async () => {
if (workspace == null) return [];
return (await invokeCmd('cmd_list_cookie_jars', {
workspaceId: workspace.id,
})) as CookieJar[];
},
});
return useAtomValue(cookieJarsAtom);
}

17
src-web/hooks/useEnvironments.ts
View File

@@ -1,20 +1,9 @@
import type { Environment } from '@yaakapp-internal/models';
import { atom, useAtom } from 'jotai/index';
import { useEffect } from 'react';
import { invokeCmd } from '../lib/tauri';
import { useActiveWorkspace } from './useActiveWorkspace';
import { useAtomValue } from 'jotai';
import { atom } from 'jotai/index';
export const environmentsAtom = atom<Environment[]>([]);
export function useEnvironments() {
const [items, setItems] = useAtom(environmentsAtom);
const workspace = useActiveWorkspace();
// Fetch new requests when workspace changes
useEffect(() => {
if (workspace == null) return;
invokeCmd<Environment[]>('cmd_list_environments', { workspaceId: workspace.id }).then(setItems);
}, [setItems, workspace]);
return items;
return useAtomValue(environmentsAtom);
}

21
src-web/hooks/useFolders.ts
View File

@@ -1,22 +1,9 @@
import { useQuery } from '@tanstack/react-query';
import type { Folder } from '@yaakapp-internal/models';
import { invokeCmd } from '../lib/tauri';
import { useActiveWorkspace } from './useActiveWorkspace';
import { useAtomValue } from 'jotai';
import { atom } from 'jotai/index';
export function foldersQueryKey({ workspaceId }: { workspaceId: string }) {
return ['folders', { workspaceId }];
}
export const foldersAtom = atom<Folder[]>([]);
export function useFolders() {
const workspace = useActiveWorkspace();
return (
useQuery({
enabled: workspace != null,
queryKey: foldersQueryKey({ workspaceId: workspace?.id ?? 'n/a' }),
queryFn: async () => {
if (workspace == null) return [];
return (await invokeCmd('cmd_list_folders', { workspaceId: workspace.id })) as Folder[];
},
}).data ?? []
);
return useAtomValue(foldersAtom);
}

26
src-web/hooks/useGenerateThemeCss.ts Normal file
View File

@@ -0,0 +1,26 @@
import { catppuccinMacchiato } from '../lib/theme/themes/catppuccin';
import { githubLight } from '../lib/theme/themes/github';
import { hotdogStandDefault } from '../lib/theme/themes/hotdog-stand';
import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
import { rosePineDefault } from '../lib/theme/themes/rose-pine';
import { yaakDark } from '../lib/theme/themes/yaak';
import { getThemeCSS } from '../lib/theme/window';
import { useCopy } from './useCopy';
import { useListenToTauriEvent } from './useListenToTauriEvent';
export function useGenerateThemeCss() {
const copy = useCopy();
useListenToTauriEvent('generate_theme_css', () => {
const themesCss = [
yaakDark,
monokaiProDefault,
rosePineDefault,
catppuccinMacchiato,
githubLight,
hotdogStandDefault,
]
.map(getThemeCSS)
.join('\n\n');
copy(themesCss);
});
}

24
src-web/hooks/useGrpcConnections.ts
View File

@@ -1,24 +1,8 @@
import { useQuery } from '@tanstack/react-query';
import type { GrpcConnection } from '@yaakapp-internal/models';
import { invokeCmd } from '../lib/tauri';
import { atom, useAtomValue } from 'jotai/index';
export function grpcConnectionsQueryKey({ requestId }: { requestId: string }) {
return ['grpc_connections', { requestId }];
}
export const grpcConnectionsAtom = atom<GrpcConnection[]>([]);
export function useGrpcConnections(requestId: string | null) {
return (
useQuery<GrpcConnection[]>({
enabled: requestId !== null,
initialData: [],
queryKey: grpcConnectionsQueryKey({ requestId: requestId ?? 'n/a' }),
queryFn: async () => {
if (requestId == null) return [];
return (await invokeCmd('cmd_list_grpc_connections', {
requestId,
limit: 200,
})) as GrpcConnection[];
},
}).data ?? []
);
export function useGrpcConnections() {
return useAtomValue(grpcConnectionsAtom);
}

18
src-web/hooks/useGrpcRequests.ts
View File

@@ -1,22 +1,8 @@
import type { GrpcRequest } from '@yaakapp-internal/models';
import { atom, useAtom } from 'jotai';
import { useEffect } from 'react';
import { invokeCmd } from '../lib/tauri';
import { useActiveWorkspace } from './useActiveWorkspace';
import { atom, useAtomValue } from 'jotai';
export const grpcRequestsAtom = atom<GrpcRequest[]>([]);
export function useGrpcRequests() {
const [items, setItems] = useAtom(grpcRequestsAtom);
const workspace = useActiveWorkspace();
// Fetch new requests when workspace changes
useEffect(() => {
if (workspace == null) return;
invokeCmd<GrpcRequest[]>('cmd_list_grpc_requests', { workspaceId: workspace.id }).then(
setItems,
);
}, [setItems, workspace]);
return items;
return useAtomValue(grpcRequestsAtom);
}

12
src-web/hooks/useHttpRequestActions.ts
View File

@@ -3,10 +3,15 @@ import type { HttpRequest } from '@yaakapp-internal/models';
import type {
CallHttpRequestActionRequest,
GetHttpRequestActionsResponse,
HttpRequestAction,
} from '@yaakapp-internal/plugin';
import { invokeCmd } from '../lib/tauri';
import { usePluginsKey } from './usePlugins';
export type CallableHttpRequestAction = Pick<HttpRequestAction, 'key' | 'label' | 'icon'> & {
call: (httpRequest: HttpRequest) => Promise<void>;
};
export function useHttpRequestActions() {
const pluginsKey = usePluginsKey();
@@ -20,7 +25,7 @@ export function useHttpRequestActions() {
},
});
return (
const actions: CallableHttpRequestAction[] =
httpRequestActions.data?.flatMap((r) =>
r.actions.map((a) => ({
key: a.key,
@@ -35,6 +40,7 @@ export function useHttpRequestActions() {
await invokeCmd('cmd_call_http_request_action', { req: payload });
},
})),
) ?? []
);
) ?? [];
return actions;
}

17
src-web/hooks/useHttpRequests.ts
View File

@@ -1,21 +1,8 @@
import type { HttpRequest } from '@yaakapp-internal/models';
import { atom, useAtom } from 'jotai';
import { useEffect } from 'react';
import { invokeCmd } from '../lib/tauri';
import { useActiveWorkspace } from './useActiveWorkspace';
import { atom, useAtomValue } from 'jotai';
export const httpRequestsAtom = atom<HttpRequest[]>([]);
export function useHttpRequests() {
const [items, setItems] = useAtom(httpRequestsAtom);
const workspace = useActiveWorkspace();
useEffect(() => {
if (workspace == null) return;
invokeCmd<HttpRequest[]>('cmd_list_http_requests', { workspaceId: workspace.id }).then(
setItems,
);
}, [setItems, workspace]);
return items;
return useAtomValue(httpRequestsAtom);
}

25
src-web/hooks/useHttpResponses.ts
View File

@@ -1,24 +1,9 @@
import { useQuery } from '@tanstack/react-query';
import type { HttpResponse } from '@yaakapp-internal/models';
import { invokeCmd } from '../lib/tauri';
import { useAtomValue } from 'jotai';
import { atom } from 'jotai/index';
export function httpResponsesQueryKey({ requestId }: { requestId: string }) {
return ['http_responses', { requestId }];
}
export const httpResponsesAtom = atom<HttpResponse[]>([]);
export function useHttpResponses(requestId: string | null) {
return (
useQuery<HttpResponse[]>({
enabled: requestId !== null,
initialData: [],
queryKey: httpResponsesQueryKey({ requestId: requestId ?? 'n/a' }),
queryFn: async () => {
if (requestId == null) return [];
return (await invokeCmd('cmd_list_http_responses', {
requestId,
limit: 200,
})) as HttpResponse[];
},
}).data ?? []
);
export function useHttpResponses() {
return useAtomValue(httpResponsesAtom);
}

3
src-web/hooks/useLatestGrpcConnection.ts
View File

@@ -2,6 +2,5 @@ import type { GrpcConnection } from '@yaakapp-internal/models';
import { useGrpcConnections } from './useGrpcConnections';
export function useLatestGrpcConnection(requestId: string | null): GrpcConnection | null {
const connections = useGrpcConnections(requestId);
return connections[0] ?? null;
return useGrpcConnections().find((c) => c.requestId === requestId) ?? null;
}

3
src-web/hooks/useLatestHttpResponse.ts
View File

@@ -2,6 +2,5 @@ import type { HttpResponse } from '@yaakapp-internal/models';
import { useHttpResponses } from './useHttpResponses';
export function useLatestHttpResponse(requestId: string | null): HttpResponse | null {
const responses = useHttpResponses(requestId);
return responses[0] ?? null;
return useHttpResponses().find((r) => r.requestId === requestId) ?? null;
}

2
src-web/hooks/usePinnedGrpcConnection.ts
View File

@@ -11,7 +11,7 @@ export function usePinnedGrpcConnection(activeRequest: GrpcRequest) {
fallback: null,
namespace: 'global',
});
const connections = useGrpcConnections(activeRequest.id);
const connections = useGrpcConnections().filter((c) => c.requestId === activeRequest.id);
const activeConnection: GrpcConnection | null =
connections.find((r) => r.id === pinnedConnectionId) ?? latestConnection;

5
src-web/hooks/usePinnedHttpResponse.ts
View File

@@ -6,12 +6,13 @@ import { useLatestHttpResponse } from './useLatestHttpResponse';
export function usePinnedHttpResponse(activeRequest: HttpRequest) {
const latestResponse = useLatestHttpResponse(activeRequest.id);
const { set, value: pinnedResponseId } = useKeyValue<string | null>({
// Key on latest response instead of activeRequest because responses change out of band of active request
// 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'],
fallback: null,
namespace: 'global',
});
const responses = useHttpResponses(activeRequest.id);
const allResponses = useHttpResponses();
const responses = allResponses.filter((r) => r.requestId === activeRequest.id);
const activeResponse: HttpResponse | null =
responses.find((r) => r.id === pinnedResponseId) ?? latestResponse;

2
src-web/hooks/useRecentCookieJars.ts
View File

@@ -31,7 +31,7 @@ export function useRecentCookieJars() {
}, [activeCookieJarId]);
const onlyValidIds = useMemo(
() => kv.value?.filter((id) => cookieJars.data?.some((e) => e.id === id)) ?? [],
() => kv.value?.filter((id) => cookieJars.some((e) => e.id === id)) ?? [],
[kv.value, cookieJars],
);

7
src-web/hooks/useSendAnyHttpRequest.ts
View File

@@ -1,21 +1,20 @@
import { useMutation } from '@tanstack/react-query';
import type { HttpResponse } from '@yaakapp-internal/models';
import { trackEvent } from '../lib/analytics';
import { getHttpRequest } from '../lib/store';
import { invokeCmd } from '../lib/tauri';
import { useActiveCookieJar } from './useActiveCookieJar';
import { useActiveEnvironment } from './useActiveEnvironment';
import { useAlert } from './useAlert';
import { useHttpRequests } from './useHttpRequests';
export function useSendAnyHttpRequest() {
const [environment] = useActiveEnvironment();
const alert = useAlert();
const [environment] = useActiveEnvironment();
const [activeCookieJar] = useActiveCookieJar();
const requests = useHttpRequests();
return useMutation<HttpResponse | null, string, string | null>({
mutationKey: ['send_any_request'],
mutationFn: async (id) => {
const request = requests.find((r) => r.id === id) ?? null;
const request = await getHttpRequest(id);
if (request == null) {
return null;
}

0
src-web/hooks/useSendFolder.ts → src-web/hooks/useSendManyRequests.ts
View File

16
src-web/hooks/useSyncFontSizeSetting.ts Normal file
View File

@@ -0,0 +1,16 @@
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
import { useEffect } from 'react';
import { useSettings } from './useSettings';
export function useSyncFontSizeSetting() {
const settings = useSettings();
useEffect(() => {
if (settings == null) {
return;
}
const { interfaceScale, editorFontSize } = settings;
getCurrentWebviewWindow().setZoom(interfaceScale).catch(console.error);
document.documentElement.style.setProperty('--editor-font-size', `${editorFontSize}px`);
}, [settings]);
}

155
src-web/hooks/useSyncModelStores.ts Normal file
View File

@@ -0,0 +1,155 @@
import { useQueryClient } from '@tanstack/react-query';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
import type { AnyModel } from '@yaakapp-internal/models';
import { useSetAtom } from 'jotai/index';
import { extractKeyValue } from '../lib/keyValueStore';
import { modelsEq } from '../lib/model_util';
import { cookieJarsAtom } from './useCookieJars';
import { environmentsAtom } from './useEnvironments';
import { foldersAtom } from './useFolders';
import { grpcConnectionsAtom } from './useGrpcConnections';
import { grpcEventsQueryKey } from './useGrpcEvents';
import { grpcRequestsAtom } from './useGrpcRequests';
import { httpRequestsAtom } from './useHttpRequests';
import { httpResponsesAtom } from './useHttpResponses';
import { keyValueQueryKey } from './useKeyValue';
import { useListenToTauriEvent } from './useListenToTauriEvent';
import { pluginsAtom } from './usePlugins';
import { useRequestUpdateKey } from './useRequestUpdateKey';
import { settingsAtom } from './useSettings';
import { workspacesAtom } from './useWorkspaces';
export interface ModelPayload {
model: AnyModel;
windowLabel: string;
}
export function useSyncModelStores() {
const queryClient = useQueryClient();
const { wasUpdatedExternally } = useRequestUpdateKey(null);
const setSettings = useSetAtom(settingsAtom);
const setWorkspaces = useSetAtom(workspacesAtom);
const setCookieJars = useSetAtom(cookieJarsAtom);
const setFolders = useSetAtom(foldersAtom);
const setPlugins = useSetAtom(pluginsAtom);
const setHttpRequests = useSetAtom(httpRequestsAtom);
const setHttpResponses = useSetAtom(httpResponsesAtom);
const setGrpcConnections = useSetAtom(grpcConnectionsAtom);
const setGrpcRequests = useSetAtom(grpcRequestsAtom);
const setEnvironments = useSetAtom(environmentsAtom);
useListenToTauriEvent<ModelPayload>('upserted_model', ({ payload }) => {
if (payload.model.model !== 'key_value') {
console.log('Upserted model', payload.model);
}
const { model, windowLabel } = payload;
const queryKey =
model.model === 'grpc_event'
? grpcEventsQueryKey(model)
: model.model === 'key_value'
? keyValueQueryKey(model)
: null;
if (model.model === 'http_request' && windowLabel !== getCurrentWebviewWindow().label) {
wasUpdatedExternally(model.id);
}
const pushToFront = (['http_response', 'grpc_connection'] as AnyModel['model'][]).includes(
model.model,
);
if (shouldIgnoreModel(model, windowLabel)) return;
if (model.model === 'workspace') {
setWorkspaces(updateModelList(model, pushToFront));
} else if (model.model === 'plugin') {
setPlugins(updateModelList(model, pushToFront));
} else if (model.model === 'http_request') {
setHttpRequests(updateModelList(model, pushToFront));
} else if (model.model === 'folder') {
setFolders(updateModelList(model, pushToFront));
} else if (model.model === 'http_response') {
setHttpResponses(updateModelList(model, pushToFront));
} else if (model.model === 'grpc_request') {
setGrpcRequests(updateModelList(model, pushToFront));
} else if (model.model === 'grpc_connection') {
setGrpcConnections(updateModelList(model, pushToFront));
} else if (model.model === 'environment') {
setEnvironments(updateModelList(model, pushToFront));
} else if (model.model === 'cookie_jar') {
setCookieJars(updateModelList(model, pushToFront));
} else if (model.model === 'settings') {
setSettings(model);
} else if (queryKey != null) {
// TODO: Convert all models to use Jotai
queryClient.setQueryData(queryKey, (current: unknown) => {
if (model.model === 'key_value') {
// Special-case for KeyValue
return extractKeyValue(model);
}
if (Array.isArray(current)) {
return updateModelList(model, pushToFront)(current);
}
});
}
});
useListenToTauriEvent<ModelPayload>('deleted_model', ({ payload }) => {
const { model, windowLabel } = payload;
if (shouldIgnoreModel(model, windowLabel)) return;
console.log('Delete model', payload.model);
if (model.model === 'workspace') {
setWorkspaces(removeById(model));
} else if (model.model === 'plugin') {
setPlugins(removeById(model));
} else if (model.model === 'http_request') {
setHttpRequests(removeById(model));
} else if (model.model === 'http_response') {
setHttpResponses(removeById(model));
} else if (model.model === 'folder') {
setFolders(removeById(model));
} else if (model.model === 'environment') {
setEnvironments(removeById(model));
} else if (model.model === 'grpc_request') {
setGrpcRequests(removeById(model));
} else if (model.model === 'grpc_connection') {
setGrpcConnections(removeById(model));
} else if (model.model === 'grpc_event') {
queryClient.setQueryData(grpcEventsQueryKey(model), removeById(model));
} else if (model.model === 'key_value') {
queryClient.setQueryData(keyValueQueryKey(model), undefined);
} else if (model.model === 'cookie_jar') {
setCookieJars(removeById(model));
}
});
}
function updateModelList<T extends AnyModel>(model: T, pushToFront: boolean) {
return (current: T[]): T[] => {
const index = current.findIndex((v) => modelsEq(v, model)) ?? -1;
if (index >= 0) {
return [...current.slice(0, index), model, ...current.slice(index + 1)];
} else {
return pushToFront ? [model, ...(current ?? [])] : [...(current ?? []), model];
}
};
}
function removeById<T extends { id: string }>(model: T) {
return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id) ?? [];
}
const shouldIgnoreModel = (payload: AnyModel, windowLabel: string) => {
if (windowLabel === getCurrentWebviewWindow().label) {
// Never ignore same-window updates
return false;
}
if (payload.model === 'key_value') {
return payload.namespace === 'no_sync';
}
return false;
};

40
src-web/hooks/useSyncWorkspaceChildModels.ts Normal file
View File

@@ -0,0 +1,40 @@
import { useSetAtom } from 'jotai/index';
import { useEffect } from 'react';
import { invokeCmd } from '../lib/tauri';
import { useActiveWorkspace } from './useActiveWorkspace';
import { cookieJarsAtom } from './useCookieJars';
import { environmentsAtom } from './useEnvironments';
import { foldersAtom } from './useFolders';
import { grpcConnectionsAtom } from './useGrpcConnections';
import { grpcRequestsAtom } from './useGrpcRequests';
import { httpRequestsAtom } from './useHttpRequests';
import { httpResponsesAtom } from './useHttpResponses';
export function useSyncWorkspaceChildModels() {
const setCookieJars = useSetAtom(cookieJarsAtom);
const setFolders = useSetAtom(foldersAtom);
const setHttpRequests = useSetAtom(httpRequestsAtom);
const setHttpResponses = useSetAtom(httpResponsesAtom);
const setGrpcConnections = useSetAtom(grpcConnectionsAtom);
const setGrpcRequests = useSetAtom(grpcRequestsAtom);
const setEnvironments = useSetAtom(environmentsAtom);
const workspace = useActiveWorkspace();
const workspaceId = workspace?.id ?? 'n/a';
useEffect(() => {
(async function () {
// Set the things we need first, first
setHttpRequests(await invokeCmd('cmd_list_http_requests', { workspaceId }));
setGrpcRequests(await invokeCmd('cmd_list_grpc_requests', { workspaceId }));
setFolders(await invokeCmd('cmd_list_folders', { workspaceId }));
// Then, set the rest
setCookieJars(await invokeCmd('cmd_list_cookie_jars', { workspaceId }));
setHttpResponses(await invokeCmd('cmd_list_http_responses', { workspaceId }));
setGrpcConnections(await invokeCmd('cmd_list_grpc_connections', { workspaceId }));
setEnvironments(await invokeCmd('cmd_list_environments', { workspaceId }));
})().catch(console.error);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [workspaceId]);
}

16
src-web/hooks/useSyncZoomSetting.ts Normal file
View File

@@ -0,0 +1,16 @@
import { useHotKey } from './useHotKey';
import { useListenToTauriEvent } from './useListenToTauriEvent';
import { useZoom } from './useZoom';
export function useSyncZoomSetting() {
// Handle Zoom.
// Note, Mac handles it in the app menu, so need to also handle keyboard
// shortcuts for Windows/Linux
const zoom = useZoom();
useHotKey('app.zoom_in', zoom.zoomIn);
useListenToTauriEvent('zoom_in', zoom.zoomIn);
useHotKey('app.zoom_out', zoom.zoomOut);
useListenToTauriEvent('zoom_out', zoom.zoomOut);
useHotKey('app.zoom_reset', zoom.zoomReset);
useListenToTauriEvent('zoom_reset', zoom.zoomReset);
}

2
src-web/package.json
View File

@@ -4,7 +4,7 @@
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite dev",
"dev": "vite dev --force",
"build": "vite build",
"lint": "tsc && eslint . --ext .ts,.tsx"
},

2
src-web/theme.ts
View File

@@ -1,6 +1,6 @@
import { emit, listen } from '@tauri-apps/api/event';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
import type { ModelPayload } from './components/GlobalHooks';
import type { ModelPayload } from './hooks/useSyncModelStores';
import { getSettings } from './lib/store';
import type { Appearance } from './lib/theme/appearance';
import { getCSSAppearance, subscribeToPreferredAppearance } from './lib/theme/appearance';