Skip to content

Commit 5413ede

Browse files
sharevbsharevb
committed
Merge branch 'feat/api-tester' into chore/all-my-stuffs
# Conflicts: # components.d.ts # src/tools/index.ts
2 parents 14b610b + 42f39bf commit 5413ede

File tree

5 files changed

+173
-2
lines changed

5 files changed

+173
-2
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,5 +150,6 @@
150150
"vitest": "^0.34.0",
151151
"workbox-window": "^7.0.0",
152152
"zx": "^7.2.1"
153-
}
153+
},
154+
"packageManager": "[email protected]"
154155
}

‎src/components/TextareaCopyable.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const props = withDefaults(
1717
language?: string
1818
copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
1919
copyMessage?: string
20+
wordWrap?: boolean
2021
}>(),
2122
{
2223
followHeightOf: null,
@@ -49,7 +50,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
4950
:style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
5051
>
5152
<n-config-provider :hljs="hljs">
52-
<n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
53+
<n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
5354
</n-config-provider>
5455
</n-scrollbar>
5556
<div absolute right-10px top-10px>

‎src/tools/api-tester/api-tester.vue

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<script setup lang="ts">
2+
import { useQueryParamOrStorage } from '@/composable/queryParams';
3+
import TextareaCopyable from '@/components/TextareaCopyable.vue';
4+
5+
interface KeyValuePair {
6+
key: string
7+
value?: string
8+
}
9+
const baseUrl = useQueryParamOrStorage({ name: 'url', storageName: 'api-tester:url', defaultValue: '' });
10+
const method = useQueryParamOrStorage({ name: 'method', storageName: 'api-tester:m', defaultValue: 'POST' });
11+
const queryParams = useQueryParamOrStorage<KeyValuePair[]>({ name: 'params', storageName: 'api-tester:params', defaultValue: [] });
12+
const headers = useQueryParamOrStorage<KeyValuePair[]>({ name: 'headers', storageName: 'api-tester:headers', defaultValue: [] });
13+
const contentType = useQueryParamOrStorage({ name: 'ct', storageName: 'api-tester:ct', defaultValue: 'application/json' });
14+
const body = useQueryParamOrStorage({ name: 'body', storageName: 'api-tester:body', defaultValue: '' });
15+
const noCORS = ref(false);
16+
const apiCallResult = ref();
17+
18+
const inprogress = ref(false);
19+
async function callAPI() {
20+
const url = new URL(baseUrl.value);
21+
for (const kv of queryParams.value) {
22+
if (!kv.key) {
23+
continue;
24+
}
25+
url.searchParams.append(kv.key, kv.value || '');
26+
}
27+
const queryHeaders = [] as [string, string][];
28+
for (const kv of headers.value) {
29+
if (!kv.key) {
30+
continue;
31+
}
32+
queryHeaders.push([kv.key, kv.value || '']);
33+
}
34+
queryHeaders.push(['Content-Type', contentType.value || '']);
35+
36+
try {
37+
const response = await fetch(url, {
38+
method: method.value,
39+
headers: queryHeaders,
40+
body: (method.value === 'GET' || method.value === 'HEAD') ? null : body.value,
41+
mode: noCORS.value ? 'no-cors' : 'cors',
42+
});
43+
44+
let responseText = await response.text();
45+
try {
46+
responseText = JSON.stringify(JSON.parse(responseText), null, 2);
47+
}
48+
catch (_) {
49+
}
50+
apiCallResult.value = {
51+
code: response.status,
52+
error: '',
53+
result: responseText,
54+
};
55+
}
56+
catch (err: any) {
57+
apiCallResult.value = {
58+
code: -1,
59+
error: err.toString(),
60+
result: null,
61+
};
62+
}
63+
}
64+
65+
function emptyKeyPair() {
66+
return {
67+
key: '',
68+
value: '',
69+
};
70+
}
71+
</script>
72+
73+
<template>
74+
<div>
75+
<c-card title="API Calling">
76+
<c-input-text
77+
v-model:value="baseUrl"
78+
label="Base API Url"
79+
placeholder="Base API Url"
80+
mb-2
81+
/>
82+
83+
<c-select
84+
v-model:value="method"
85+
label="HTTP Method:"
86+
:options="['GET', 'POST', 'PUT', 'DELETE', 'PATCH']"
87+
mb-2
88+
/>
89+
90+
<c-card title="Headers" mb-2>
91+
<n-dynamic-input v-model:value="headers" :on-create="emptyKeyPair">
92+
<template #create-button-default>
93+
Add a new HTTP Header
94+
</template>
95+
<template #default="{ value }">
96+
<div v-if="value" w-100 flex justify-center gap-2>
97+
<c-input-text v-model:value="value.key" placeholder="Header Name" type="text" />
98+
<c-input-text v-model:value="value.value" placeholder="Value" type="text" />
99+
</div>
100+
</template>
101+
</n-dynamic-input>
102+
<c-select
103+
v-model:value="contentType"
104+
label="Content-Type:"
105+
:options="['application/json', 'text/plain']"
106+
mt-2
107+
/>
108+
</c-card>
109+
110+
<c-card title="Query Parameters" mb-2>
111+
<n-dynamic-input v-model:value="queryParams" :on-create="emptyKeyPair">
112+
<template #create-button-default>
113+
Add a new Query Parameter
114+
</template>
115+
<template #default="{ value }">
116+
<div v-if="value" w-100 flex justify-center gap-2>
117+
<c-input-text v-model:value="value.key" placeholder="Param Name" type="text" />
118+
<c-input-text v-model:value="value.value" placeholder="Value" type="text" />
119+
</div>
120+
</template>
121+
</n-dynamic-input>
122+
</c-card>
123+
<c-input-text
124+
v-if="method !== 'GET' && method !== 'HEAD'"
125+
v-model:value="body"
126+
label="Body"
127+
placeholder="HTTP Query body"
128+
multiline
129+
monospace
130+
mb-2
131+
/>
132+
133+
<n-checkbox v-model:checked="noCORS">
134+
No CORS
135+
</n-checkbox>
136+
137+
<div mt-5 flex justify-center>
138+
<c-button secondary @click="callAPI">
139+
Call API
140+
</c-button>
141+
</div>
142+
</c-card>
143+
<n-spin
144+
v-if="inprogress"
145+
size="small"
146+
/>
147+
<c-alert v-if="!inprogress && apiCallResult && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
148+
<p><strong>Status code = {{ apiCallResult.code }}</strong></p>
149+
<TextareaCopyable :value="apiCallResult.error" copy-placement="none" />
150+
</c-alert>
151+
<c-card v-if="!inprogress && apiCallResult && apiCallResult.code === 200" mt-12 title="API Call result">
152+
<TextareaCopyable :value="apiCallResult.result" word-wrap />
153+
</c-card>
154+
</div>
155+
</template>

‎src/tools/api-tester/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { World } from '@vicons/tabler';
2+
import { defineTool } from '../tool';
3+
4+
export const tool = defineTool({
5+
name: 'API Tester',
6+
path: '/api-tester',
7+
description: 'HTTP API Tester',
8+
keywords: ['api', 'http', 'call', 'tester'],
9+
component: () => import('./api-tester.vue'),
10+
icon: World,
11+
createdAt: new Date('2024-05-11'),
12+
});

‎src/tools/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { tool as regexMemo } from './regex-memo';
1414
import { tool as markdownToHtml } from './markdown-to-html';
1515
import { tool as pasteAsMarkdown } from './paste-as-markdown';
1616
import { tool as aiPromptSplitter } from './ai-prompt-splitter';
17+
import { tool as apiTester } from './api-tester';
1718
import { tool as pdfSignatureChecker } from './pdf-signature-checker';
1819
import { tool as numeronymGenerator } from './numeronym-generator';
1920
import { tool as macAddressGenerator } from './mac-address-generator';
@@ -139,6 +140,7 @@ export const toolsByCategory: ToolCategory[] = [
139140
httpStatusCodes,
140141
jsonDiff,
141142
safelinkDecoder,
143+
apiTester,
142144
],
143145
},
144146
{

0 commit comments

Comments
 (0)