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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import * as React from "react";
import {Dispatch, SetStateAction, useContext, useMemo} from "react";
import {RequestPayload, ResponsePayload} from "~hooks/useRequests";
import ReactJson from 'react-json-view';
import styles from './Content.module.scss';
import {Button, Col, Container, Row} from "react-bootstrap";
import {DarkModeContext} from "../../contexts/DarkMode";
function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null {
console.log(headers, key)
try {
const [_, value] = Object
.entries(headers)
.find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase())
return unit !== undefined
? `${value}${unit}`
: value
} catch {
return null;
}
}
interface ContentProps {
data: RequestPayload | ResponsePayload
setRaw: Dispatch<SetStateAction<boolean>>
raw?: boolean
}
export default function Content({ raw, setRaw, data }: ContentProps): JSX.Element {
return (
<div className={styles.content}>
<Container fluid className="border-bottom">
<Row className="py-3">
<Col className="form-check form-switch ms-3">
<input className="form-check-input" id='raw' type='checkbox' checked={raw} role="switch" onChange={() => setRaw(!raw)}/>
<label htmlFor='raw' className="form-check-label">Raw</label>
</Col>
<Col xs="auto">
{
[
getHeader(data.headers, 'content-length', 'bytes'),
getHeader(data.headers, 'content-type'),
].filter(x => x !== null).join('; ')
}
</Col>
</Row>
</Container>
<Row className={styles.body}>
{(() => {
try {
return ContentBody({ data, raw })
} catch {
return (
<div className={styles.renderError}>
<p>Body could not be rendered</p>
<Button variant="link" onClick={() => setRaw(true)}>View raw</Button>
</div>
)
}
})()}
</Row>
</div >
)
};
function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
const { darkMode } = useContext(DarkModeContext);
const contentType = useMemo(() => {
if (raw) {
return '';
}
const type = getHeader(data.headers, 'content-type');
return type.toLowerCase().split(';')[0];
}, [data, raw]);
if (raw) {
return (
<pre className="mb-0">
<code>
{atob(data.body)}
</code>
</pre>
)
}
if (['application/pdf', 'text/html'].includes(contentType)) {
return <iframe
className="bg-white"
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))}
theme={darkMode ? "monokai" : undefined}
style={{
padding: '1em',
width: '100%',
height: '100%',
overflowY: 'auto',
}}
/>
}
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');
};
|
