From efe072c7c423a67a1313cbe012618dfcdf9d474b Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Tue, 14 Mar 2023 00:08:03 -0700 Subject: [PATCH] Some small changes --- src-web/components/ResponsePane.tsx | 84 +++++++++++++------------- src-web/components/RouteError.tsx | 6 +- src-web/components/Sidebar.tsx | 37 ++++++++---- src-web/components/Workspaces.tsx | 6 +- src-web/components/core/Button.tsx | 13 +--- src-web/components/core/ButtonLink.tsx | 13 ---- src-web/hooks/useResponseDelete.ts | 6 +- 7 files changed, 80 insertions(+), 85 deletions(-) delete mode 100644 src-web/components/core/ButtonLink.tsx diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx index ad6cbde3..8f603b30 100644 --- a/src-web/components/ResponsePane.tsx +++ b/src-web/components/ResponsePane.tsx @@ -4,6 +4,7 @@ import { useDeleteResponses } from '../hooks/useDeleteResponses'; import { useDeleteResponse } from '../hooks/useResponseDelete'; import { useResponses } from '../hooks/useResponses'; import { tryFormatJson } from '../lib/formatters'; +import type { HttpResponse } from '../lib/models'; import { Dropdown } from './core/Dropdown'; import { Editor } from './core/Editor'; import { Icon } from './core/Icon'; @@ -20,11 +21,11 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) { const [activeResponseId, setActiveResponseId] = useState(null); const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty'); const responses = useResponses(); - const response = activeResponseId - ? responses.find((r) => r.id === activeResponseId) - : responses[responses.length - 1]; - const deleteResponse = useDeleteResponse(response); - const deleteAllResponses = useDeleteResponses(response?.requestId); + const activeResponse: HttpResponse | null = activeResponseId + ? responses.find((r) => r.id === activeResponseId) ?? null + : responses[responses.length - 1] ?? null; + const deleteResponse = useDeleteResponse(activeResponse); + const deleteAllResponses = useDeleteResponses(activeResponse?.requestId); useEffect(() => { setActiveResponseId(null); @@ -32,10 +33,15 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) { const contentType = useMemo( () => - response?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ?? 'text/plain', - [response], + activeResponse?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ?? + 'text/plain', + [activeResponse], ); + if (activeResponse === null) { + return null; + } + return (
- {response && response.status > 0 && ( + {activeResponse && activeResponse.status > 0 && (
- - {response.status} - {response.statusReason && ` ${response.statusReason}`} + + {activeResponse.status} + {activeResponse.statusReason && ` ${activeResponse.statusReason}`}  •  - {response.elapsed}ms  •  - {Math.round(response.body.length / 1000)} KB + {activeResponse.elapsed}ms  •  + {Math.round(activeResponse.body.length / 1000)} KB
)} @@ -86,7 +92,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) { '-----', ...responses.slice(0, 10).map((r) => ({ label: r.status + ' - ' + r.elapsed + ' ms', - leftSlot: response?.id === r.id ? : <>, + leftSlot: activeResponse?.id === r.id ? : <>, onSelect: () => setActiveResponseId(r.id), })), ]} @@ -96,33 +102,29 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) { - {response && ( - <> - {response?.error ? ( -
-
{response.error}
-
- ) : viewMode === 'pretty' && contentType.includes('html') ? ( - - ) : viewMode === 'pretty' && contentType.includes('json') ? ( - - ) : response?.body ? ( - - ) : null} - - )} + {activeResponse?.error ? ( +
+
{activeResponse.error}
+
+ ) : viewMode === 'pretty' && contentType.includes('html') ? ( + + ) : viewMode === 'pretty' && contentType.includes('json') ? ( + + ) : activeResponse?.body ? ( + + ) : null}
); diff --git a/src-web/components/RouteError.tsx b/src-web/components/RouteError.tsx index cb05f3b2..855a8f41 100644 --- a/src-web/components/RouteError.tsx +++ b/src-web/components/RouteError.tsx @@ -1,5 +1,5 @@ import { useRouteError } from 'react-router-dom'; -import { ButtonLink } from './core/ButtonLink'; +import { Button } from './core/Button'; import { Heading } from './core/Heading'; import { VStack } from './core/Stacks'; @@ -14,9 +14,9 @@ export default function RouteError() { 
           {message}
- + ); diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index 4f151760..cb74577c 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -2,11 +2,12 @@ import classnames from 'classnames'; import { useState } from 'react'; import { useActiveRequest } from '../hooks/useActiveRequest'; import { useCreateRequest } from '../hooks/useCreateRequest'; +import { useDeleteRequest } from '../hooks/useDeleteRequest'; import { useRequests } from '../hooks/useRequests'; import { useTheme } from '../hooks/useTheme'; import { useUpdateRequest } from '../hooks/useUpdateRequest'; import type { HttpRequest } from '../lib/models'; -import { ButtonLink } from './core/ButtonLink'; +import { Button } from './core/Button'; import { IconButton } from './core/IconButton'; import { HStack, VStack } from './core/Stacks'; import { WindowDragRegion } from './core/WindowDragRegion'; @@ -18,13 +19,14 @@ interface Props { export function Sidebar({ className }: Props) { const requests = useRequests(); const activeRequest = useActiveRequest(); + const deleteRequest = useDeleteRequest(activeRequest); const createRequest = useCreateRequest({ navigateAfter: true }); const { appearance, toggleAppearance } = useTheme(); return (
@@ -47,6 +49,7 @@ export function Sidebar({ className }: Props) { alignItems="center" justifyContent="end" > + deleteRequest.mutate()} /> @@ -64,21 +67,28 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea const handleFocus = (el: HTMLInputElement | null) => { el?.focus(); + el?.select(); }; return ( -
  • - +
    • ); } diff --git a/src-web/components/Workspaces.tsx b/src-web/components/Workspaces.tsx index 74016ce3..f87ffcfe 100644 --- a/src-web/components/Workspaces.tsx +++ b/src-web/components/Workspaces.tsx @@ -1,4 +1,4 @@ -import { ButtonLink } from './core/ButtonLink'; +import { Button } from './core/Button'; import { Heading } from './core/Heading'; import { VStack } from './core/Stacks'; import { useWorkspaces } from '../hooks/useWorkspaces'; @@ -9,9 +9,9 @@ export default function Workspaces() { Workspaces {workspaces.map((w) => ( - + ))} ); diff --git a/src-web/components/core/Button.tsx b/src-web/components/core/Button.tsx index e1d48352..c313856b 100644 --- a/src-web/components/core/Button.tsx +++ b/src-web/components/core/Button.tsx @@ -1,5 +1,5 @@ import classnames from 'classnames'; -import type { KeyboardEvent, MouseEvent, ReactNode } from 'react'; +import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; import { Link } from 'react-router-dom'; import { Icon } from './Icon'; @@ -14,22 +14,13 @@ const colorStyles = { danger: 'bg-red-400 text-white hover:bg-red-500', }; -export type ButtonProps = { +export type ButtonProps = HTMLAttributes & { to?: string; color?: keyof typeof colorStyles; size?: 'sm' | 'md'; justify?: 'start' | 'center'; type?: 'button' | 'submit'; - onClick?: (event: MouseEvent) => void; - onDoubleClick?: (event: MouseEvent) => void; - contentEditable?: boolean; - onKeyDown?: (event: KeyboardEvent) => void; forDropdown?: boolean; - className?: string; - children?: ReactNode; - disabled?: boolean; - title?: string; - tabIndex?: number; }; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/src-web/components/core/ButtonLink.tsx b/src-web/components/core/ButtonLink.tsx deleted file mode 100644 index ab7fb6db..00000000 --- a/src-web/components/core/ButtonLink.tsx +++ /dev/null @@ -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 ( -