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

Some small changes

Browse Source
This commit is contained in:
Gregory Schier
2023-03-14 00:08:03 -07:00
parent 59f1d11e40
commit efe072c7c4
7 changed files with 80 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import { useDeleteResponses } from '../hooks/useDeleteResponses';
import { useDeleteResponse } from '../hooks/useResponseDelete'; import { useDeleteResponse } from '../hooks/useResponseDelete';
import { useResponses } from '../hooks/useResponses'; import { useResponses } from '../hooks/useResponses';
import { tryFormatJson } from '../lib/formatters'; import { tryFormatJson } from '../lib/formatters';
import type { HttpResponse } from '../lib/models';
import { Dropdown } from './core/Dropdown'; import { Dropdown } from './core/Dropdown';
import { Editor } from './core/Editor'; import { Editor } from './core/Editor';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
@@ -20,11 +21,11 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
const [activeResponseId, setActiveResponseId] = useState<string | null>(null); const [activeResponseId, setActiveResponseId] = useState<string | null>(null);
const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty'); const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty');
const responses = useResponses(); const responses = useResponses();
const response = activeResponseId const activeResponse: HttpResponse | null = activeResponseId
? responses.find((r) => r.id === activeResponseId) ? responses.find((r) => r.id === activeResponseId) ?? null
: responses[responses.length - 1]; : responses[responses.length - 1] ?? null;
const deleteResponse = useDeleteResponse(response); const deleteResponse = useDeleteResponse(activeResponse);
const deleteAllResponses = useDeleteResponses(response?.requestId); const deleteAllResponses = useDeleteResponses(activeResponse?.requestId);
useEffect(() => { useEffect(() => {
setActiveResponseId(null); setActiveResponseId(null);
@@ -32,10 +33,15 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
const contentType = useMemo( const contentType = useMemo(
() => () =>
response?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ?? 'text/plain', activeResponse?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ??
[response], 'text/plain',
[activeResponse],
); );
if (activeResponse === null) {
return null;
}
return ( return (
<div className="p-2"> <div className="p-2">
<div <div
@@ -52,15 +58,15 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
alignItems="center" alignItems="center"
className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2" className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2"
> >
{response && response.status > 0 && ( {activeResponse && activeResponse.status > 0 && (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
<StatusColor statusCode={response.status}> <StatusColor statusCode={activeResponse.status}>
{response.status} {activeResponse.status}
{response.statusReason && ` ${response.statusReason}`} {activeResponse.statusReason && ` ${activeResponse.statusReason}`}
</StatusColor> </StatusColor>
&nbsp;&bull;&nbsp; &nbsp;&bull;&nbsp;
{response.elapsed}ms &nbsp;&bull;&nbsp; {activeResponse.elapsed}ms &nbsp;&bull;&nbsp;
{Math.round(response.body.length / 1000)} KB {Math.round(activeResponse.body.length / 1000)} KB
</div> </div>
)} )}
@@ -86,7 +92,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
'-----', '-----',
...responses.slice(0, 10).map((r) => ({ ...responses.slice(0, 10).map((r) => ({
label: r.status + ' - ' + r.elapsed + ' ms', label: r.status + ' - ' + r.elapsed + ' ms',
leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>, leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
onSelect: () => setActiveResponseId(r.id), onSelect: () => setActiveResponseId(r.id),
})), })),
]} ]}
@@ -96,33 +102,29 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
</HStack> </HStack>
</HStack> </HStack>
{response && ( {activeResponse?.error ? (
<> <div className="p-1">
{response?.error ? ( <div className="text-white bg-red-500 px-3 py-2 rounded">{activeResponse.error}</div>
<div className="p-1"> </div>
<div className="text-white bg-red-500 px-3 py-2 rounded">{response.error}</div> ) : viewMode === 'pretty' && contentType.includes('html') ? (
</div> <Webview body={activeResponse.body} contentType={contentType} url={activeResponse.url} />
) : viewMode === 'pretty' && contentType.includes('html') ? ( ) : viewMode === 'pretty' && contentType.includes('json') ? (
<Webview body={response.body} contentType={contentType} url={response.url} /> <Editor
) : viewMode === 'pretty' && contentType.includes('json') ? ( readOnly
<Editor key={`${contentType}:${activeResponse.updatedAt}:pretty`}
readOnly className="bg-gray-50 dark:!bg-gray-100"
key={`${contentType}:${response.updatedAt}:pretty`} defaultValue={tryFormatJson(activeResponse?.body)}
className="bg-gray-50 dark:!bg-gray-100" contentType={contentType}
defaultValue={tryFormatJson(response?.body)} />
contentType={contentType} ) : activeResponse?.body ? (
/> <Editor
) : response?.body ? ( readOnly
<Editor key={`${contentType}:${activeResponse.updatedAt}`}
readOnly className="bg-gray-50 dark:!bg-gray-100"
key={`${contentType}:${response.updatedAt}`} defaultValue={activeResponse?.body}
className="bg-gray-50 dark:!bg-gray-100" contentType={contentType}
defaultValue={response?.body} />
contentType={contentType} ) : null}
/>
) : null}
</>
)}
</div> </div>
</div> </div>
); );

6
src-web/components/RouteError.tsx
View File

@@ -1,5 +1,5 @@
import { useRouteError } from 'react-router-dom'; import { useRouteError } from 'react-router-dom';
import { ButtonLink } from './core/ButtonLink'; import { Button } from './core/Button';
import { Heading } from './core/Heading'; import { Heading } from './core/Heading';
import { VStack } from './core/Stacks'; import { VStack } from './core/Stacks';
@@ -14,9 +14,9 @@ export default function RouteError() {
<pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal"> <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
{message} {message}
</pre> </pre>
<ButtonLink to="/" color="primary"> <Button to="/" color="primary">
Go Home Go Home
</ButtonLink> </Button>
</VStack> </VStack>
</div> </div>
); );

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

@@ -2,11 +2,12 @@ import classnames from 'classnames';
import { useState } from 'react'; import { useState } from 'react';
import { useActiveRequest } from '../hooks/useActiveRequest'; import { useActiveRequest } from '../hooks/useActiveRequest';
import { useCreateRequest } from '../hooks/useCreateRequest'; import { useCreateRequest } from '../hooks/useCreateRequest';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { useRequests } from '../hooks/useRequests'; import { useRequests } from '../hooks/useRequests';
import { useTheme } from '../hooks/useTheme'; import { useTheme } from '../hooks/useTheme';
import { useUpdateRequest } from '../hooks/useUpdateRequest'; import { useUpdateRequest } from '../hooks/useUpdateRequest';
import type { HttpRequest } from '../lib/models'; import type { HttpRequest } from '../lib/models';
import { ButtonLink } from './core/ButtonLink'; import { Button } from './core/Button';
import { IconButton } from './core/IconButton'; import { IconButton } from './core/IconButton';
import { HStack, VStack } from './core/Stacks'; import { HStack, VStack } from './core/Stacks';
import { WindowDragRegion } from './core/WindowDragRegion'; import { WindowDragRegion } from './core/WindowDragRegion';
@@ -18,13 +19,14 @@ interface Props {
export function Sidebar({ className }: Props) { export function Sidebar({ className }: Props) {
const requests = useRequests(); const requests = useRequests();
const activeRequest = useActiveRequest(); const activeRequest = useActiveRequest();
const deleteRequest = useDeleteRequest(activeRequest);
const createRequest = useCreateRequest({ navigateAfter: true }); const createRequest = useCreateRequest({ navigateAfter: true });
const { appearance, toggleAppearance } = useTheme(); const { appearance, toggleAppearance } = useTheme();
return ( return (
<div <div
className={classnames( className={classnames(
className, className,
'min-w-[12rem] bg-gray-100 h-full border-r border-gray-200 relative grid grid-rows-[auto,1fr]', 'w-[15rem] bg-gray-100 h-full border-r border-gray-200 relative grid grid-rows-[auto,1fr]',
)} )}
> >
<HStack as={WindowDragRegion} alignItems="center" justifyContent="end"> <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
@@ -47,6 +49,7 @@ export function Sidebar({ className }: Props) {
alignItems="center" alignItems="center"
justifyContent="end" justifyContent="end"
> >
<IconButton icon="trash" onClick={() => deleteRequest.mutate()} />
<IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} /> <IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} />
</HStack> </HStack>
</VStack> </VStack>
@@ -64,21 +67,28 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
const handleFocus = (el: HTMLInputElement | null) => { const handleFocus = (el: HTMLInputElement | null) => {
el?.focus(); el?.focus();
el?.select();
}; };
return ( return (
<li key={request.id} className="flex"> <li>
<ButtonLink <Button
color="custom" color="custom"
size="sm" size="sm"
className={classnames( className={classnames(
'w-full', editing && 'focus-within:border-blue-400/40',
active active
? 'bg-gray-200/70 text-gray-900' ? 'bg-gray-200/70 text-gray-900'
: 'text-gray-600 hover:text-gray-800 active:bg-gray-200/30', : 'text-gray-600 hover:text-gray-800 active:bg-gray-200/30',
)} )}
onKeyDown={(e) => {
// Hitting enter on active request during keyboard nav will start edit
if (active && e.key === 'Enter') {
e.preventDefault();
setEditing(true);
}
}}
to={`/workspaces/${request.workspaceId}/requests/${request.id}`} to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
contentEditable={editing}
onDoubleClick={() => setEditing(true)} onDoubleClick={() => setEditing(true)}
justify="start" justify="start"
> >
@@ -86,18 +96,23 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
<input <input
ref={handleFocus} ref={handleFocus}
defaultValue={request.name} defaultValue={request.name}
className="bg-transparent outline-none" className="bg-transparent outline-none w-full"
onBlur={(e) => handleSubmitNameEdit(e.currentTarget)} onBlur={(e) => handleSubmitNameEdit(e.currentTarget)}
onKeyDown={async (e) => { onKeyDown={async (e) => {
if (e.key === 'Enter') { switch (e.key) {
await handleSubmitNameEdit(e.currentTarget); case 'Enter':
await handleSubmitNameEdit(e.currentTarget);
break;
case 'Escape':
setEditing(false);
break;
} }
}} }}
/> />
) : ( ) : (
request.name || request.url <span className="truncate">{request.name || request.url}</span>
)} )}
</ButtonLink> </Button>
</li> </li>
); );
} }

6
src-web/components/Workspaces.tsx
View File

@@ -1,4 +1,4 @@
import { ButtonLink } from './core/ButtonLink'; import { Button } from './core/Button';
import { Heading } from './core/Heading'; import { Heading } from './core/Heading';
import { VStack } from './core/Stacks'; import { VStack } from './core/Stacks';
import { useWorkspaces } from '../hooks/useWorkspaces'; import { useWorkspaces } from '../hooks/useWorkspaces';
@@ -9,9 +9,9 @@ export default function Workspaces() {
<VStack as="ul" className="p-12"> <VStack as="ul" className="p-12">
<Heading>Workspaces</Heading> <Heading>Workspaces</Heading>
{workspaces.map((w) => ( {workspaces.map((w) => (
<ButtonLink key={w.id} color="gray" to={`/workspaces/${w.id}`}> <Button key={w.id} color="gray" to={`/workspaces/${w.id}`}>
{w.name} {w.name}
</ButtonLink> </Button>
))} ))}
</VStack> </VStack>
); );

13
src-web/components/core/Button.tsx
View File

@@ -1,5 +1,5 @@
import classnames from 'classnames'; import classnames from 'classnames';
import type { KeyboardEvent, MouseEvent, ReactNode } from 'react'; import type { HTMLAttributes } from 'react';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Icon } from './Icon'; import { Icon } from './Icon';
@@ -14,22 +14,13 @@ const colorStyles = {
danger: 'bg-red-400 text-white hover:bg-red-500', danger: 'bg-red-400 text-white hover:bg-red-500',
}; };
export type ButtonProps = { export type ButtonProps = HTMLAttributes<HTMLElement> & {
to?: string; to?: string;
color?: keyof typeof colorStyles; color?: keyof typeof colorStyles;
size?: 'sm' | 'md'; size?: 'sm' | 'md';
justify?: 'start' | 'center'; justify?: 'start' | 'center';
type?: 'button' | 'submit'; type?: 'button' | 'submit';
onClick?: (event: MouseEvent<HTMLElement>) => void;
onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
contentEditable?: boolean;
onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
forDropdown?: boolean; forDropdown?: boolean;
className?: string;
children?: ReactNode;
disabled?: boolean;
title?: string;
tabIndex?: number;
}; };
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any

13
src-web/components/core/ButtonLink.tsx
View File

@@ -1,13 +0,0 @@
import classnames from 'classnames';
import type { ButtonProps } from './Button';
import { Button } from './Button';
type Props = ButtonProps & {
to: string;
};
export function ButtonLink({ to, className, ...buttonProps }: Props) {
return (
<Button to={to} className={classnames(className, 'w-full')} tabIndex={-1} {...buttonProps} />
);
}

6
src-web/hooks/useResponseDelete.ts
View File

@@ -2,15 +2,15 @@ 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 type { HttpResponse } from '../lib/models';
export function useDeleteResponse(response?: HttpResponse) { export function useDeleteResponse(response: HttpResponse | null) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async () => { mutationFn: async () => {
if (response == null) return; if (response === null) return;
await invoke('delete_response', { id: response.id }); await invoke('delete_response', { id: response.id });
}, },
onSuccess: () => { onSuccess: () => {
if (response == null) return; if (response === null) return;
queryClient.setQueryData( queryClient.setQueryData(
['responses', { requestId: response.requestId }], ['responses', { requestId: response.requestId }],
(responses: HttpResponse[] = []) => responses.filter((r) => r.id !== response.id), (responses: HttpResponse[] = []) => responses.filter((r) => r.id !== response.id),