Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tweak: fetch attachment contents with useMemo

Browse source
This commit is contained in:
alvaromartmart 2024-06-29 23:39:18 +02:00
parent b196223f31
commit 677ecae158
1 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/trace-viewer/src/ui/attachmentsTab.tsx
View file

@ -27,27 +27,15 @@ import { Expandable } from '@web/components/expandable';
type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
type TextAttachmentProps = {
attachment: Attachment;
attachmentText: string;
label?: string;
};
const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachment, label }) => {
const [text, setText] = React.useState<string | null>(null);
React.useEffect(() => {
let isMounted = true;
fetch(attachmentURL(attachment)).then(response => response.text()).then(text => {
if (isMounted)
setText(text);
});
return () => {
isMounted = false;
};
}, [attachment]);
const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachmentText, label }) => {
return <div aria-label={label}>
{
text ?
<CodeMirrorWrapper text={text} readOnly wrapLines={false}></CodeMirrorWrapper> :
attachmentText ?
<CodeMirrorWrapper text={attachmentText} readOnly wrapLines={false}></CodeMirrorWrapper> :
<div><i>Loading...</i></div>
}
</div>;
@ -55,6 +43,18 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }> = ({ attachment }) => {
const [expanded, setExpanded] = React.useState(false);
const [loaded, setLoaded] = React.useState(false);
const [attachmentText, setAttachmentText] = React.useState<string | null>(null);
React.useMemo(() => {
if (expanded && !loaded) {
fetch(attachmentURL(attachment)).then(response => response.text()).then(text => {
setAttachmentText(text);
setLoaded(true);
});
}
}, [attachment, expanded, loaded]);
return <Expandable title={
<>
{attachment.name}
@ -66,7 +66,7 @@ const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }>
</>
} expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}>
{isTextualMimeType(attachment.contentType) ?
<TextAttachment attachment={attachment} label={attachment.name} /> :
<TextAttachment attachmentText={attachmentText!} label={attachment.name} /> :
<div aria-label={attachment.name}><i>no preview available</i></div>
}
</Expandable>;