Handle nullable vars (#47)

This commit is contained in:
lirazyehezkel 2021-05-12 12:00:35 +03:00 committed by GitHub
parent 132b158dbb
commit d975e76555
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 6 deletions

View File

@ -10,6 +10,6 @@ interface EndpointPathProps {
export const EndpointPath: React.FC<EndpointPathProps> = ({method, path}) => { export const EndpointPath: React.FC<EndpointPathProps> = ({method, path}) => {
return <div className={styles.container}> return <div className={styles.container}>
{method && <span className={`${miscStyles.protocol} ${miscStyles.method}`}>{method}</span>} {method && <span className={`${miscStyles.protocol} ${miscStyles.method}`}>{method}</span>}
<div title={path} className={styles.path}>{path}</div> {path && <div title={path} className={styles.path}>{path}</div>}
</div> </div>
}; };

View File

@ -30,7 +30,6 @@ const HarEntryTitle: React.FC<any> = ({har}) => {
const {log: {entries}} = har; const {log: {entries}} = har;
const {response, request, timings: {receive}} = entries[0]; const {response, request, timings: {receive}} = entries[0];
const {method, url} = request;
const {status, statusText, bodySize} = response; const {status, statusText, bodySize} = response;
@ -39,7 +38,7 @@ const HarEntryTitle: React.FC<any> = ({har}) => {
<StatusCode statusCode={status}/> <StatusCode statusCode={status}/>
</div>} </div>}
<div style={{flexGrow: 1, overflow: 'hidden'}}> <div style={{flexGrow: 1, overflow: 'hidden'}}>
<EndpointPath method={method} path={url}/> <EndpointPath method={request?.method} path={request?.url}/>
</div> </div>
<div style={{margin: "0 24px", opacity: 0.5}}>{formatSize(bodySize)}</div> <div style={{margin: "0 24px", opacity: 0.5}}>{formatSize(bodySize)}</div>
<div style={{marginRight: 24, opacity: 0.5}}>{status} {statusText}</div> <div style={{marginRight: 24, opacity: 0.5}}>{status} {statusText}</div>

View File

@ -7,7 +7,6 @@ const MIME_TYPE_KEY = 'mimeType';
const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed, isResponseMocked}) => { const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed, isResponseMocked}) => {
const {request, response} = entry; const {request, response} = entry;
const { url, postData} = request;
const TABS = [ const TABS = [
{tab: 'request'}, {tab: 'request'},
@ -24,7 +23,7 @@ const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed,
{!initialIsCollapsed && <div className={styles.body}> {!initialIsCollapsed && <div className={styles.body}>
<div className={styles.bodyHeader}> <div className={styles.bodyHeader}>
<Tabs tabs={TABS} currentTab={currentTab} onChange={setCurrentTab} leftAligned/> <Tabs tabs={TABS} currentTab={currentTab} onChange={setCurrentTab} leftAligned/>
<a className={styles.endpointURL} href={url} target='_blank' rel="noreferrer">{url}</a> {request?.url && <a className={styles.endpointURL} href={request.url} target='_blank' rel="noreferrer">{request.url}</a>}
</div> </div>
{ {
currentTab === TABS[0].tab && <React.Fragment> currentTab === TABS[0].tab && <React.Fragment>
@ -32,7 +31,7 @@ const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed,
<HAREntryTableSection title={'Cookies'} arrayToIterate={request.cookies}/> <HAREntryTableSection title={'Cookies'} arrayToIterate={request.cookies}/>
{postData && <HAREntryBodySection content={postData} encoding={postData.comment} contentType={postData[MIME_TYPE_KEY]}/>} {request?.postData && <HAREntryBodySection content={request.postData} encoding={request.postData.comment} contentType={request.postData[MIME_TYPE_KEY]}/>}
<HAREntryTableSection title={'Query'} arrayToIterate={request.queryString}/> <HAREntryTableSection title={'Query'} arrayToIterate={request.queryString}/>
</React.Fragment> </React.Fragment>