starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 17:18:32 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Better model updates

Browse Source
This commit is contained in:
Gregory Schier
2023-03-31 13:21:02 -07:00
parent 68159dfa95
commit 4f1c8b0d53
24 changed files with 273 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src-tauri/src/main.rs
View File

@@ -25,6 +25,7 @@ use tauri::regex::Regex;
use tauri::{AppHandle, Menu, MenuItem, RunEvent, State, Submenu, TitleBarStyle, Window, Wry}; use tauri::{AppHandle, Menu, MenuItem, RunEvent, State, Submenu, TitleBarStyle, Window, Wry};
use tauri::{CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, WindowEvent}; use tauri::{CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, WindowEvent};
use tokio::sync::Mutex; use tokio::sync::Mutex;
use tokio::task::spawn_local;
use window_ext::WindowExt; use window_ext::WindowExt;
@@ -63,18 +64,18 @@ async fn migrate_db(
#[tauri::command] #[tauri::command]
async fn send_ephemeral_request( async fn send_ephemeral_request(
request: models::HttpRequest, request: models::HttpRequest,
window: Window<Wry>, app_handle: AppHandle<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<models::HttpResponse, String> { ) -> Result<models::HttpResponse, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let response = models::HttpResponse::default(); let response = models::HttpResponse::default();
return actually_send_ephemeral_request(request, response, window, pool).await; return actually_send_ephemeral_request(request, &response, &app_handle, pool).await;
} }
async fn actually_send_ephemeral_request( async fn actually_send_ephemeral_request(
request: models::HttpRequest, request: models::HttpRequest,
mut response: models::HttpResponse, response: &models::HttpResponse,
window: Window<Wry>, app_handle: &AppHandle<Wry>,
pool: &Pool<Sqlite>, pool: &Pool<Sqlite>,
) -> Result<models::HttpResponse, String> { ) -> Result<models::HttpResponse, String> {
let start = std::time::Instant::now(); let start = std::time::Instant::now();
@@ -183,22 +184,22 @@ async fn actually_send_ephemeral_request(
let sendable_req = match sendable_req_result { let sendable_req = match sendable_req_result {
Ok(r) => r, Ok(r) => r,
Err(e) => { Err(e) => {
return response_err(response, e.to_string(), window, pool).await; return response_err(response, e.to_string(), &app_handle, pool).await;
} }
}; };
let resp = client.execute(sendable_req).await; let raw_response = client.execute(sendable_req).await;
let p = window let p = app_handle
.app_handle()
.path_resolver() .path_resolver()
.resolve_resource("plugins/plugin.ts") .resolve_resource("plugins/plugin.ts")
.expect("failed to resolve resource"); .expect("failed to resolve resource");
runtime::run_plugin_sync(p.to_str().unwrap()).unwrap(); runtime::run_plugin_sync(p.to_str().unwrap()).unwrap();
match resp { match raw_response {
Ok(v) => { Ok(v) => {
let mut response = response.clone();
response.status = v.status().as_u16() as i64; response.status = v.status().as_u16() as i64;
response.status_reason = v.status().canonical_reason().map(|s| s.to_string()); response.status_reason = v.status().canonical_reason().map(|s| s.to_string());
response.headers = Json( response.headers = Json(
@@ -216,12 +217,10 @@ async fn actually_send_ephemeral_request(
response = models::update_response_if_id(response, pool) response = models::update_response_if_id(response, pool)
.await .await
.expect("Failed to update response"); .expect("Failed to update response");
window emit_side_effect(app_handle, "updated_model", &response);
.emit_all("updated_model", &response)
.expect("Failed to emit updated_model");
Ok(response) Ok(response)
} }
Err(e) => response_err(response, e.to_string(), window, pool).await, Err(e) => response_err(response, e.to_string(), app_handle, pool).await,
} }
} }
@@ -230,7 +229,7 @@ async fn send_request(
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
request_id: &str, request_id: &str,
) -> Result<(), String> { ) -> Result<models::HttpResponse, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let req = models::get_request(request_id, pool) let req = models::get_request(request_id, pool)
@@ -240,25 +239,31 @@ async fn send_request(
let response = models::create_response(&req.id, 0, "", 0, None, "", vec![], pool) let response = models::create_response(&req.id, 0, "", 0, None, "", vec![], pool)
.await .await
.expect("Failed to create response"); .expect("Failed to create response");
window
.emit_all("created_model", &response)
.expect("Failed to emit updated_model");
actually_send_ephemeral_request(req, response, window, pool).await?; let response2 = response.clone();
Ok(()) let app_handle2 = window.app_handle().clone();
let pool2 = pool.clone();
tokio::spawn(async move {
actually_send_ephemeral_request(req, &response2, &app_handle2, &pool2)
.await
.expect("Failed to send request");
});
emit_and_return(&window, "created_model", response)
} }
async fn response_err( async fn response_err(
mut response: models::HttpResponse, response: &models::HttpResponse,
error: String, error: String,
window: Window<Wry>, app_handle: &AppHandle<Wry>,
pool: &Pool<Sqlite>, pool: &Pool<Sqlite>,
) -> Result<models::HttpResponse, String> { ) -> Result<models::HttpResponse, String> {
let mut response = response.clone();
response.error = Some(error.clone()); response.error = Some(error.clone());
response = models::update_response_if_id(response, pool) response = models::update_response_if_id(response, pool)
.await .await
.expect("Failed to update response"); .expect("Failed to update response");
emit_all_others(&window, "updated_model", &response); emit_side_effect(app_handle, "updated_model", &response);
Ok(response) Ok(response)
} }
@@ -280,15 +285,15 @@ async fn set_key_value(
value: &str, value: &str,
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<(), String> { ) -> Result<models::KeyValue, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let created_key_value = models::set_key_value(namespace, key, value, pool) let (key_value, created) = models::set_key_value(namespace, key, value, pool).await;
.await
.expect("Failed to create key value");
emit_all_others(&window, "updated_model", &created_key_value); if created {
emit_and_return(&window, "created_model", key_value)
Ok(()) } else {
emit_and_return(&window, "updated_model", key_value)
}
} }
#[tauri::command] #[tauri::command]
@@ -296,17 +301,13 @@ async fn create_workspace(
name: &str, name: &str,
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<String, String> { ) -> Result<models::Workspace, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let created_workspace = models::create_workspace(name, "", pool) let created_workspace = models::create_workspace(name, "", pool)
.await .await
.expect("Failed to create workspace"); .expect("Failed to create workspace");
window emit_and_return(&window, "created_model", created_workspace)
.emit_all("created_model", &created_workspace)
.expect("Failed to emit event");
Ok(created_workspace.id)
} }
#[tauri::command] #[tauri::command]
@@ -316,7 +317,7 @@ async fn create_request(
sort_priority: f64, sort_priority: f64,
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<String, String> { ) -> Result<models::HttpRequest, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let headers = Vec::new(); let headers = Vec::new();
let created_request = models::upsert_request( let created_request = models::upsert_request(
@@ -336,11 +337,7 @@ async fn create_request(
.await .await
.expect("Failed to create request"); .expect("Failed to create request");
window emit_and_return(&window, "created_model", created_request)
.emit_all("created_model", &created_request)
.expect("Failed to emit event");
Ok(created_request.id)
} }
#[tauri::command] #[tauri::command]
@@ -348,13 +345,12 @@ async fn duplicate_request(
id: &str, id: &str,
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<String, String> { ) -> Result<models::HttpRequest, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let request = models::duplicate_request(id, pool) let request = models::duplicate_request(id, pool)
.await .await
.expect("Failed to duplicate request"); .expect("Failed to duplicate request");
emit_all_others(&window, "updated_model", &request); emit_and_return(&window, "updated_model", request)
Ok(request.id)
} }
#[tauri::command] #[tauri::command]
@@ -362,7 +358,7 @@ async fn update_request(
request: models::HttpRequest, request: models::HttpRequest,
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<(), String> { ) -> Result<models::HttpRequest, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
// TODO: Figure out how to make this better // TODO: Figure out how to make this better
@@ -393,9 +389,7 @@ async fn update_request(
.await .await
.expect("Failed to update request"); .expect("Failed to update request");
emit_all_others(&window, "updated_model", updated_request); emit_and_return(&window, "updated_model", updated_request)
Ok(())
} }
#[tauri::command] #[tauri::command]
@@ -403,13 +397,12 @@ async fn delete_request(
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
request_id: &str, request_id: &str,
) -> Result<(), String> { ) -> Result<models::HttpRequest, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let req = models::delete_request(request_id, pool) let req = models::delete_request(request_id, pool)
.await .await
.expect("Failed to delete request"); .expect("Failed to delete request");
emit_all_others(&window, "deleted_model", req); emit_and_return(&window, "deleted_model", req)
Ok(())
} }
#[tauri::command] #[tauri::command]
@@ -450,13 +443,12 @@ async fn delete_response(
id: &str, id: &str,
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<(), String> { ) -> Result<models::HttpResponse, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let response = models::delete_response(id, pool) let response = models::delete_response(id, pool)
.await .await
.expect("Failed to delete response"); .expect("Failed to delete response");
emit_all_others(&window, "deleted_model", response); emit_and_return(&window, "deleted_model", response)
Ok(())
} }
#[tauri::command] #[tauri::command]
@@ -494,13 +486,12 @@ async fn delete_workspace(
window: Window<Wry>, window: Window<Wry>,
db_instance: State<'_, Mutex<Pool<Sqlite>>>, db_instance: State<'_, Mutex<Pool<Sqlite>>>,
id: &str, id: &str,
) -> Result<(), String> { ) -> Result<models::Workspace, String> {
let pool = &*db_instance.lock().await; let pool = &*db_instance.lock().await;
let workspace = models::delete_workspace(id, pool) let workspace = models::delete_workspace(id, pool)
.await .await
.expect("Failed to delete workspace"); .expect("Failed to delete workspace");
emit_all_others(&window, "deleted_model", workspace); emit_and_return(&window, "deleted_model", workspace)
Ok(())
} }
#[tauri::command] #[tauri::command]
@@ -690,13 +681,17 @@ fn create_window(handle: &AppHandle<Wry>) -> Window<Wry> {
win win
} }
/// Emit an event to all windows except the current one /// Emit an event to all windows, with a source window
fn emit_all_others<S: Serialize + Clone>(current_window: &Window<Wry>, event: &str, payload: S) { fn emit_and_return<S: Serialize + Clone, E>(
let windows = current_window.app_handle().windows(); current_window: &Window<Wry>,
for window in windows.values() { event: &str,
if window.label() == current_window.label() { payload: S,
continue; ) -> Result<S, E> {
} current_window.emit_all(event, &payload).unwrap();
window.emit(event, &payload).unwrap(); Ok(payload)
} }
/// Emit an event to all windows, used for side-effects where there is no source window to attribute. This
fn emit_side_effect<S: Serialize + Clone>(app_handle: &AppHandle<Wry>, event: &str, payload: S) {
app_handle.emit_all(event, &payload).unwrap();
} }

8
src-tauri/src/models.rs
View File

@@ -86,7 +86,8 @@ pub async fn set_key_value(
key: &str, key: &str,
value: &str, value: &str,
pool: &Pool<Sqlite>, pool: &Pool<Sqlite>,
) -> Option<KeyValue> { ) -> (KeyValue, bool) {
let existing = get_key_value(namespace, key, pool).await;
sqlx::query!( sqlx::query!(
r#" r#"
INSERT INTO key_values (namespace, key, value) INSERT INTO key_values (namespace, key, value)
@@ -102,7 +103,10 @@ pub async fn set_key_value(
.await .await
.expect("Failed to insert key value"); .expect("Failed to insert key value");
get_key_value(namespace, key, pool).await let kv = get_key_value(namespace, key, pool)
.await
.expect("Failed to get key value");
return (kv, existing.is_none());
} }
pub async fn get_key_value(namespace: &str, key: &str, pool: &Pool<Sqlite>) -> Option<KeyValue> { pub async fn get_key_value(namespace: &str, key: &str, pool: &Pool<Sqlite>) -> Option<KeyValue> {

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

@@ -5,7 +5,7 @@ import { Dialog } from './core/Dialog';
type DialogEntry = { type DialogEntry = {
id: string; id: string;
render: ({ hide }: { hide: () => void }) => React.ReactNode; render: ({ hide }: { hide: () => void }) => React.ReactNode;
} & Pick<DialogProps, 'title' | 'description' | 'hideX' | 'className'>; } & Pick<DialogProps, 'title' | 'description' | 'hideX' | 'className' | 'size'>;
type DialogEntryOptionalId = Omit<DialogEntry, 'id'> & { id?: string }; type DialogEntryOptionalId = Omit<DialogEntry, 'id'> & { id?: string };

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

@@ -5,6 +5,7 @@ import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
import { useRequest } from '../hooks/useRequest'; import { useRequest } from '../hooks/useRequest';
import { Dropdown } from './core/Dropdown'; import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
import { InlineCode } from './core/InlineCode';
interface Props { interface Props {
requestId: string; requestId: string;
@@ -30,9 +31,12 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
onSelect: async () => { onSelect: async () => {
const confirmed = await confirm({ const confirmed = await confirm({
title: 'Delete Request', title: 'Delete Request',
description: `Are you sure you want to delete "${request?.name}"?`, variant: 'delete',
confirmButtonColor: 'danger', description: (
confirmButtonText: 'Delete', <>
Are you sure you want to delete <InlineCode>{request?.name}</InlineCode>?
</>
),
}); });
if (confirmed) { if (confirmed) {
deleteRequest.mutate(); deleteRequest.mutate();

12
src-web/components/WorkspaceDropdown.tsx → src-web/components/WorkspaceActionsDropdown.tsx
View File

@@ -10,12 +10,13 @@ import { Button } from './core/Button';
import type { DropdownItem } from './core/Dropdown'; import type { DropdownItem } from './core/Dropdown';
import { Dropdown } from './core/Dropdown'; import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
import { InlineCode } from './core/InlineCode';
type Props = { type Props = {
className?: string; className?: string;
}; };
export const WorkspaceDropdown = memo(function WorkspaceDropdown({ className }: Props) { export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ className }: Props) {
const workspaces = useWorkspaces(); const workspaces = useWorkspaces();
const activeWorkspace = useActiveWorkspace(); const activeWorkspace = useActiveWorkspace();
const activeWorkspaceId = activeWorkspace?.id ?? null; const activeWorkspaceId = activeWorkspace?.id ?? null;
@@ -51,9 +52,12 @@ export const WorkspaceDropdown = memo(function WorkspaceDropdown({ className }:
onSelect: async () => { onSelect: async () => {
const confirmed = await confirm({ const confirmed = await confirm({
title: 'Delete Workspace', title: 'Delete Workspace',
description: `Are you sure you want to delete "${activeWorkspace?.name}"?`, variant: 'delete',
confirmButtonColor: 'danger', description: (
confirmButtonText: 'Delete', <>
Are you sure you want to delete <InlineCode>{activeWorkspace?.name}</InlineCode>?
</>
),
}); });
if (confirmed) { if (confirmed) {
deleteWorkspace.mutate(); deleteWorkspace.mutate();

5
src-web/components/WorkspaceHeader.tsx
View File

@@ -5,7 +5,7 @@ import { IconButton } from './core/IconButton';
import { HStack } from './core/Stacks'; import { HStack } from './core/Stacks';
import { RequestActionsDropdown } from './RequestActionsDropdown'; import { RequestActionsDropdown } from './RequestActionsDropdown';
import { SidebarActions } from './SidebarActions'; import { SidebarActions } from './SidebarActions';
import { WorkspaceDropdown } from './WorkspaceDropdown'; import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
interface Props { interface Props {
className?: string; className?: string;
@@ -21,13 +21,12 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
> >
<HStack space={0.5} className="flex-1 pointer-events-none" alignItems="center"> <HStack space={0.5} className="flex-1 pointer-events-none" alignItems="center">
<SidebarActions /> <SidebarActions />
<WorkspaceDropdown className="pointer-events-auto" /> <WorkspaceActionsDropdown className="pointer-events-auto" />
</HStack> </HStack>
<div className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none"> <div className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none">
{activeRequest?.name} {activeRequest?.name}
</div> </div>
<div className="flex-1 flex justify-end -mr-2 pointer-events-none"> <div className="flex-1 flex justify-end -mr-2 pointer-events-none">
<IconButton size="sm" title="" icon="magnifyingGlass" />
{activeRequest && ( {activeRequest && (
<RequestActionsDropdown requestId={activeRequest?.id}> <RequestActionsDropdown requestId={activeRequest?.id}>
<IconButton <IconButton

25
src-web/components/core/Dialog.tsx
View File

@@ -3,8 +3,8 @@ import { motion } from 'framer-motion';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { Overlay } from '../Overlay'; import { Overlay } from '../Overlay';
import { Heading } from './Heading';
import { IconButton } from './IconButton'; import { IconButton } from './IconButton';
import { VStack } from './Stacks';
export interface DialogProps { export interface DialogProps {
children: ReactNode; children: ReactNode;
@@ -13,14 +13,14 @@ export interface DialogProps {
title: ReactNode; title: ReactNode;
description?: ReactNode; description?: ReactNode;
className?: string; className?: string;
wide?: boolean; size?: 'sm' | 'md' | 'full' | 'dynamic';
hideX?: boolean; hideX?: boolean;
} }
export function Dialog({ export function Dialog({
children, children,
className, className,
wide, size = 'full',
open, open,
onClose, onClose,
title, title,
@@ -48,9 +48,12 @@ export function Dialog({
className={classnames( className={classnames(
className, className,
'relative bg-gray-50 pointer-events-auto', 'relative bg-gray-50 pointer-events-auto',
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto', 'max-h-[80vh] p-5 rounded-lg overflow-auto',
'dark:border border-gray-200 shadow-md shadow-black/10', 'dark:border border-gray-200 shadow-md shadow-black/10',
wide && 'w-[80vw] max-w-[50rem]', size === 'sm' && 'w-[25rem]',
size === 'md' && 'w-[45rem]',
size === 'full' && 'w-[80vw]',
size === 'dynamic' && 'min-w-[30vw] max-w-[80vw]',
)} )}
> >
{!hideX && ( {!hideX && (
@@ -63,13 +66,11 @@ export function Dialog({
className="ml-auto absolute right-1 top-1" className="ml-auto absolute right-1 top-1"
/> />
)} )}
<VStack space={3}> <Heading className="text-xl font-semibold w-full" id={titleId}>
<h1 className="text-xl font-semibold w-full" id={titleId}> {title}
{title} </Heading>
</h1> {description && <p id={descriptionId}>{description}</p>}
{description && <p id={descriptionId}>{description}</p>} <div className="mt-6">{children}</div>
<div>{children}</div>
</VStack>
</motion.div> </motion.div>
</div> </div>
</div> </div>

9
src-web/components/core/Heading.tsx
View File

@@ -1,12 +1,7 @@
import classnames from 'classnames'; import classnames from 'classnames';
import type { ReactNode } from 'react'; import type { HTMLAttributes } from 'react';
type Props = { export function Heading({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
className?: string;
children?: ReactNode;
};
export function Heading({ className, children, ...props }: Props) {
return ( return (
<h1 className={classnames(className, 'text-2xl font-semibold text-gray-900 mb-3')} {...props}> <h1 className={classnames(className, 'text-2xl font-semibold text-gray-900 mb-3')} {...props}>
{children} {children}

14
src-web/components/core/InlineCode.tsx Normal file
View File

@@ -0,0 +1,14 @@
import classnames from 'classnames';
import type { HTMLAttributes } from 'react';
export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
return (
<code
className={classnames(
className,
'font-mono text-sm bg-highlight border-0 border-gray-200 px-1.5 py-0.5 rounded text-gray-800 shadow-inner',
)}
{...props}
/>
);
}

31
src-web/hooks/Confirm.tsx
View File

@@ -2,20 +2,27 @@ import type { ButtonProps } from '../components/core/Button';
import { Button } from '../components/core/Button'; import { Button } from '../components/core/Button';
import { HStack } from '../components/core/Stacks'; import { HStack } from '../components/core/Stacks';
interface Props { export interface ConfirmProps {
hide: () => void; hide: () => void;
onResult: (result: boolean) => void; onResult: (result: boolean) => void;
confirmButtonColor?: ButtonProps['color']; variant?: 'delete' | 'confirm';
confirmButtonText?: string;
} }
export function Confirm({
hide, const colors: Record<NonNullable<ConfirmProps['variant']>, ButtonProps['color']> = {
onResult, delete: 'danger',
confirmButtonColor = 'primary', confirm: 'primary',
confirmButtonText = 'Confirm', };
}: Props) {
const confirmButtonTexts: Record<NonNullable<ConfirmProps['variant']>, string> = {
delete: 'Delete',
confirm: 'Confirm',
};
export function Confirm({ hide, onResult, variant = 'confirm' }: ConfirmProps) {
const focusRef = (el: HTMLButtonElement | null) => { const focusRef = (el: HTMLButtonElement | null) => {
el?.focus(); setTimeout(() => {
el?.focus();
});
}; };
const handleHide = () => { const handleHide = () => {
@@ -33,8 +40,8 @@ export function Confirm({
<Button className="focus" color="gray" onClick={handleHide}> <Button className="focus" color="gray" onClick={handleHide}>
Cancel Cancel
</Button> </Button>
<Button className="focus" ref={focusRef} color={confirmButtonColor} onClick={handleSuccess}> <Button className="focus" ref={focusRef} color={colors[variant]} onClick={handleSuccess}>
{confirmButtonText} {confirmButtonTexts[variant]}
</Button> </Button>
</HStack> </HStack>
); );

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

@@ -0,0 +1,26 @@
import type { DialogProps } from '../components/core/Dialog';
import { useDialog } from '../components/DialogContext';
import type { ConfirmProps } from './Confirm';
import { Confirm } from './Confirm';
export function useConfirm() {
const dialog = useDialog();
return ({
title,
description,
variant,
}: {
title: DialogProps['title'];
description?: DialogProps['description'];
variant: ConfirmProps['variant'];
}) =>
new Promise((onResult: ConfirmProps['onResult']) => {
dialog.show({
title,
description,
hideX: true,
size: 'sm',
render: ({ hide }) => Confirm({ hide, variant, onResult }),
});
});
}

34
src-web/hooks/useConfirm.tsx
View File

@@ -1,34 +0,0 @@
import type { ButtonProps } from '../components/core/Button';
import { useDialog } from '../components/DialogContext';
import { Confirm } from './Confirm';
export function useConfirm() {
const dialog = useDialog();
return ({
title,
description,
confirmButtonColor,
confirmButtonText,
}: {
title: string;
description?: string;
confirmButtonColor?: ButtonProps['color'];
confirmButtonText?: string;
}) => {
return new Promise((resolve: (r: boolean) => void) => {
dialog.show({
title,
description,
hideX: true,
render: ({ hide }) => (
<Confirm
hide={hide}
onResult={resolve}
confirmButtonColor={confirmButtonColor}
confirmButtonText={confirmButtonText}
/>
),
});
});
};
}

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

@@ -1,26 +1,31 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { HttpRequest } from '../lib/models'; import type { HttpRequest } from '../lib/models';
import { useActiveWorkspace } from './useActiveWorkspace'; import { useActiveWorkspaceId } from './useActiveWorkspaceId';
import { useRequests } from './useRequests'; import { requestsQueryKey, useRequests } from './useRequests';
import { useRoutes } from './useRoutes'; import { useRoutes } from './useRoutes';
export function useCreateRequest({ navigateAfter }: { navigateAfter: boolean }) { export function useCreateRequest({ navigateAfter }: { navigateAfter: boolean }) {
const workspace = useActiveWorkspace(); const workspaceId = useActiveWorkspaceId();
const routes = useRoutes(); const routes = useRoutes();
const requests = useRequests(); const requests = useRequests();
const queryClient = useQueryClient();
return useMutation<string, unknown, Partial<Pick<HttpRequest, 'name' | 'sortPriority'>>>({ return useMutation<HttpRequest, unknown, Partial<Pick<HttpRequest, 'name' | 'sortPriority'>>>({
mutationFn: (patch) => { mutationFn: (patch) => {
if (workspace === null) { if (workspaceId === null) {
throw new Error("Cannot create request when there's no active workspace"); throw new Error("Cannot create request when there's no active workspace");
} }
const sortPriority = maxSortPriority(requests) + 1000; const sortPriority = maxSortPriority(requests) + 1000;
return invoke('create_request', { sortPriority, workspaceId: workspace.id, ...patch }); return invoke('create_request', { sortPriority, workspaceId, ...patch });
}, },
onSuccess: async (requestId) => { onSuccess: async (request) => {
if (navigateAfter && workspace !== null) { queryClient.setQueryData<HttpRequest[]>(
routes.navigate('request', { workspaceId: workspace.id, requestId }); requestsQueryKey({ workspaceId: request.workspaceId }),
(requests) => [...(requests ?? []), request],
);
if (navigateAfter) {
routes.navigate('request', { workspaceId: request.workspaceId, requestId: request.id });
} }
}, },
}); });

14
src-web/hooks/useCreateWorkspace.ts
View File

@@ -1,17 +1,23 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { Workspace } from '../lib/models'; import type { Workspace } from '../lib/models';
import { useRoutes } from './useRoutes'; import { useRoutes } from './useRoutes';
import { workspacesQueryKey } from './useWorkspaces';
export function useCreateWorkspace({ navigateAfter }: { navigateAfter: boolean }) { export function useCreateWorkspace({ navigateAfter }: { navigateAfter: boolean }) {
const routes = useRoutes(); const routes = useRoutes();
return useMutation<string, unknown, Pick<Workspace, 'name'>>({ const queryClient = useQueryClient();
return useMutation<Workspace, unknown, Pick<Workspace, 'name'>>({
mutationFn: (patch) => { mutationFn: (patch) => {
return invoke('create_workspace', patch); return invoke('create_workspace', patch);
}, },
onSuccess: async (workspaceId) => { onSuccess: async (workspace) => {
queryClient.setQueryData<Workspace[]>(workspacesQueryKey({}), (workspaces) => [
...(workspaces ?? []),
workspace,
]);
if (navigateAfter) { if (navigateAfter) {
routes.navigate('workspace', { workspaceId }); routes.navigate('workspace', { workspaceId: workspace.id });
} }
}, },
}); });

26
src-web/hooks/useDeleteRequest.ts
View File

@@ -1,19 +1,25 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import { useActiveWorkspaceId } from './useActiveWorkspaceId'; import type { HttpRequest } from '../lib/models';
import { useActiveRequestId } from './useActiveRequestId';
import { requestsQueryKey } from './useRequests'; import { requestsQueryKey } from './useRequests';
import { responsesQueryKey } from './useResponses';
import { useRoutes } from './useRoutes';
export function useDeleteRequest(id: string | null) { export function useDeleteRequest(id: string | null) {
const workspaceId = useActiveWorkspaceId();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation<void, string>({ const activeRequestId = useActiveRequestId();
mutationFn: async () => { const routes = useRoutes();
if (id === null) return; return useMutation<HttpRequest, string>({
await invoke('delete_request', { requestId: id }); mutationFn: async () => invoke('delete_request', { requestId: id }),
}, onSuccess: async ({ workspaceId, id: requestId }) => {
onSuccess: async () => { queryClient.setQueryData(responsesQueryKey({ requestId }), []); // Responses were deleted
if (workspaceId === null || id === null) return; queryClient.setQueryData<HttpRequest[]>(requestsQueryKey({ workspaceId }), (requests) =>
await queryClient.invalidateQueries(requestsQueryKey({ workspaceId })); (requests ?? []).filter((r) => r.id !== requestId),
);
if (activeRequestId === requestId) {
routes.navigate('workspace', { workspaceId });
}
}, },
}); });
} }

15
src-web/hooks/useDeleteResponse.ts
View File

@@ -1,11 +1,18 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { HttpResponse } from '../lib/models';
import { responsesQueryKey } from './useResponses';
export function useDeleteResponse(id: string | null) { export function useDeleteResponse(id: string | null) {
return useMutation({ const queryClient = useQueryClient();
return useMutation<HttpResponse>({
mutationFn: async () => { mutationFn: async () => {
if (id === null) return; return await invoke('delete_response', { id: id });
await invoke('delete_response', { id: id }); },
onSuccess: ({ requestId, id: responseId }) => {
queryClient.setQueryData<HttpResponse[]>(responsesQueryKey({ requestId }), (responses) =>
(responses ?? []).filter((response) => response.id !== responseId),
);
}, },
}); });
} }

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

@@ -11,7 +11,7 @@ export function useDeleteResponses(requestId?: string) {
}, },
onSuccess: async () => { onSuccess: async () => {
if (!requestId) return; if (!requestId) return;
await queryClient.invalidateQueries(responsesQueryKey({ requestId })); queryClient.setQueryData(responsesQueryKey({ requestId }), []);
}, },
}); });
} }

22
src-web/hooks/useDeleteWorkspace.ts
View File

@@ -1,6 +1,8 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { Workspace } from '../lib/models';
import { useActiveWorkspaceId } from './useActiveWorkspaceId'; import { useActiveWorkspaceId } from './useActiveWorkspaceId';
import { requestsQueryKey } from './useRequests';
import { useRoutes } from './useRoutes'; import { useRoutes } from './useRoutes';
import { workspacesQueryKey } from './useWorkspaces'; import { workspacesQueryKey } from './useWorkspaces';
@@ -8,17 +10,21 @@ export function useDeleteWorkspace(id: string | null) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const activeWorkspaceId = useActiveWorkspaceId(); const activeWorkspaceId = useActiveWorkspaceId();
const routes = useRoutes(); const routes = useRoutes();
return useMutation<void, string>({ return useMutation<Workspace, string>({
mutationFn: async () => { mutationFn: () => {
if (id === null) return; return invoke('delete_workspace', { id });
await invoke('delete_workspace', { id });
}, },
onSuccess: async () => { onSuccess: async ({ id: workspaceId }) => {
if (id === null) return; queryClient.setQueryData<Workspace[]>(workspacesQueryKey({}), (workspaces) =>
await queryClient.invalidateQueries(workspacesQueryKey()); workspaces?.filter((workspace) => workspace.id !== workspaceId),
if (id === activeWorkspaceId) { );
if (workspaceId === activeWorkspaceId) {
routes.navigate('workspaces'); routes.navigate('workspaces');
} }
// Also clean up other things that may have been deleted
queryClient.setQueryData(requestsQueryKey({ workspaceId }), []);
await queryClient.invalidateQueries(requestsQueryKey({ workspaceId }));
}, },
}); });
} }

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

@@ -33,7 +33,7 @@ export function useKeyValue<T extends Object | null>({
const mutate = useMutation<void, unknown, T>({ const mutate = useMutation<void, unknown, T>({
mutationFn: (value) => setKeyValue<T>({ namespace, key, value }), mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
// k/v should be as fast as possible, so optimistically update the cache // k/v should be as fast as possible, so optimistically update the cache
onMutate: (value) => queryClient.setQueryData(keyValueQueryKey({ namespace, key }), value), onMutate: (value) => queryClient.setQueryData<T>(keyValueQueryKey({ namespace, key }), value),
}); });
const set = useCallback( const set = useCallback(

16
src-web/hooks/useSendRequest.ts
View File

@@ -1,11 +1,19 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { HttpResponse } from '../lib/models';
import { responsesQueryKey } from './useResponses';
export function useSendRequest(id: string | null) { export function useSendRequest(id: string | null) {
return useMutation<void, string>({ const queryClient = useQueryClient();
return useMutation<HttpResponse, string>({
mutationFn: async () => { mutationFn: async () => {
if (id === null) return; return invoke('send_request', { requestId: id });
await invoke('send_request', { requestId: id }); },
onSuccess: (response) => {
queryClient.setQueryData<HttpResponse[]>(responsesQueryKey(response), (responses) => [
...(responses ?? []),
response,
]);
}, },
}).mutate; }).mutate;
} }

49
src-web/hooks/useTauriListeners.ts
View File

@@ -1,13 +1,14 @@
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import type { EventCallback } from '@tauri-apps/api/event'; import type { EventCallback } from '@tauri-apps/api/event';
import { listen as tauriListen } from '@tauri-apps/api/event';
import { appWindow } from '@tauri-apps/api/window'; import { appWindow } from '@tauri-apps/api/window';
import { matchPath } from 'react-router-dom'; import { matchPath } from 'react-router-dom';
import { useEffectOnce } from 'react-use'; import { useEffectOnce } from 'react-use';
import { DEFAULT_FONT_SIZE } from '../lib/constants'; import { DEFAULT_FONT_SIZE } from '../lib/constants';
import { debounce } from '../lib/debounce'; import { debounce } from '../lib/debounce';
import { extractKeyValue, NAMESPACE_NO_SYNC } from '../lib/keyValueStore'; import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
import type { HttpRequest, HttpResponse, KeyValue, Model, Workspace } from '../lib/models'; import type { HttpRequest, HttpResponse, Model, Workspace } from '../lib/models';
import { modelsEq } from '../lib/models'; import { modelsEq } from '../lib/models';
import { keyValueQueryKey } from './useKeyValue'; import { keyValueQueryKey } from './useKeyValue';
import { requestsQueryKey } from './useRequests'; import { requestsQueryKey } from './useRequests';
@@ -30,7 +31,7 @@ export function useTauriListeners() {
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
function listen<T>(event: string, fn: EventCallback<T>) { function listen<T>(event: string, fn: EventCallback<T>) {
appWindow.listen(event, fn).then((unsub) => { tauriListen(event, fn).then((unsub) => {
if (unmounted) unsub(); if (unmounted) unsub();
else unsubFns.push(unsub); else unsubFns.push(unsub);
}); });
@@ -43,13 +44,10 @@ export function useTauriListeners() {
listen('toggle_sidebar', sidebarDisplay.toggle); listen('toggle_sidebar', sidebarDisplay.toggle);
listen('refresh', () => location.reload()); listen('refresh', () => location.reload());
listenDebounced('updated_key_value', ({ payload: keyValue }: { payload: KeyValue }) => { listenDebounced<Model>('created_model', ({ payload, windowLabel }) => {
if (keyValue.namespace !== NAMESPACE_NO_SYNC) { const cameFromSameWindow = windowLabel === appWindow.label;
queryClient.setQueryData(keyValueQueryKey(keyValue), extractKeyValue(keyValue)); if (cameFromSameWindow) return;
}
});
listenDebounced('created_model', ({ payload }: { payload: Model }) => {
const queryKey = const queryKey =
payload.model === 'http_request' payload.model === 'http_request'
? requestsQueryKey(payload) ? requestsQueryKey(payload)
@@ -71,11 +69,14 @@ export function useTauriListeners() {
const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC; const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC;
if (!skipSync) { if (!skipSync) {
queryClient.setQueryData(queryKey, (values: Model[] = []) => [...values, payload]); queryClient.setQueryData<Model[]>(queryKey, (values) => [...(values ?? []), payload]);
} }
}); });
listenDebounced('updated_model', ({ payload }: { payload: Model }) => { listenDebounced<Model>('updated_model', ({ payload, windowLabel }) => {
const cameFromSameWindow = windowLabel === appWindow.label;
if (cameFromSameWindow) return;
const queryKey = const queryKey =
payload.model === 'http_request' payload.model === 'http_request'
? requestsQueryKey(payload) ? requestsQueryKey(payload)
@@ -94,26 +95,30 @@ export function useTauriListeners() {
const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC; const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC;
if (payload.model === 'http_request') {
wasUpdatedExternally(payload.id);
}
if (!skipSync) { if (!skipSync) {
queryClient.setQueryData(queryKey, (values: Model[] = []) => queryClient.setQueryData<Model[]>(queryKey, (values) =>
values.map((v) => (modelsEq(v, payload) ? payload : v)), values?.map((v) => (modelsEq(v, payload) ? payload : v)),
); );
} }
}); });
listen('deleted_model', ({ payload: model }: { payload: Model }) => { listen<Model>('deleted_model', ({ payload }) => {
function removeById<T extends { id: string }>(model: T) { function removeById<T extends { id: string }>(model: T) {
return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id); return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id);
} }
if (model.model === 'workspace') { if (payload.model === 'workspace') {
queryClient.setQueryData(workspacesQueryKey(), removeById<Workspace>(model)); queryClient.setQueryData<Workspace[]>(workspacesQueryKey(), removeById(payload));
} else if (model.model === 'http_request') { } else if (payload.model === 'http_request') {
queryClient.setQueryData(requestsQueryKey(model), removeById<HttpRequest>(model)); queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(payload), removeById(payload));
} else if (model.model === 'http_response') { } else if (payload.model === 'http_response') {
queryClient.setQueryData(responsesQueryKey(model), removeById<HttpResponse>(model)); queryClient.setQueryData<HttpResponse[]>(responsesQueryKey(payload), removeById(payload));
} else if (model.model === 'key_value') { } else if (payload.model === 'key_value') {
queryClient.setQueryData(keyValueQueryKey(model), undefined); queryClient.setQueryData(keyValueQueryKey(payload), undefined);
} }
}); });

4
src-web/hooks/useUpdateAnyRequest.ts
View File

@@ -19,8 +19,8 @@ export function useUpdateAnyRequest() {
onMutate: async ({ id, update }) => { onMutate: async ({ id, update }) => {
const request = await getRequest(id); const request = await getRequest(id);
if (request === null) return; if (request === null) return;
queryClient.setQueryData(requestsQueryKey(request), (requests: HttpRequest[] | undefined) => queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(request), (requests) =>
requests?.map((r) => (r.id === request.id ? update(r) : r)), (requests ?? []).map((r) => (r.id === request.id ? update(r) : r)),
); );
}, },
}); });

4
src-web/hooks/useUpdateRequest.ts
View File

@@ -21,8 +21,8 @@ export function useUpdateRequest(id: string | null) {
if (request === null) return; if (request === null) return;
const newRequest = typeof v === 'function' ? v(request) : { ...request, ...v }; const newRequest = typeof v === 'function' ? v(request) : { ...request, ...v };
queryClient.setQueryData(requestsQueryKey(request), (requests: HttpRequest[] | undefined) => queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(request), (requests) =>
requests?.map((r) => (r.id === newRequest.id ? newRequest : r)), (requests ?? []).map((r) => (r.id === newRequest.id ? newRequest : r)),
); );
}, },
}); });

6
src-web/lib/lastLocation.ts
View File

@@ -1,11 +1,11 @@
import { getKeyValue, setKeyValue } from './keyValueStore'; import { getKeyValue, NAMESPACE_NO_SYNC, setKeyValue } from './keyValueStore';
export async function getLastLocation(): Promise<string> { export async function getLastLocation(): Promise<string> {
return getKeyValue({ key: 'last_location', fallback: '/' }); return getKeyValue({ namespace: NAMESPACE_NO_SYNC, key: 'last_location', fallback: '/' });
} }
export async function setLastLocation(pathname: string): Promise<void> { export async function setLastLocation(pathname: string): Promise<void> {
return setKeyValue({ key: 'last_location', value: pathname }); return setKeyValue({ namespace: NAMESPACE_NO_SYNC, key: 'last_location', value: pathname });
} }
export async function syncLastLocation(): Promise<void> { export async function syncLastLocation(): Promise<void> {