Skip to content

Commit

Permalink
Check response type if html to show html example of using dd() functi…
Browse files Browse the repository at this point in the history 
…on (#383)
  • Loading branch information
@rawahamid
rawahamid authored Aug 6, 2024
1 parent a475303 commit 564b6b8
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 42 deletions.
10 changes: 6 additions & 4 deletions ui/src/components/ApiAction.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import React, { useEffect, useState } from 'react';
// noinspection t

import React, {useEffect, useState} from 'react';

import useLocalStorage from 'react-use-localstorage';
import {makeCurlCommand } from '../libs/strings'
import type {IAPIInfo, LRDResponse, IConfig} from '../libs/types'
import {makeCurlCommand} from '../libs/strings'
import type {IAPIInfo, IConfig, LRDResponse} from '../libs/types'
import ApiActionResponse from './elements/ApiActionResponse'
import ApiActionRequest from './elements/ApiActionRequest'
import ApiActionTabs from './elements/ApiActionTabs'
import ApiActionInfo from './elements/ApiActionInfo'
import ApiActionSQL from './elements/ApiActionSQL'
import ApiActionLog from './elements/ApiActionLog'
import ApiActionEvents from './elements/ApiActionEvents'
import { objectToFormData } from '../libs/object';
import {objectToFormData} from '../libs/object';

interface Props {
lrdDocsItem: IAPIInfo,
Expand Down
99 changes: 61 additions & 38 deletions ui/src/components/elements/ApiActionResponse.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { useEffect } from 'react';
// noinspection t

import React, {useEffect, useState} from 'react';
import "ace-builds";
import jsonWorkerUrl from 'ace-builds/src-min-noconflict/worker-json?url';

ace.config.setModuleUrl('ace/mode/json_worker', jsonWorkerUrl);

import AceEditor from 'react-ace';
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-one_dark";
import "ace-builds/src-noconflict/ext-language_tools";
import useLocalStorage from 'react-use-localstorage';

ace.config.setModuleUrl('ace/mode/json_worker', jsonWorkerUrl);

interface Props {
responseData: string,
Expand All @@ -25,7 +25,12 @@ export default function ApiActionResponse(props: Props) {
const { responseHeaders, responseData, timeTaken, responseStatus, serverMemory, requestUri, method } = props
const [savePreviousResponse] = useLocalStorage('savePreviousResponse', 'false');
const [previousResponse, setPreviousResponse] = useLocalStorage('previousResponse' + requestUri + method, '');
const [isHtml, setIsHtml] = useState(false);
useEffect(() => {
if (JSON.parse(responseHeaders)['content-type'].split(';')[0] === 'text/html') {
setIsHtml(true)
}

if (responseData && savePreviousResponse === 'true') {
setPreviousResponse(responseData)
}
Expand All @@ -36,7 +41,7 @@ export default function ApiActionResponse(props: Props) {
{responseHeaders && (
<>
<div className="collapse collapse-arrow">
<input type="checkbox" />
<input type="checkbox"/>
<div className="collapse-title text-sm text-slate-500 pl-0">
Show Response Headers
</div>
Expand All @@ -49,14 +54,18 @@ export default function ApiActionResponse(props: Props) {
wrapEnabled={true}
value={responseHeaders}
theme="one_dark"
onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}
onLoad={function (editor) {
editor.renderer.setPadding(0);
editor.renderer.setScrollMargin(5, 5, 5, 5);
editor.renderer.setShowPrintMargin(false);
}}
editorProps={{
$blockScrolling: true
}}
/>
</div>
</div>
<br />
<br/>
</>
)}
{(!responseData && !previousResponse) && (
Expand All @@ -67,41 +76,55 @@ export default function ApiActionResponse(props: Props) {
{(!responseData && previousResponse) && (
<div className="mockup-code mb-5">
<span className='pl-5 text-sm text-warning'>Previous Response</span>
<AceEditor
maxLines={50}
width='100%'
mode="json"
wrapEnabled={true}
readOnly={true}
value={previousResponse}
theme="one_dark"
onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}
editorProps={{
$blockScrolling: true
}}
/>
{! isHtml ? (
<AceEditor
maxLines={50}
width='100%'
mode="json"
wrapEnabled={true}
readOnly={true}
value={previousResponse}
theme="one_dark"
onLoad={function (editor) {
editor.renderer.setPadding(0);
editor.renderer.setScrollMargin(5, 5, 5, 5);
editor.renderer.setShowPrintMargin(false);
}}
editorProps={{
$blockScrolling: true
}}
/>
) : (<div dangerouslySetInnerHTML={{__html: responseData}} />)}
</div>
)}
{responseData && (
<div className="mockup-code">
<span className='pl-5 text-sm text-slate-500'>RESPONSE</span>
<br />
<span className='pl-5 text-sm'>Time taken: <b>{timeTaken}ms</b>, Status Code: <b>{responseStatus}</b>, Server memory: <b>{serverMemory}</b></span>
<AceEditor
maxLines={50}
width='100%'
mode="json"
wrapEnabled={true}
readOnly={true}
value={responseData}
theme="one_dark"
onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}
editorProps={{
$blockScrolling: true
}}
/>
</div>
)}
</>
<br/>
<span
className='pl-5 text-sm'>Time taken: <b>{timeTaken}ms</b>, Status Code: <b>{responseStatus}</b>, Server memory: <b>{serverMemory}</b></span>
{! isHtml ? (
<AceEditor
maxLines={50}
width='100%'
mode="json"
wrapEnabled={true}
readOnly={true}
value={responseData}
theme="one_dark"
onLoad={function (editor) {
editor.renderer.setPadding(0);
editor.renderer.setScrollMargin(5, 5, 5, 5);
editor.renderer.setShowPrintMargin(false);
}}
editorProps={{
$blockScrolling: true
}}
/>
) : (<div dangerouslySetInnerHTML={{__html: responseData}} />)}
</div>
)
}
</>
)
}

0 comments on commit 564b6b8

Please sign in to comment.