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

Fix flash loading response viewer

Browse Source
This commit is contained in:
Gregory Schier
2024-06-17 11:43:45 -07:00
parent ee776143b2
commit 5b2162e48d
5 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-web/components/responseViewers/CsvViewer.tsx
View File

@@ -13,8 +13,8 @@ export function CsvViewer({ response, className }: Props) {
const body = useResponseBodyText(response); const body = useResponseBodyText(response);
const parsed = useMemo(() => { const parsed = useMemo(() => {
if (body === null) return null; if (body.data == null) return null;
return Papa.parse<string[]>(body); return Papa.parse<string[]>(body.data);
}, [body]); }, [body]);
if (parsed === null) return null; if (parsed === null) return null;

9
src-web/components/responseViewers/JsonViewer.tsx
View File

@@ -9,12 +9,15 @@ interface Props {
} }
export function JsonViewer({ response, className }: Props) { export function JsonViewer({ response, className }: Props) {
const rawBody = useResponseBodyText(response) ?? ''; const rawBody = useResponseBodyText(response);
if (rawBody.isLoading || rawBody.data == null) return null;
let parsed = {}; let parsed = {};
try { try {
parsed = JSON.parse(rawBody); parsed = JSON.parse(rawBody.data);
} catch (e) { } catch (e) {
// foo // Nothing yet
} }
return ( return (

15
src-web/components/responseViewers/TextViewer.tsx
View File

@@ -37,7 +37,7 @@ export function TextViewer({ response, pretty, className }: Props) {
); );
const contentType = useContentTypeFromHeaders(response.headers); const contentType = useContentTypeFromHeaders(response.headers);
const rawBody = useResponseBodyText(response) ?? null; const rawBody = useResponseBodyText(response);
const isSearching = filterText != null; const isSearching = filterText != null;
const filteredResponse = useFilterResponse({ const filteredResponse = useFilterResponse({
@@ -99,7 +99,11 @@ export function TextViewer({ response, pretty, className }: Props) {
return result; return result;
}, [canFilter, filterText, isJson, isSearching, response.id, setFilterText, toggleSearch]); }, [canFilter, filterText, isJson, isSearching, response.id, setFilterText, toggleSearch]);
if (rawBody == null) { if (rawBody.isLoading) {
return null;
}
if (rawBody.data == null) {
return <BinaryViewer response={response} />; return <BinaryViewer response={response} />;
} }
@@ -109,10 +113,11 @@ export function TextViewer({ response, pretty, className }: Props) {
const formattedBody = const formattedBody =
pretty && contentType?.includes('json') pretty && contentType?.includes('json')
? tryFormatJson(rawBody) ? tryFormatJson(rawBody.data)
: pretty && contentType?.includes('xml') : pretty && contentType?.includes('xml')
? tryFormatXml(rawBody) ? tryFormatXml(rawBody.data)
: rawBody; : rawBody.data;
const body = isSearching && filterText?.length > 0 ? filteredResponse : formattedBody; const body = isSearching && filterText?.length > 0 ? filteredResponse : formattedBody;
return ( return (

2
src-web/components/responseViewers/WebPageViewer.tsx
View File

@@ -8,7 +8,7 @@ interface Props {
export function WebPageViewer({ response }: Props) { export function WebPageViewer({ response }: Props) {
const { url } = response; const { url } = response;
const body = useResponseBodyText(response) ?? ''; const body = useResponseBodyText(response).data ?? '';
const contentForIframe: string | undefined = useMemo(() => { const contentForIframe: string | undefined = useMemo(() => {
if (body.includes('<head>')) { if (body.includes('<head>')) {

3
src-web/hooks/useResponseBodyText.ts
View File

@@ -5,7 +5,6 @@ import { getResponseBodyText } from '../lib/responseBody';
export function useResponseBodyText(response: HttpResponse) { export function useResponseBodyText(response: HttpResponse) {
return useQuery<string | null>({ return useQuery<string | null>({
queryKey: ['response-body-text', response?.updatedAt], queryKey: ['response-body-text', response?.updatedAt],
initialData: null,
queryFn: () => getResponseBodyText(response), queryFn: () => getResponseBodyText(response),
}).data; });
} }