Skip to content

Commit 58f4344

Browse files
kevincobain2000kevincobain2000
committed
(v2.5) UI code refactored, simplified tabs and prettify curl
1 parent 374f4f1 commit 58f4344

File tree

4 files changed

+54
-98
lines changed

4 files changed

+54
-98
lines changed

‎ui/src/components/ApiAction.tsx

Lines changed: 8 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,6 @@ export default function ApiAction(props: Props) {
2828
const [sendingRequest, setSendingRequest] = useState(false);
2929
const [queryParams, setQueryParams] = useState('');
3030
const [bodyParams, setBodyParams] = useState('');
31-
const [showingInfo, setShowingInfo] = useState(true);
32-
const [showingRequest, setShowingRequest] = useState(false);
33-
const [showingResponse, setShowingResponse] = useState(false);
34-
const [showingSQL, setShowingSQL] = useState(false);
35-
const [showingLog, setShowingLog] = useState(false);
3631
const [responseData, setResponseData] = useState("");
3732
const [sqlQueriesCount, setSqlQueriesCount] = useState(0);
3833
const [sqlData, setSqlData] = useState("");
@@ -136,12 +131,12 @@ export default function ApiAction(props: Props) {
136131
delete data._lrd
137132
}
138133
setResponseData(JSON.stringify(data, null, 2))
139-
showResponse()
134+
setActiveTab('response')
140135
}).catch((error) => {
141136
setError("Response error: " + error)
142137
setResponseStatus(500)
143138
setSendingRequest(false)
144-
showResponse()
139+
setActiveTab('response')
145140
})
146141

147142
}
@@ -200,68 +195,23 @@ export default function ApiAction(props: Props) {
200195
}
201196
}
202197

203-
const showInfo = () => {
204-
setShowingRequest(false)
205-
setShowingResponse(false)
206-
setShowingSQL(false)
207-
setShowingInfo(true)
208-
setShowingLog(false)
209-
setActiveTab('info')
210-
}
211-
const showRequest = () => {
212-
setShowingResponse(false)
213-
setShowingSQL(false)
214-
setShowingInfo(false)
215-
setShowingRequest(true)
216-
setShowingLog(false)
217-
setActiveTab('request')
218-
}
219-
const showResponse = () => {
220-
setShowingRequest(false)
221-
setShowingSQL(false)
222-
setShowingInfo(false)
223-
setShowingResponse(true)
224-
setShowingLog(false)
225-
setActiveTab('response')
226-
}
227-
const showSQL = () => {
228-
setShowingRequest(false)
229-
setShowingResponse(false)
230-
setShowingInfo(false)
231-
setShowingSQL(true)
232-
setShowingLog(false)
233-
setActiveTab('sql')
234-
}
235-
const showLog = () => {
236-
setShowingRequest(false)
237-
setShowingResponse(false)
238-
setShowingInfo(false)
239-
setShowingSQL(false)
240-
setShowingLog(true)
241-
setActiveTab('log')
242-
}
243-
244198
return (
245199
<>
246200
<ApiActionTabs
247201
activeTab={activeTab}
248202
responseStatus={responseStatus}
249203
sqlQueriesCount={sqlQueriesCount}
250204
logData={logData}
251-
showInfo={showInfo}
252-
showRequest={showRequest}
253-
showResponse={showResponse}
254-
showSQL={showSQL}
255-
showLog={showLog} />
205+
setActiveTab={setActiveTab} />
256206

257207
<div className='mt-5'>
258208
{error && (
259209
<div className="alert alert-error mt-2 mb-2">{error}</div>
260210
)}
261-
{showingInfo && (
211+
{activeTab == 'info' && (
262212
<ApiActionInfo lrdDocsItem={lrdDocsItem} curlCommand={curlCommand} />
263213
)}
264-
{showingRequest && (
214+
{activeTab == 'request' && (
265215
<ApiActionRequest
266216
requestUri={requestUri}
267217
method={method}
@@ -277,19 +227,19 @@ export default function ApiAction(props: Props) {
277227
setQueryParams={setQueryParams} />
278228
)}
279229

280-
{showingResponse && (
230+
{activeTab == 'response' && (
281231
<ApiActionResponse
282232
responseHeaders={responseHeaders}
283233
responseData={responseData}
284234
timeTaken={timeTaken}
285235
responseStatus={responseStatus}
286236
serverMemory={serverMemory} />
287237
)}
288-
{showingSQL && (
238+
{activeTab == 'sql' && (
289239
<ApiActionSQL sqlData={sqlData} />
290240
)}
291241

292-
{showingLog && (
242+
{activeTab == 'logs' && (
293243
<ApiActionLog logData={logData} />
294244
)}
295245
</div>

‎ui/src/components/elements/ApiActionInfo.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { IAPIInfo } from '../../libs/types'
55
import { responsesText } from '../../libs/constants'
66
import ReactMarkdown from 'react-markdown'
77
import remarkGfm from 'remark-gfm'
8-
import { ChevronRightIcon } from '@heroicons/react/24/solid';
8+
import { ChevronRightIcon, CodeBracketIcon } from '@heroicons/react/24/solid';
99
import ApiActionCurl from './ApiActionCurl';
1010

1111
interface Props {
@@ -19,12 +19,22 @@ export default function ApiActionInfo(props: Props) {
1919
return (
2020
<div className="mockup-window border">
2121
<div className="p-5">
22-
<div className='text-sm'>
23-
{/* eslint-disable-next-line react/no-children-prop */}
24-
<ReactMarkdown children={lrdDocsItem.docBlock} remarkPlugins={[remarkGfm]} />
25-
</div>
22+
{lrdDocsItem.docBlock && (
23+
<div className='text-sm mb-10 text-slate-500'>
24+
{/* eslint-disable-next-line react/no-children-prop */}
25+
<ReactMarkdown children={lrdDocsItem.docBlock} remarkPlugins={[remarkGfm]} />
26+
</div>
27+
)}
2628
<table className="table table-fixed table-compact">
2729
<tbody>
30+
<tr>
31+
<th>Method</th>
32+
<td>
33+
<span className={`method-${lrdDocsItem.httpMethod} uppercase`}>
34+
{lrdDocsItem.httpMethod}
35+
</span>
36+
</td>
37+
</tr>
2838
{lrdDocsItem.controller && (
2939
<tr>
3040
<th>Controller</th>
@@ -43,15 +53,18 @@ export default function ApiActionInfo(props: Props) {
4353
<td>
4454
{lrdDocsItem.middlewares.map((middleware) => (
4555
<div key={shortid.generate()}>
46-
<span className="ml-1 badge badge-normal badge-sm">{middleware}</span>
56+
<span className="badge badge-ghost badge-md mb-1 rounded-sm">{middleware}</span>
4757
<br />
4858
</div>
4959
))}
5060
</td>
5161
</tr>
5262
)}
5363
<tr>
54-
<th>Responses</th>
64+
<th>
65+
Response
66+
<br />HTTP Codes
67+
</th>
5568
<td>
5669
<div className="collapse">
5770
<input type="checkbox" />
@@ -72,7 +85,10 @@ export default function ApiActionInfo(props: Props) {
7285
</td>
7386
</tr>
7487
<tr>
75-
<th>Curl</th>
88+
<th>
89+
<CodeBracketIcon className='inline-block w-4 h-4 mr-1' />
90+
Curl
91+
</th>
7692
<td>
7793
<ApiActionCurl curlCommand={curlCommand} />
7894
</td>

‎ui/src/components/elements/ApiActionTabs.tsx

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,36 @@ interface Props {
66
responseStatus: number,
77
activeTab: string,
88
sqlQueriesCount: number,
9-
logData: string,
10-
showInfo: () => void,
11-
showRequest: () => void,
12-
showResponse: () => void,
13-
showSQL: () => void,
14-
showLog: () => void,
9+
logData: string,
10+
setActiveTab: (tab: string) => void
1511
}
1612

1713
export default function ApiActionTabs(props: Props) {
18-
const { activeTab, responseStatus, sqlQueriesCount, logData, showInfo, showRequest, showResponse, showSQL, showLog } = props
14+
const { activeTab, responseStatus, sqlQueriesCount, logData, setActiveTab } = props
1915

2016
return (
2117
<div className="tabs tabs-boxed">
22-
<a className={`tab ${activeTab == 'info' ? 'tab-active' : ''}`} onClick={showInfo}>
18+
<a className={`tab ${activeTab == 'info' ? 'tab-active' : ''}`} onClick={() => setActiveTab('info')}>
2319
<InformationCircleIcon className='inline-block w-5 h-5 mr-1' /> Info
2420
</a>
25-
<a className={`tab ${activeTab == 'request' ? 'tab-active' : ''}`} onClick={showRequest}>
21+
<a className={`tab ${activeTab == 'request' ? 'tab-active' : ''}`} onClick={() => setActiveTab('request')}>
2622
<PaperAirplaneIcon className='inline-block w-5 h-5 mr-1' /> Request
2723
</a>
28-
<a className={`tab ${activeTab == 'response' ? 'tab-active' : ''}`} onClick={showResponse}>
24+
<a className={`tab ${activeTab == 'response' ? 'tab-active' : ''}`} onClick={() => setActiveTab('response')}>
2925
<ReceiptRefundIcon className='inline-block w-5 h-5 mr-1' /> Response
3026
{responseStatus != 0 && (
3127
<div className={`ml-1 badge badge-sm badge-${responseStatus} badge-info`}>{responseStatus}</div>
3228
)}
3329
</a>
34-
<a className={`tab ${activeTab == 'sql' ? 'tab-active' : ''}`} onClick={showSQL}>
30+
<a className={`tab ${activeTab == 'sql' ? 'tab-active' : ''}`} onClick={() => setActiveTab('sql')}>
3531
<CircleStackIcon className='inline-block w-5 h-5 mr-1' /> SQL
3632
{responseStatus != 0 && (
3733
<div className="ml-1 badge badge-sm badge-warning">
3834
{sqlQueriesCount}
3935
</div>
4036
)}
4137
</a>
42-
<a className={`tab ${activeTab == 'log' ? 'tab-active' : ''}`} onClick={showLog}>
38+
<a className={`tab ${activeTab == 'log' ? 'tab-active' : ''}`} onClick={() => setActiveTab('logs')}>
4339
<DocumentTextIcon className='inline-block w-5 h-5 mr-1' /> Logs
4440
{responseStatus != 0 && (
4541
<div className="ml-1 badge badge-sm badge-info">

‎ui/src/libs/strings.tsx

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,24 @@ export const explode = (str: string, maxLength: number, by: string) => {
1414

1515
export const makeCurlCommand = (host:string, url: string, method: string, queries: string, headers: any): string => {
1616

17-
const get = (queries: string) => {
18-
let curl = `curl -X ${method} "${host}/${url}${queries}"`
19-
20-
try {
21-
const jsonRequestHeaders = JSON.parse(headers)
22-
for (const [key, value] of Object.entries(jsonRequestHeaders)) {
23-
curl += ` -H "${key}: ${value}"`
24-
}
25-
} catch (error: any) {
26-
curl += ` -H "Content-Type: application/json"`
17+
let curl = `curl`
18+
curl += `\n -X ${method}`
19+
try {
20+
const jsonRequestHeaders = JSON.parse(headers)
21+
for (const [key, value] of Object.entries(jsonRequestHeaders)) {
22+
curl += `\n -H "${key}: ${value}"`
2723
}
28-
24+
} catch (error: any) {
25+
curl += `\n -H "Content-Type: application/json"`
26+
}
27+
const get = (queries: string) => {
28+
curl += `\n ${host}/${url}`
29+
curl += `\n${queries}`
2930
return curl
3031
}
3132
const post = (jsonBody: string) => {
32-
let curl = `curl -X ${method} "${url}" -d '${jsonBody}'`
33-
try {
34-
const jsonRequestHeaders = JSON.parse(headers)
35-
for (const [key, value] of Object.entries(jsonRequestHeaders)) {
36-
curl += ` -H "${key}: ${value}"`
37-
}
38-
} catch (error: any) {
39-
curl += ` -H "Content-Type: application/json"`
40-
}
33+
curl += `\n ${host}/${url}`
34+
curl += `\n -d '${jsonBody}'`
4135
return curl
4236
}
4337
if (method === "GET" || method === "DELETE" || method === "HEAD") {

0 commit comments

Comments
 (0)