Skip to content

Commit 932fac3

Browse files
committed
Refactor ResponseViewer and useApiTester components to improve status handling; simplify status color logic and add status text resolution for better clarity
1 parent e11392a commit 932fac3

3 files changed

Lines changed: 257 additions & 244 deletions

File tree

spa/src/components/api-tester/ResponseViewer.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { useState } from 'react';
22
import type { ResponseState } from './useApiTester';
33
import { CodeBlock } from '../CodeBlock';
44

5-
function statusBadgeColor(status: number): string {
6-
if (status === 0) return 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300';
7-
if (status < 300) return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300';
8-
if (status < 500) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300';
9-
return 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300';
5+
function statusColor(status: number): string {
6+
if (status === 0) return 'text-rose-600 dark:text-rose-400';
7+
if (status < 300) return 'text-emerald-600 dark:text-emerald-400';
8+
if (status < 500) return 'text-amber-600 dark:text-amber-400';
9+
return 'text-rose-600 dark:text-rose-400';
1010
}
1111

1212
function codeBlockLang(format: string): 'json' | 'xml' | 'bash' {
@@ -66,7 +66,7 @@ export function ResponseViewer({ response, error, sending, formatSize }: Respons
6666
<div className="flex flex-col h-full">
6767
{/* Status bar */}
6868
<div className="p-3 flex items-center gap-3">
69-
<span className={`text-xs font-bold px-2 py-0.5 rounded ${statusBadgeColor(response.status)}`}>
69+
<span className={`text-sm font-semibold ${statusColor(response.status)}`}>
7070
{response.status} {response.statusText}
7171
</span>
7272
<span className="text-[11px] text-slate-500 dark:text-slate-400">{response.timeMs}ms</span>

spa/src/components/api-tester/useApiTester.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,19 @@ function formatSize(bytes: number): string {
140140
return `${(bytes / 1024).toFixed(1)} KB`;
141141
}
142142

143+
const STATUS_TEXTS: Record<number, string> = {
144+
200: 'OK', 201: 'Created', 202: 'Accepted', 204: 'No Content',
145+
301: 'Moved Permanently', 302: 'Found', 304: 'Not Modified',
146+
400: 'Bad Request', 401: 'Unauthorized', 403: 'Forbidden',
147+
404: 'Not Found', 405: 'Method Not Allowed', 409: 'Conflict',
148+
415: 'Unsupported Media Type', 422: 'Unprocessable Entity', 429: 'Too Many Requests',
149+
500: 'Internal Server Error', 502: 'Bad Gateway', 503: 'Service Unavailable',
150+
};
151+
152+
function resolveStatusText(status: number, statusText: string): string {
153+
return statusText || (STATUS_TEXTS[status] ?? '');
154+
}
155+
143156
function detectBodyFormat(contentType: string): string {
144157
if (contentType.includes('json')) return 'json';
145158
if (contentType.includes('xml') || contentType.includes('html')) return 'xml';
@@ -258,7 +271,7 @@ export function useApiTester(endpoint: Endpoint, spec: OpenApiSpec): UseApiTeste
258271

259272
const responseState: ResponseState = {
260273
status: res.status,
261-
statusText: res.statusText,
274+
statusText: resolveStatusText(res.status, res.statusText),
262275
timeMs: elapsed,
263276
sizeBytes: new Blob([bodyText]).size,
264277
headers: resHeaders,

0 commit comments

Comments
 (0)