blob: 83c4c96de6bf5a0f510304ab6161fd81a81c21de (
plain)
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
|
import { Frame } from "~/types";
import React, { PropsWithChildren, useContext } from "react";
import { Col, ListGroup, Row } from "react-bootstrap";
import classNames from "classnames";
import styles from "./Frames.module.scss";
import dayjs from "dayjs";
import ReactJson from "react-json-view";
import { DarkModeContext } from "~/contexts/DarkMode";
function isJson(data: any): boolean {
try {
JSON.parse(data);
return true;
} catch {
return false;
}
}
interface FramesProps {
frames: Frame[];
}
export default function Frames({
frames,
}: PropsWithChildren<FramesProps>): JSX.Element {
const { darkMode } = useContext(DarkModeContext);
return (
<ListGroup variant="flush" as="ul" className={"flex-grow-1"}>
{frames.length > 0 ? (
frames.map((frame) => {
// Inbound relative to the client
const inbound = frame.type !== "websocket_inbound";
const body =
frame.type !== "websocket_disconnect"
? atob(frame.payload.body)
: null;
return (
<ListGroup.Item
as="li"
key={frame.payload.id}
className={classNames({
"border-bottom": true,
})}
>
<Row>
<Col className="flex-grow-0 d-flex align-items-center text-nowrap text-muted">
{dayjs(frame.payload?.timestamp).format("HH:mm:ss.SSS")}
</Col>
<Col
className={classNames(
styles.arrow,
"flex-grow-0 d-flex align-items-center flex-nowrap",
{
[styles.inbound]: inbound,
[styles.outbound]: !inbound,
}
)}
>
{inbound ? "▼" : "▲"}
</Col>
<Col className="flex-grow-1">{body}</Col>
</Row>
</ListGroup.Item>
);
})
) : (
<div className={styles.noRequest}>
<p>No messages</p>
</div>
)}
</ListGroup>
);
}
|
