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

Remove most of Radix UI

Browse Source
This commit is contained in:
Gregory Schier
2023-03-20 13:16:58 -07:00
parent 80dd1e457b
commit e703817ba2
31 changed files with 549 additions and 2017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -21,7 +21,8 @@
<body>
<div id="root"></div>
<div id="cm-portal" class="cm-portal" style="pointer-events: auto"></div>
<div id="cm-portal" class="cm-portal"></div>
<div id="react-portal"></div>
<div id="radix-portal" class="cm-portal"></div>
<script type="module" src="/src-web/main.tsx"></script>
</body>

1346
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -25,14 +25,7 @@
"@lezer/generator": "^1.2.2",
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.3",
"@radix-ui/react-checkbox": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.2",
"@radix-ui/react-dropdown-menu": "^2.0.2",
"@radix-ui/react-icons": "^1.2.0",
"@radix-ui/react-popover": "1.0.3",
"@radix-ui/react-scroll-area": "^1.0.2",
"@radix-ui/react-separator": "^1.0.1",
"@radix-ui/react-tabs": "^1.0.3",
"@tailwindcss/container-queries": "^0.1.0",
"@tanstack/react-query": "^4.24.10",
"@tanstack/react-query-devtools": "^4.26.1",

BIN
src-tauri/icons/icon.icns
View File

Binary file not shown.

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

@@ -334,6 +334,15 @@ async fn requests(
.map_err(|e| e.to_string())
}
#[tauri::command]
async fn get_request(
id: &str,
db_instance: State<'_, Mutex<Pool<Sqlite>>>,
) -> Result<models::HttpRequest, String> {
let pool = &*db_instance.lock().await;
models::get_request(id, pool).await.map_err(|e| e.to_string())
}
#[tauri::command]
async fn responses(
request_id: &str,
@@ -497,6 +506,7 @@ fn main() {
.invoke_handler(tauri::generate_handler![
greet,
workspaces,
get_request,
requests,
send_request,
create_request,

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

@@ -1,7 +1,7 @@
import { formatSdl } from 'format-graphql';
import { useMemo } from 'react';
import { useUniqueKey } from '../hooks/useUniqueKey';
import { Divider } from './core/Divider';
import { Separator } from './core/Separator';
import type { EditorProps } from './core/Editor';
import { Editor } from './core/Editor';
@@ -58,7 +58,7 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P
placeholder={`query { }`}
{...extraEditorProps}
/>
<Divider />
<Separator />
<p className="pt-1 text-gray-500 text-sm">Variables</p>
<Editor
useTemplating

12
src-web/components/Portal.tsx Normal file
View File

@@ -0,0 +1,12 @@
import type { ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { usePortal } from '../hooks/usePortal';
interface Props {
children: ReactNode;
name: string;
}
export function Portal({ children, name }: Props) {
const portal = usePortal(name);
return createPortal(children, portal);
}

31
src-web/components/RequestMethodDropdown.tsx
View File

@@ -1,35 +1,26 @@
import { memo, useCallback } from 'react';
import { memo } from 'react';
import { Button } from './core/Button';
import type { DropdownMenuRadioItem } from './core/Dropdown';
import { DropdownMenuRadio, DropdownMenuTrigger } from './core/Dropdown';
import { RadioDropdown } from './core/RadioDropdown';
type Props = {
method: string;
onChange: (method: string) => void;
};
const items = [
{ label: 'GET', value: 'GET' },
{ label: 'PUT', value: 'PUT' },
{ label: 'POST', value: 'POST' },
{ label: 'PATCH', value: 'PATCH' },
{ label: 'DELETE', value: 'DELETE' },
{ label: 'OPTIONS', value: 'OPTIONS' },
{ label: 'HEAD', value: 'HEAD' },
];
const methodItems = ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'].map((m) => ({
value: m,
label: m,
}));
export const RequestMethodDropdown = memo(function RequestMethodDropdown({
method,
onChange,
}: Props) {
const handleChange = useCallback((i: DropdownMenuRadioItem) => onChange(i.value), [onChange]);
return (
<DropdownMenuRadio onValueChange={handleChange} value={method.toUpperCase()} items={items}>
<DropdownMenuTrigger>
<Button type="button" size="sm" className="mx-0.5" justify="start">
{method.toUpperCase()}
</Button>
</DropdownMenuTrigger>
</DropdownMenuRadio>
<RadioDropdown value={method} items={methodItems} onChange={onChange}>
<Button type="button" size="sm" className="mx-0.5" justify="start">
{method.toUpperCase()}
</Button>
</RadioDropdown>
);
});

9
src-web/components/RequestPane.tsx
View File

@@ -33,7 +33,7 @@ export function RequestPane({ fullHeight, className }: Props) {
value: 'body',
label: activeRequest?.bodyType ?? 'NoBody',
options: {
onValueChange: (t) => updateRequest.mutate({ bodyType: t.value }),
onChange: (bodyType: string) => updateRequest.mutate({ bodyType }),
value: activeRequest?.bodyType ?? 'nobody',
items: [
{ label: 'No Body', value: 'nobody' },
@@ -60,7 +60,12 @@ export function RequestPane({ fullHeight, className }: Props) {
<div className={classnames(className, 'py-3 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
{activeRequest && (
<>
<UrlBar className="pl-3" request={activeRequest} />
<UrlBar
className="pl-3"
id={activeRequest.id}
url={activeRequest.url}
method={activeRequest.method}
/>
<Tabs
value={activeTab.value}
onChangeValue={activeTab.set}

30
src-web/components/RequestSettingsDropdown.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { memo } from 'react';
import { useActiveRequestId } from '../hooks/useActiveRequestId';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';
export const RequestSettingsDropdown = memo(function RequestSettingsDropdown() {
const activeRequestId = useActiveRequestId();
const deleteRequest = useDeleteRequest(activeRequestId ?? null);
return (
<Dropdown
items={[
{
label: 'Something Else',
onSelect: () => null,
leftSlot: <Icon icon="camera" />,
},
'-----',
{
label: 'Delete Request',
onSelect: deleteRequest.mutate,
leftSlot: <Icon icon="trash" />,
},
]}
>
<IconButton size="sm" title="Request Options" icon="gear" />
</Dropdown>
);
});

17
src-web/components/ResponsePane.tsx
View File

@@ -8,7 +8,7 @@ import { useResponseViewMode } from '../hooks/useResponseViewMode';
import { tryFormatJson } from '../lib/formatters';
import type { HttpResponse } from '../lib/models';
import { pluralize } from '../lib/pluralize';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
import { Dropdown } from './core/Dropdown';
import { Editor } from './core/Editor';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';
@@ -85,6 +85,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
{
label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
onSelect: deleteAllResponses.mutate,
hidden: responses.length <= 1,
disabled: responses.length === 0,
},
'-----',
@@ -95,14 +96,12 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
})),
]}
>
<DropdownMenuTrigger>
<IconButton
title="Show response history"
icon="triangleDown"
className="ml-auto"
size="sm"
/>
</DropdownMenuTrigger>
<IconButton
title="Show response history"
icon="triangleDown"
className="ml-auto"
size="sm"
/>
</Dropdown>
</HStack>
</>

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

@@ -1,14 +1,8 @@
import classnames from 'classnames';
import type {
CSSProperties,
ForwardedRef,
KeyboardEvent,
MouseEvent as ReactMouseEvent,
} from 'react';
import type { ForwardedRef, KeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import type { XYCoord } from 'react-dnd';
import { useDrag, useDragLayer, useDrop } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { useDrag, useDrop } from 'react-dnd';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
@@ -18,10 +12,9 @@ import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import type { HttpRequest } from '../lib/models';
import { Button } from './core/Button';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';
import { ScrollArea } from './core/ScrollArea';
import { HStack, VStack } from './core/Stacks';
import { WindowDragRegion } from './core/WindowDragRegion';
import { DropMarker } from './DropMarker';
@@ -115,16 +108,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
}}
/>
</HStack>
<ScrollArea>
<VStack as="ul" className="relative py-3" draggable={false}>
<SidebarItems
sidebarWidth={sidebarWidth}
activeRequestId={activeRequest?.id}
requests={requests}
/>
<CustomDragLayer sidebarWidth={sidebarWidth} />
</VStack>
</ScrollArea>
<VStack as="ul" className="relative py-3" draggable={false}>
<SidebarItems
sidebarWidth={sidebarWidth}
activeRequestId={activeRequest?.id}
requests={requests}
/>
</VStack>
<HStack className="mx-1 pb-1" alignItems="center" justifyContent="end">
<ToggleThemeButton />
</HStack>
@@ -190,23 +180,21 @@ function SidebarItems({
return (
<>
{requests.map((r, i) => {
return (
<Fragment key={r.id}>
{hoveredIndex === i && <DropMarker />}
<DraggableSidebarItem
key={r.id}
requestId={r.id}
requestName={r.name}
workspaceId={r.workspaceId}
active={r.id === activeRequestId}
sidebarWidth={sidebarWidth}
onMove={handleMove}
onEnd={handleEnd}
/>
</Fragment>
);
})}
{requests.map((r, i) => (
<Fragment key={r.id}>
{hoveredIndex === i && <DropMarker />}
<DraggableSidebarItem
key={r.id}
requestId={r.id}
requestName={r.name}
workspaceId={r.workspaceId}
active={r.id === activeRequestId}
sidebarWidth={sidebarWidth}
onMove={handleMove}
onEnd={handleEnd}
/>
</Fragment>
))}
{hoveredIndex === requests.length && <DropMarker />}
</>
);
@@ -317,20 +305,17 @@ const _SidebarItem = forwardRef(function SidebarItem(
)}
</Button>
<Dropdown items={actionItems}>
<DropdownMenuTrigger
<IconButton
className={classnames(
'absolute right-0 top-0 transition-opacity opacity-0',
'group-hover/item:opacity-100 focus-visible:opacity-100',
)}
>
<IconButton
color="custom"
size="sm"
iconSize="sm"
title="Delete request"
icon="dotsH"
/>
</DropdownMenuTrigger>
color="custom"
size="sm"
iconSize="sm"
title="Delete request"
icon="dotsH"
/>
</Dropdown>
</div>
</li>
@@ -375,11 +360,7 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
[onMove],
);
const [{ isDragging }, connectDrag, preview] = useDrag<
DragItem,
unknown,
{ isDragging: boolean }
>(
const [{ isDragging }, connectDrag] = useDrag<DragItem, unknown, { isDragging: boolean }>(
() => ({
type: ItemTypes.REQUEST,
item: () => ({ id: requestId, requestName, workspaceId }),
@@ -390,8 +371,6 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
[onEnd],
);
preview(getEmptyImage(), { captureDraggingState: true });
connectDrag(ref);
connectDrop(ref);
@@ -407,39 +386,3 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
/>
);
});
function CustomDragLayer({ sidebarWidth }: { sidebarWidth: number }) {
const { itemType, isDragging, item, currentOffset } = useDragLayer<any, DragItem>((monitor) => ({
item: monitor.getItem(),
itemType: monitor.getItemType(),
currentOffset: monitor.getSourceClientOffset(),
isDragging: monitor.isDragging(),
}));
const styles = useMemo<CSSProperties>(() => {
if (currentOffset === null) {
return { display: 'none' };
}
const transform = `translate(${currentOffset.x}px, ${currentOffset.y}px)`;
return { transform, WebkitTransform: transform };
}, [currentOffset]);
if (!isDragging) {
return null;
}
return (
<div className="fixed !pointer-events-none inset-0">
<div className="absolute pointer-events-none" style={styles}>
{itemType === ItemTypes.REQUEST && (
<SidebarItem
sidebarWidth={sidebarWidth}
workspaceId={item.workspaceId}
requestName={item.requestName}
requestId={item.id}
/>
)}
</div>
</div>
);
}

19
src-web/components/UrlBar.tsx
View File

@@ -9,17 +9,16 @@ import { IconButton } from './core/IconButton';
import { Input } from './core/Input';
import { RequestMethodDropdown } from './RequestMethodDropdown';
interface Props {
request: HttpRequest;
type Props = Pick<HttpRequest, 'id' | 'url' | 'method'> & {
className?: string;
}
};
export const UrlBar = memo(function UrlBar({ request, className }: Props) {
const sendRequest = useSendRequest(request.id);
const updateRequest = useUpdateRequest(request.id);
export const UrlBar = memo(function UrlBar({ id: requestId, url, method, className }: Props) {
const sendRequest = useSendRequest(requestId);
const updateRequest = useUpdateRequest(requestId);
const handleMethodChange = useCallback((method: string) => updateRequest.mutate({ method }), []);
const handleUrlChange = useCallback((url: string) => updateRequest.mutate({ url }), []);
const loading = useIsResponseLoading(request.id);
const loading = useIsResponseLoading(requestId);
const handleSubmit = useCallback(
async (e: FormEvent) => {
@@ -32,7 +31,7 @@ export const UrlBar = memo(function UrlBar({ request, className }: Props) {
return (
<form onSubmit={handleSubmit} className={classnames(className, 'w-full flex items-center')}>
<Input
key={request.id}
key={requestId}
hideLabel
useTemplating
contentType="url"
@@ -41,9 +40,9 @@ export const UrlBar = memo(function UrlBar({ request, className }: Props) {
label="Enter URL"
containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"
onChange={handleUrlChange}
defaultValue={request.url}
defaultValue={url}
placeholder="Enter a URL..."
leftSlot={<RequestMethodDropdown method={request.method} onChange={handleMethodChange} />}
leftSlot={<RequestMethodDropdown method={method} onChange={handleMethodChange} />}
rightSlot={
<IconButton
title="Send Request"

27
src-web/components/Workspace.tsx
View File

@@ -3,14 +3,14 @@ import { useMemo, useRef } from 'react';
import { useWindowSize } from 'react-use';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { useSidebarWidth } from '../hooks/useSidebarWidth';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
import { Icon } from './core/Icon';
import { Button } from './core/Button';
import { Dropdown } from './core/Dropdown';
import { IconButton } from './core/IconButton';
import { HStack } from './core/Stacks';
import { WindowDragRegion } from './core/WindowDragRegion';
import { RequestPane } from './RequestPane';
import { RequestSettingsDropdown } from './RequestSettingsDropdown';
import { ResponsePane } from './ResponsePane';
import { Sidebar } from './Sidebar';
import { WorkspaceDropdown } from './WorkspaceDropdown';
@@ -18,7 +18,6 @@ import { WorkspaceDropdown } from './WorkspaceDropdown';
export default function Workspace() {
const activeRequest = useActiveRequest();
const activeWorkspace = useActiveWorkspace();
const deleteRequest = useDeleteRequest(activeRequest?.id ?? null);
const mainContentRef = useRef<HTMLDivElement>(null);
const windowSize = useWindowSize();
@@ -57,25 +56,7 @@ export default function Workspace() {
</div>
<div className="flex-1 flex justify-end -mr-2">
<IconButton size="sm" title="" icon="magnifyingGlass" />
<Dropdown
items={[
{
label: 'Something Else',
onSelect: () => null,
leftSlot: <Icon icon="camera" />,
},
'-----',
{
label: 'Delete Request',
onSelect: deleteRequest.mutate,
leftSlot: <Icon icon="trash" />,
},
]}
>
<DropdownMenuTrigger>
<IconButton size="sm" title="Request Options" icon="gear" />
</DropdownMenuTrigger>
</Dropdown>
<RequestSettingsDropdown />
</div>
</HStack>
<div

25
src-web/components/WorkspaceDropdown.tsx
View File

@@ -1,31 +1,32 @@
import classnames from 'classnames';
import { useCallback, useMemo } from 'react';
import { memo, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
import { useWorkspaces } from '../hooks/useWorkspaces';
import { Button } from './core/Button';
import type { DropdownItem } from './core/Dropdown';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon';
type Props = {
className?: string;
};
export function WorkspaceDropdown({ className }: Props) {
export const WorkspaceDropdown = memo(function WorkspaceDropdown({ className }: Props) {
const navigate = useNavigate();
const workspaces = useWorkspaces();
const activeWorkspace = useActiveWorkspace();
const activeWorkspaceId = useActiveWorkspaceId();
const createWorkspace = useCreateWorkspace({ navigateAfter: true });
const items: DropdownItem[] = useMemo(() => {
const workspaceItems = workspaces.map((w) => ({
label: w.name,
value: w.id,
leftSlot: activeWorkspace?.id === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
leftSlot: activeWorkspaceId === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
onSelect: () => {
if (w.id === activeWorkspace?.id) return;
if (w.id === activeWorkspaceId) return;
navigate(`/workspaces/${w.id}`);
},
}));
@@ -40,15 +41,13 @@ export function WorkspaceDropdown({ className }: Props) {
onSelect: () => createWorkspace.mutate({ name: 'New Workspace' }),
},
];
}, [workspaces, activeWorkspace]);
}, [workspaces, activeWorkspaceId]);
return (
<Dropdown items={items}>
<DropdownMenuTrigger>
<Button size="sm" className={classnames(className, '!px-2 truncate')} forDropdown>
{activeWorkspace?.name ?? 'Unknown'}
</Button>
</DropdownMenuTrigger>
<Button size="sm" className={classnames(className, '!px-2 truncate')} forDropdown>
{activeWorkspace?.name ?? 'Unknown'}
</Button>
</Dropdown>
);
}
});

29
src-web/components/core/Checkbox.tsx
View File

@@ -1,35 +1,38 @@
import type { CheckedState } from '@radix-ui/react-checkbox';
import * as CB from '@radix-ui/react-checkbox';
import classnames from 'classnames';
import { useCallback } from 'react';
import { Icon } from './Icon';
interface Props {
checked: CheckedState;
onChange: (checked: CheckedState) => void;
checked: boolean;
onChange: (checked: boolean) => void;
disabled?: boolean;
className?: string;
}
export function Checkbox({ checked, onChange, className, disabled }: Props) {
const handleClick = useCallback(() => {
onChange(!checked);
}, [onChange, checked]);
return (
<CB.Root
<button
role="checkbox"
aria-checked={checked ? 'true' : 'false'}
disabled={disabled}
checked={checked}
onCheckedChange={onChange}
onClick={handleClick}
className={classnames(
className,
'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',
'focus:border-focus',
'disabled:opacity-disabled',
'outline-none',
checked && 'bg-gray-200/10',
// Remove focus style
'outline-none',
)}
>
<CB.Indicator className="flex items-center justify-center">
{checked === 'indeterminate' && <Icon icon="dividerH" />}
{checked === true && <Icon size="sm" icon="check" />}
</CB.Indicator>
</CB.Root>
<div className="flex items-center justify-center">
<Icon size="sm" icon={checked ? 'check' : 'empty'} />
</div>
</button>
);
}

502
src-web/components/core/Dropdown.tsx
View File

@@ -1,341 +1,229 @@
import * as D from '@radix-ui/react-dropdown-menu';
import { CheckIcon } from '@radix-ui/react-icons';
import classnames from 'classnames';
import { motion } from 'framer-motion';
import type { ForwardedRef, ReactElement, ReactNode } from 'react';
import {
forwardRef,
memo,
useCallback,
useImperativeHandle,
useLayoutEffect,
useMemo,
useState,
} from 'react';
export interface DropdownMenuRadioItem {
label: string;
value: string;
}
export interface DropdownMenuRadioProps {
children: ReactElement<typeof DropdownMenuTrigger>;
onValueChange: ((v: DropdownMenuRadioItem) => void) | null;
value: string;
label?: string;
items: DropdownMenuRadioItem[];
}
export const DropdownMenuRadio = memo(function DropdownMenuRadio({
children,
items,
onValueChange,
label,
value,
}: DropdownMenuRadioProps) {
const handleChange = useCallback(
(value: string) => {
const item = items.find((item) => item.value === value);
if (item && onValueChange) {
onValueChange(item);
}
},
[items, onValueChange],
);
return (
<D.Root>
{children}
<DropdownMenuPortal>
<DropdownMenuContent>
{label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
<D.DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
{items.map((item) => (
<DropdownMenuRadioItem key={item.value} value={item.value}>
{item.label}
</DropdownMenuRadioItem>
))}
</D.DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenuPortal>
</D.Root>
);
});
import type { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useKeyPressEvent } from 'react-use';
import { Portal } from '../Portal';
import { Separator } from './Separator';
import { VStack } from './Stacks';
export type DropdownItem =
| {
label: string;
onSelect?: () => void;
disabled?: boolean;
hidden?: boolean;
leftSlot?: ReactNode;
rightSlot?: ReactNode;
onSelect?: () => void;
}
| '-----';
export interface DropdownProps {
children: ReactElement<typeof DropdownMenuTrigger>;
children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
items: DropdownItem[];
}
export const Dropdown = memo(function Dropdown({ children, items }: DropdownProps) {
return (
<D.Root>
{children}
<DropdownMenuPortal>
<DropdownMenuContent>
{items.map((item, i) => {
if (item === '-----') {
return <DropdownMenuSeparator key={i} />;
} else {
return (
<DropdownMenuItem
key={i}
onSelect={() => item.onSelect?.()}
disabled={item.disabled}
leftSlot={item.leftSlot}
>
{item.label}
</DropdownMenuItem>
);
}
})}
</DropdownMenuContent>
</DropdownMenuPortal>
</D.Root>
export function Dropdown({ children, items }: DropdownProps) {
const [open, setOpen] = useState<boolean>(false);
const ref = useRef<HTMLButtonElement>(null);
const child = useMemo(
() =>
cloneElement(Children.only(children) as never, {
ref,
'aria-has-popup': 'true',
onClick: (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
setOpen((o) => !o);
},
}),
[children],
);
});
interface DropdownMenuPortalProps {
children: ReactNode;
const handleClose = useCallback(() => {
setOpen(false);
ref.current?.focus();
}, [ref.current]);
useEffect(() => {
ref.current?.setAttribute('aria-expanded', open.toString());
}, [open]);
const triggerRect = useMemo(() => {
if (!open) return null;
return ref.current?.getBoundingClientRect();
}, [ref.current, open]);
return (
<div className="pointer-events-auto">
{child}
{open && triggerRect && (
<Menu items={items} triggerRect={triggerRect} onClose={handleClose} />
)}
</div>
);
}
const DropdownMenuPortal = memo(function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
const container = document.querySelector<Element>('#radix-portal');
if (container === null) return null;
const initial = useMemo(() => ({ opacity: 0 }), []);
const animate = useMemo(() => ({ opacity: 1 }), []);
return (
<D.Portal>
<motion.div initial={initial} animate={animate}>
{children}
</motion.div>
</D.Portal>
);
});
interface MenuProps {
className?: string;
items: DropdownProps['items'];
triggerRect: DOMRect;
onClose: () => void;
}
const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
function DropdownMenuContent(
{ className, children, ...props }: D.DropdownMenuContentProps,
ref: ForwardedRef<HTMLDivElement>,
) {
const [styles, setStyles] = useState<{ maxHeight: number }>();
const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef);
function Menu({ className, items, onClose, triggerRect }: MenuProps) {
if (triggerRect === undefined) return null;
const initDivRef = useCallback((ref: HTMLDivElement | null) => {
setDivRef(ref);
}, []);
const containerRef = useRef<HTMLDivElement | null>(null);
const [menuStyles, setMenuStyles] = useState<CSSProperties>({});
// Calculate the max height so we can scroll
useLayoutEffect(() => {
if (divRef === null) return;
// Needs to be in a setTimeout because the ref is not positioned yet
// TODO: Make this better?
const t = setTimeout(() => {
const windowBox = document.documentElement.getBoundingClientRect();
const menuBox = divRef.getBoundingClientRect();
const styles = { maxHeight: windowBox.height - menuBox.top - 5 };
setStyles(styles);
});
return () => clearTimeout(t);
}, [divRef]);
// Calculate the max height so we can scroll
const initMenu = useCallback((el: HTMLDivElement | null) => {
if (el === null) return {};
const windowBox = document.documentElement.getBoundingClientRect();
const menuBox = el.getBoundingClientRect();
setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
}, []);
return (
<D.Content
ref={initDivRef}
align="start"
style={styles}
className={classnames(
className,
'bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 p-1.5 border border-gray-200',
'overflow-auto m-1',
)}
{...props}
>
{children}
</D.Content>
);
},
);
const DropdownMenuContent = memo(_DropdownMenuContent);
type DropdownMenuItemProps = D.DropdownMenuItemProps & ItemInnerProps;
const DropdownMenuItem = memo(function DropdownMenuItem({
leftSlot,
rightSlot,
className,
children,
disabled,
...props
}: DropdownMenuItemProps) {
return (
<D.Item
asChild
disabled={disabled}
className={classnames(className, disabled && 'opacity-disabled')}
{...props}
>
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
{children}
</ItemInner>
</D.Item>
);
});
// type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
//
// function DropdownMenuCheckboxItem({
// leftSlot,
// rightSlot,
// children,
// ...props
// }: DropdownMenuCheckboxItemProps) {
// return (
// <DropdownMenu.CheckboxItem asChild {...props}>
// <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
// {children}
// </ItemInner>
// </DropdownMenu.CheckboxItem>
// );
// }
// type DropdownMenuSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & ItemInnerProps;
//
// function DropdownMenuSubTrigger({
// leftSlot,
// rightSlot,
// children,
// ...props
// }: DropdownMenuSubTriggerProps) {
// return (
// <DropdownMenu.SubTrigger asChild {...props}>
// <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
// {children}
// </ItemInner>
// </DropdownMenu.SubTrigger>
// );
// }
type DropdownMenuRadioItemProps = Omit<D.DropdownMenuRadioItemProps & ItemInnerProps, 'leftSlot'>;
const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
rightSlot,
children,
...props
}: DropdownMenuRadioItemProps) {
return (
<D.RadioItem asChild {...props}>
<ItemInner
rightSlot={rightSlot}
leftSlot={
<D.ItemIndicator>
<CheckIcon />
</D.ItemIndicator>
useKeyPressEvent('ArrowUp', () => {
setSelectedIndex((currIndex) => {
let nextIndex = (currIndex ?? 0) - 1;
const maxTries = items.length;
for (let i = 0; i < maxTries; i++) {
if (items[nextIndex] === '-----') {
nextIndex--;
} else if (nextIndex < 0) {
nextIndex = items.length - 1;
} else {
break;
}
}
return nextIndex;
});
});
useKeyPressEvent('ArrowDown', () => {
setSelectedIndex((currIndex) => {
let nextIndex = (currIndex ?? -1) + 1;
const maxTries = items.length;
for (let i = 0; i < maxTries; i++) {
if (items[nextIndex] === '-----') {
nextIndex++;
} else if (nextIndex >= items.length) {
nextIndex = 0;
} else {
break;
}
}
return nextIndex;
});
});
const containerStyles: CSSProperties = useMemo(() => {
const docWidth = document.documentElement.getBoundingClientRect().width;
const spaceRemaining = docWidth - triggerRect.left;
if (spaceRemaining < 200) {
return {
top: triggerRect?.bottom,
right: 0,
};
}
return {
top: triggerRect?.bottom,
left: triggerRect?.left,
};
}, [triggerRect]);
const handleSelect = useCallback(
(i: DropdownItem) => {
onClose();
setSelectedIndex(null);
if (i !== '-----') {
i.onSelect?.();
}
},
[onClose],
);
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
return (
<Portal name="dropdown">
<button aria-hidden title="close" className="fixed inset-0" onClick={onClose} />
<div
role="menu"
aria-orientation="vertical"
dir="ltr"
ref={containerRef}
style={containerStyles}
className={classnames(className, 'pointer-events-auto fixed z-50')}
>
{children}
</ItemInner>
</D.RadioItem>
{containerStyles && (
<VStack
ref={initMenu}
style={menuStyles}
tabIndex={-1}
className={classnames(
className,
'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
'border-gray-200 overflow-auto m-1',
)}
>
{items.map((item, i) => {
if (item === '-----') return <Separator key={i} className="my-1.5" />;
if (item.hidden) return null;
return (
<MenuItem
focused={i === selectedIndex}
onSelect={handleSelect}
key={i + item.label}
item={item}
/>
);
})}
</VStack>
)}
</div>
</Portal>
);
});
// const DropdownMenuSubContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuSubContentProps>(
// function DropdownMenuSubContent(
// { className, ...props }: DropdownMenu.DropdownMenuSubContentProps,
// ref,
// ) {
// return (
// <DropdownMenu.SubContent
// ref={ref}
// alignOffset={0}
// sideOffset={4}
// className={classnames(className, dropdownMenuClasses)}
// {...props}
// />
// );
// },
// );
const DropdownMenuLabel = memo(function DropdownMenuLabel({
className,
children,
...props
}: D.DropdownMenuLabelProps) {
return (
<D.Label asChild {...props}>
<ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
{children}
</ItemInner>
</D.Label>
);
});
const DropdownMenuSeparator = memo(function DropdownMenuSeparator({
className,
...props
}: D.DropdownMenuSeparatorProps) {
return (
<D.Separator
className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
{...props}
/>
);
});
type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
children: ReactNode;
className?: string;
};
export const DropdownMenuTrigger = memo(function DropdownMenuTrigger({
children,
className,
...props
}: DropdownMenuTriggerProps) {
return (
<D.Trigger asChild className={classnames(className)} {...props}>
{children}
</D.Trigger>
);
});
interface ItemInnerProps {
leftSlot?: ReactNode;
rightSlot?: ReactNode;
children: ReactNode;
noHover?: boolean;
className?: string;
}
const _ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
{ leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
ref,
) {
interface MenuItemProps {
className?: string;
item: DropdownItem;
onSelect: (item: DropdownItem) => void;
focused: boolean;
}
function MenuItem({ className, focused, item, onSelect, ...props }: MenuItemProps) {
const handleClick = useCallback(() => onSelect?.(item), [item, onSelect]);
const initRef = useCallback(
(el: HTMLButtonElement | null) => {
if (el === null) return;
if (focused) {
setTimeout(() => el.focus(), 0);
}
},
[focused],
);
if (item === '-----') return <Separator className="my-1.5" />;
return (
<div
ref={ref}
<button
ref={initRef}
onMouseEnter={(e) => e.currentTarget.focus()}
onMouseLeave={(e) => e.currentTarget.blur()}
onClick={handleClick}
className={classnames(
className,
'min-w-[8rem] outline-none px-2 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
!noHover && 'focus:bg-highlight focus:text-gray-900 rounded',
'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
'focus:bg-highlight focus:text-gray-900 rounded',
)}
{...props}
>
{leftSlot && <div className="w-6">{leftSlot}</div>}
<div>{children}</div>
{rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
</div>
{item.leftSlot && <div className="w-6">{item.leftSlot}</div>}
<div>{item.label}</div>
{item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>}
</button>
);
});
const ItemInner = memo(_ItemInner);
}

2
src-web/components/core/Input.tsx
View File

@@ -63,7 +63,7 @@ export function Input({
};
return (
<VStack>
<VStack className="w-full">
<label
htmlFor={id}
className={classnames(

4
src-web/components/core/PairEditor.tsx
View File

@@ -1,4 +1,3 @@
import type { CheckedState } from '@radix-ui/react-checkbox';
import classNames from 'classnames';
import classnames from 'classnames';
import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -201,8 +200,7 @@ const FormRow = memo(function FormRow({
const ref = useRef<HTMLDivElement>(null);
const handleChangeEnabled = useMemo(
() => (enabled: CheckedState) =>
onChange({ id, pair: { ...pairContainer.pair, enabled: !!enabled } }),
() => (enabled: boolean) => onChange({ id, pair: { ...pairContainer.pair, enabled } }),
[onChange, pairContainer.pair.name, pairContainer.pair.value],
);

35
src-web/components/core/RadioDropdown.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { memo, useMemo } from 'react';
import type { DropdownProps } from './Dropdown';
import { Dropdown } from './Dropdown';
import { Icon } from './Icon';
export interface RadioDropdownItem {
label: string;
value: string;
}
export interface RadioDropdownProps {
value: string;
onChange: (bodyType: string) => void;
items: RadioDropdownItem[];
children: DropdownProps['children'];
}
export const RadioDropdown = memo(function RadioDropdown({
value,
items,
onChange,
children,
}: RadioDropdownProps) {
const dropdownItems = useMemo(
() =>
items.map(({ label, value: v }) => ({
label,
onSelect: () => onChange(v),
leftSlot: <Icon icon={value === v ? 'check' : 'empty'} />,
})),
[value, items],
);
return <Dropdown items={dropdownItems}>{children}</Dropdown>;
});

38
src-web/components/core/ScrollArea.tsx
View File

@@ -1,38 +0,0 @@
import * as S from '@radix-ui/react-scroll-area';
import classnames from 'classnames';
import type { ReactNode } from 'react';
interface Props {
children: ReactNode;
className?: string;
type?: S.ScrollAreaProps['type'];
}
export function ScrollArea({ children, className, type }: Props) {
return (
<S.Root
className={classnames(className, 'group/scroll overflow-hidden')}
type={type ?? 'hover'}
>
<S.Viewport className="h-full w-full">{children}</S.Viewport>
<ScrollBar orientation="vertical" />
<ScrollBar orientation="horizontal" />
<S.Corner />
</S.Root>
);
}
function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' }) {
return (
<S.Scrollbar
orientation={orientation}
className={classnames(
'scrollbar-track flex rounded-full',
orientation === 'vertical' && 'w-1.5',
orientation === 'horizontal' && 'h-1.5 flex-col',
)}
>
<S.Thumb className="scrollbar-thumb flex-1 rounded-full" />
</S.Scrollbar>
);
}

9
src-web/components/core/Divider.tsx → src-web/components/core/Separator.tsx
View File

@@ -1,23 +1,20 @@
import * as Separator from '@radix-ui/react-separator';
import classnames from 'classnames';
interface Props {
orientation?: 'horizontal' | 'vertical';
decorative?: boolean;
className?: string;
}
export function Divider({ className, orientation = 'horizontal', decorative }: Props) {
export function Separator({ className, orientation = 'horizontal' }: Props) {
return (
<Separator.Root
<div
role="separator"
className={classnames(
className,
'bg-gray-300/40',
orientation === 'horizontal' && 'w-full h-[1px]',
orientation === 'vertical' && 'h-full w-[1px]',
)}
orientation={orientation}
decorative={decorative}
/>
);
}

45
src-web/components/core/Stacks.tsx
View File

@@ -1,5 +1,6 @@
import classnames from 'classnames';
import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
import type { ComponentType, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
import { forwardRef } from 'react';
const gapClasses = {
0: 'gap-0',
@@ -15,66 +16,70 @@ interface HStackProps extends BaseStackProps {
children?: ReactNode;
}
export function HStack({ className, space, children, ...props }: HStackProps) {
export const HStack = forwardRef(function HStack(
{ className, space, children, ...props }: HStackProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref: ForwardedRef<any>,
) {
return (
<BaseStack
direction="row"
ref={ref}
className={classnames(className, 'flex-row', space && gapClasses[space])}
{...props}
>
{children}
</BaseStack>
);
}
});
export type VStackProps = BaseStackProps & {
children: ReactNode;
};
export function VStack({ className, space, children, ...props }: VStackProps) {
export const VStack = forwardRef(function VStack(
{ className, space, children, ...props }: VStackProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref: ForwardedRef<any>,
) {
return (
<BaseStack
direction="col"
className={classnames(className, 'w-full h-full', space && gapClasses[space])}
ref={ref}
className={classnames(className, 'flex-col', space && gapClasses[space])}
{...props}
>
{children}
</BaseStack>
);
}
});
type BaseStackProps = HTMLAttributes<HTMLElement> & {
as?: ComponentType | 'ul';
space?: keyof typeof gapClasses;
alignItems?: 'start' | 'center';
justifyContent?: 'start' | 'center' | 'end';
direction?: 'row' | 'col';
};
function BaseStack({
className,
direction,
alignItems,
justifyContent,
children,
as,
}: BaseStackProps) {
const BaseStack = forwardRef(function BaseStack(
{ className, alignItems, justifyContent, children, as, ...props }: BaseStackProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref: ForwardedRef<any>,
) {
const Component = as ?? 'div';
return (
<Component
ref={ref}
className={classnames(
className,
'flex',
direction === 'row' && 'flex-row',
direction === 'col' && 'flex-col',
alignItems === 'center' && 'items-center',
alignItems === 'start' && 'items-start',
justifyContent === 'start' && 'justify-start',
justifyContent === 'center' && 'justify-center',
justifyContent === 'end' && 'justify-end',
)}
{...props}
>
{children}
</Component>
);
}
});

173
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -1,12 +1,10 @@
import * as T from '@radix-ui/react-tabs';
import classnames from 'classnames';
import { memo } from 'react';
import type { ReactNode } from 'react';
import { memo, useEffect, useRef } from 'react';
import { Button } from '../Button';
import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
import { DropdownMenuRadio, DropdownMenuTrigger } from '../Dropdown';
import { Icon } from '../Icon';
import { ScrollArea } from '../ScrollArea';
import type { RadioDropdownProps } from '../RadioDropdown';
import { RadioDropdown } from '../RadioDropdown';
import { HStack } from '../Stacks';
import './Tabs.css';
@@ -14,11 +12,7 @@ import './Tabs.css';
export type TabItem = {
value: string;
label: string;
options?: {
onValueChange: DropdownMenuRadioProps['onValueChange'];
value: string;
items: DropdownMenuRadioItem[];
};
options?: Omit<RadioDropdownProps, 'children'>;
};
interface Props {
@@ -40,85 +34,95 @@ export const Tabs = memo(function Tabs({
className,
tabListClassName,
}: Props) {
const ref = useRef<HTMLDivElement | null>(null);
const handleTabChange = (value: string) => {
const tabs = ref.current?.querySelectorAll(`[data-tab]`);
for (const tab of tabs ?? []) {
const v = tab.getAttribute('data-tab');
if (v === value) {
tab.setAttribute('tabindex', '0');
tab.setAttribute('data-state', 'active');
} else {
tab.setAttribute('data-state', 'inactive');
}
}
onChangeValue(value);
};
useEffect(() => {
if (value === undefined) return;
handleTabChange(value);
}, [value]);
return (
<T.Root
value={value}
onValueChange={onChangeValue}
<div
ref={ref}
className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
>
<T.List
<div
aria-label={label}
className={classnames(tabListClassName, 'h-auto flex items-center pb-1')}
>
<ScrollArea>
<HStack space={1}>
{tabs.map((t) => {
const isActive = t.value === value;
if (t.options && isActive) {
return (
<DropdownMenuRadio
key={t.value}
items={t.options.items}
value={t.options.value}
onValueChange={t.options.onValueChange}
<HStack space={1}>
{tabs.map((t) => {
const isActive = t.value === value;
if (t.options && isActive) {
return (
<RadioDropdown
key={t.value}
items={t.options.items}
value={t.options.value}
onChange={t.options.onChange}
>
<Button
color="custom"
size="sm"
onClick={(e) => e.stopPropagation()}
className={classnames(
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
)}
>
<DropdownMenuTrigger>
<Button
color="custom"
size="sm"
onClick={(e) => e.stopPropagation()}
className={classnames(
isActive
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:text-gray-900',
)}
>
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Icon icon="triangleDown" className="-mr-1.5" />
</Button>
</DropdownMenuTrigger>
</DropdownMenuRadio>
);
} else if (t.options && !isActive) {
return (
<T.Trigger asChild key={t.value} value={t.value}>
<Button
color="custom"
size="sm"
className={classnames(
isActive
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:text-gray-900',
)}
>
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
</Button>
</T.Trigger>
);
} else {
return (
<T.Trigger asChild key={t.value} value={t.value}>
<Button
color="custom"
size="sm"
className={classnames(
isActive
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:text-gray-900',
)}
>
{t.label}
</Button>
</T.Trigger>
);
}
})}
</HStack>
</ScrollArea>
</T.List>
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Icon icon="triangleDown" className="-mr-1.5" />
</Button>
</RadioDropdown>
);
} else if (t.options && !isActive) {
return (
<Button
key={t.value}
color="custom"
size="sm"
onClick={() => handleTabChange(t.value)}
className={classnames(
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
)}
>
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
</Button>
);
} else {
return (
<Button
key={t.value}
color="custom"
size="sm"
onClick={() => handleTabChange(t.value)}
className={classnames(
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
)}
>
{t.label}
</Button>
);
}
})}
</HStack>
</div>
{children}
</T.Root>
</div>
);
});
@@ -134,13 +138,12 @@ export const TabContent = memo(function TabContent({
className,
}: TabContentProps) {
return (
<T.Content
<div
tabIndex={-1}
forceMount
value={value}
data-tab={value}
className={classnames(className, 'tab-content', 'w-full h-full overflow-auto')}
>
{children}
</T.Content>
</div>
);
});

11
src-web/hooks/useActiveRequest.ts
View File

@@ -1,16 +1,9 @@
import { useEffect, useState } from 'react';
import type { HttpRequest } from '../lib/models';
import { useActiveRequestId } from './useActiveRequestId';
import { useRequests } from './useRequests';
export function useActiveRequest(): HttpRequest | null {
const requests = useRequests();
const requestId = useActiveRequestId();
const [activeRequest, setActiveRequest] = useState<HttpRequest | null>(null);
useEffect(() => {
setActiveRequest(requests.find((r) => r.id === requestId) ?? null);
}, [requests, requestId]);
return activeRequest;
const requests = useRequests();
return requests.find((r) => r.id === requestId) ?? null;
}

20
src-web/hooks/usePortal.ts Normal file
View File

@@ -0,0 +1,20 @@
import { useRef } from 'react';
const PORTAL_CONTAINER_ID = 'react-portal';
export function usePortal(name: string) {
const ref = useRef(getOrCreatePortal(name));
return ref.current;
}
function getOrCreatePortal(name: string) {
const portalContainer = document.getElementById(PORTAL_CONTAINER_ID) as HTMLDivElement;
let existing = portalContainer.querySelector(`:scope > [data-portal-name="${name}"]`);
if (!existing) {
const el: HTMLDivElement = document.createElement('div');
el.setAttribute('data-portal-name', name);
portalContainer.appendChild(el);
existing = el;
}
return existing;
}

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

@@ -2,21 +2,21 @@ import { useQuery } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api';
import type { HttpRequest } from '../lib/models';
import { convertDates } from '../lib/models';
import { useActiveWorkspace } from './useActiveWorkspace';
import { useActiveWorkspaceId } from './useActiveWorkspaceId';
export function requestsQueryKey(workspaceId: string) {
return ['http_requests', { workspaceId }];
}
export function useRequests() {
const workspace = useActiveWorkspace();
const workspaceId = useActiveWorkspaceId();
return (
useQuery({
enabled: workspace != null,
queryKey: requestsQueryKey(workspace?.id ?? 'n/a'),
enabled: workspaceId != null,
queryKey: requestsQueryKey(workspaceId ?? 'n/a'),
queryFn: async () => {
if (workspace == null) return [];
const requests = (await invoke('requests', { workspaceId: workspace.id })) as HttpRequest[];
if (workspaceId == null) return [];
const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
return requests.map(convertDates);
},
}).data ?? []

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

@@ -10,7 +10,7 @@ import { useKeyValue } from './useKeyValue';
export function useTheme() {
const appearanceKv = useKeyValue<Appearance>({
key: 'appearance',
initialValue: getAppearance(),
defaultValue: getAppearance(),
});
const themeChange = (appearance: Appearance) => {

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

@@ -1,13 +1,12 @@
import { useMutation } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api';
import type { HttpRequest } from '../lib/models';
import { useRequests } from './useRequests';
import { getRequest } from '../lib/store';
export function useUpdateAnyRequest() {
const requests = useRequests();
return useMutation<void, unknown, Partial<HttpRequest> & { id: string }>({
mutationFn: async (patch) => {
const request = requests.find((r) => r.id === patch.id) ?? null;
const request = await getRequest(patch.id);
if (request === null) {
throw new Error("Can't update a null request");
}

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

@@ -1,12 +1,12 @@
import { useMutation } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api';
import type { HttpRequest } from '../lib/models';
import { useRequest } from './useRequest';
import { getRequest } from '../lib/store';
export function useUpdateRequest(id: string | null) {
const request = useRequest(id);
return useMutation<void, unknown, Partial<HttpRequest>>({
mutationFn: async (patch) => {
const request = await getRequest(id);
if (request == null) {
throw new Error("Can't update a null request");
}

12
src-web/lib/store.ts Normal file
View File

@@ -0,0 +1,12 @@
import { invoke } from '@tauri-apps/api';
import { convertDates } from './models';
import type { HttpRequest } from './models';
export async function getRequest(id: string | null): Promise<HttpRequest | null> {
if (id === null) return null;
const request: HttpRequest = (await invoke('get_request', { id })) ?? null;
if (request == null) {
return null;
}
return convertDates(request);
}