jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix ws panel crash (#2773)

Browse source
This commit is contained in:
Delirium 2024-11-22 14:07:42 +01:00 • committed by GitHub
parent dd885c65ac
commit b080a98764
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/app/components/shared/DevTools/NetworkPanel/WSPanel.tsx
View file

@ -23,9 +23,9 @@ const lineLength = 40;
function WSPanel({ socketMsgList, onClose }: Props) { function WSPanel({ socketMsgList, onClose }: Props) {
const [query, setQuery] = React.useState(''); const [query, setQuery] = React.useState('');
const [list, setList] = React.useState(socketMsgList); const [list, setList] = React.useState(socketMsgList);
const [selectedRow, setSelectedRow] = React.useState<SocketMsg | null>(null); const [selectedRow, setSelectedRow] = React.useState<{ msg: SocketMsg, id: number } | null>(null);
const onQueryChange = (e) => { const onQueryChange = (e: any) => {
setQuery(e.target.value); setQuery(e.target.value);
const newList = filterList(socketMsgList, e.target.value, [ const newList = filterList(socketMsgList, e.target.value, [
'data', 'data',
@ -69,15 +69,16 @@ function WSPanel({ socketMsgList, onClose }: Props) {
position: 'relative', position: 'relative',
}} }}
> >
{list.map((msg) => ( {list.map((msg, i) => (
<Row <Row
msg={msg} msg={msg}
key={msg.timestamp} key={msg.timestamp}
onSelect={() => setSelectedRow(msg)} onSelect={() => setSelectedRow({ msg, id: i })}
isSelected={selectedRow ? selectedRow.id === i : false}
/> />
))} ))}
{selectedRow ? ( {selectedRow ? (
<SelectedRow msg={selectedRow} onClose={() => setSelectedRow(null)} /> <SelectedRow msg={selectedRow.msg} onClose={() => setSelectedRow(null)} />
) : null} ) : null}
</div> </div>
</div> </div>
@ -127,7 +128,7 @@ function MsgDirection({ dir }: { dir: 'up' | 'down' }) {
); );
} }
function Row({ msg, onSelect }: { msg: SocketMsg; onSelect: () => void }) { function Row({ msg, onSelect, isSelected }: { msg: SocketMsg; isSelected: boolean; onSelect: () => void }) {
return ( return (
<> <>
<div <div
@ -149,7 +150,7 @@ function Row({ msg, onSelect }: { msg: SocketMsg; onSelect: () => void }) {
'rounded-full font-bold text-xl p-2 bg-white w-6 h-6 flex items-center justify-center' 'rounded-full font-bold text-xl p-2 bg-white w-6 h-6 flex items-center justify-center'
} }
> >
<span>{isOpen ? '-' : '+'}</span> <span>{isSelected ? '-' : '+'}</span>
</div> </div>
) : null} ) : null}
</div> </div>