1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import styles from "~components/Details/Details.module.scss";
import * as React from "react";
import classNames from "classnames";
import {RequestPayload, ResponsePayload} from "~hooks/useRequests";
import {
Dispatch,
forwardRef, SetStateAction,
useEffect,
useImperativeHandle,
useMemo,
useRef,
useState
} from "react";
import ReactJson from 'react-json-view';
import styles from './Content.module.scss';
interface ContentProps {
data: RequestPayload | ResponsePayload
setRaw: Dispatch<SetStateAction<boolean>>
raw?: boolean
}
export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.Element {
return (
<div className={styles.content}>
<div className={styles.header}>
<input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/>
<label htmlFor='raw'>Raw</label>
</div>
<div className={styles.body}>
{(() => {
try {
return ContentBody({ ...props, raw })
} catch {
return (
<div className={styles.renderError}>
<p>Body could not be rendered</p>
<a onClick={() => setRaw(true)}>View raw</a>
</div>
)
}
})()}
</div>
</div>
)
};
function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
const contentType = useMemo(() => {
if (raw) {
return '';
}
const [_, type] = (
Object
.entries(data.headers)
.find(([key]) => key.toLowerCase() === 'content-type')
);
return type.toLowerCase().split(';')[0];
}, [data, raw]);
if (raw) {
return <pre>{atob(data.body)}</pre>
}
if (['application/pdf', 'text/html'].includes(contentType)) {
return <iframe
src={`data:${contentType};base64,${data.body}`}
srcDoc={contentType === 'text/html' ? atob(data.body) : undefined}
loading='lazy'
sandbox=''
/>
}
if (contentType.startsWith('application/json')) {
return <ReactJson
src={JSON.parse(atob(data.body))}
style={{
padding: '1em',
width: '100%',
height: '100%',
}}
/>
}
if (contentType.startsWith('audio')) {
return <audio src={`data:${contentType};base64,${data.body}`} />
}
if (contentType.startsWith('video')) {
return <video src={`data:${contentType};base64,${data.body}`} />
}
if (contentType.startsWith('image')) {
return <img src={`data:${contentType};base64,${data.body}`} alt=''/>
}
throw new Error('Not Rendered');
};
|
