Skip to content

Commit 130183c

Browse files
sharevbsharevb
committed
fix: final modifs
1 parent 43922ae commit 130183c

File tree

3 files changed

+92
-20
lines changed

3 files changed

+92
-20
lines changed

‎components.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
1111
export interface GlobalComponents {
1212
'404.page': typeof import('./src/pages/404.page.vue')['default']
1313
About: typeof import('./src/pages/About.vue')['default']
14+
ApiTester: typeof import('./src/tools/api-tester/api-tester.vue')['default']
1415
App: typeof import('./src/App.vue')['default']
1516
AsciiTextDrawer: typeof import('./src/tools/ascii-text-drawer/ascii-text-drawer.vue')['default']
1617
'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
@@ -127,17 +128,20 @@ declare module '@vue/runtime-core' {
127128
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
128129
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
129130
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
131+
NCheckbox: typeof import('naive-ui')['NCheckbox']
130132
NCode: typeof import('naive-ui')['NCode']
131133
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
132134
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
133135
NDivider: typeof import('naive-ui')['NDivider']
136+
NDynamicInput: typeof import('naive-ui')['NDynamicInput']
134137
NEllipsis: typeof import('naive-ui')['NEllipsis']
135138
NFormItem: typeof import('naive-ui')['NFormItem']
136139
NGi: typeof import('naive-ui')['NGi']
137140
NGrid: typeof import('naive-ui')['NGrid']
138141
NH1: typeof import('naive-ui')['NH1']
139142
NH3: typeof import('naive-ui')['NH3']
140143
NIcon: typeof import('naive-ui')['NIcon']
144+
NInput: typeof import('naive-ui')['NInput']
141145
NInputNumber: typeof import('naive-ui')['NInputNumber']
142146
NLabel: typeof import('naive-ui')['NLabel']
143147
NLayout: typeof import('naive-ui')['NLayout']

‎src/composable/queryParams.ts

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useRouteQuery } from '@vueuse/router';
22
import { computed } from 'vue';
3+
import { useStorage } from '@vueuse/core';
34

4-
export { useQueryParam };
5+
export { useQueryParam, useQueryParamOrStorage };
56

67
const transformers = {
78
number: {
@@ -16,6 +17,12 @@ const transformers = {
1617
fromQuery: (value: string) => value.toLowerCase() === 'true',
1718
toQuery: (value: boolean) => (value ? 'true' : 'false'),
1819
},
20+
object: {
21+
fromQuery: (value: string) => {
22+
return JSON.parse(value);
23+
},
24+
toQuery: (value: object) => JSON.stringify(value),
25+
},
1926
};
2027

2128
function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
3340
},
3441
});
3542
}
43+
44+
function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
45+
const type = typeof defaultValue;
46+
const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
47+
48+
const storageRef = useStorage(storageName, defaultValue);
49+
const proxyDefaultValue = transformer.toQuery(defaultValue as never);
50+
const proxy = useRouteQuery(name, proxyDefaultValue);
51+
52+
const r = ref(defaultValue);
53+
54+
watch(r,
55+
(value) => {
56+
proxy.value = transformer.toQuery(value as never);
57+
storageRef.value = value as never;
58+
},
59+
{ deep: true });
60+
61+
r.value = (proxy.value && proxy.value !== proxyDefaultValue
62+
? transformer.fromQuery(proxy.value) as unknown as T
63+
: storageRef.value as T) as never;
64+
65+
return r;
66+
}

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

Lines changed: 56 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,47 @@ const baseUrl = useQueryParamOrStorage({ name: 'url', storageName: 'api-tester:u
1010
const method = useQueryParamOrStorage({ name: 'method', storageName: 'api-tester:m', defaultValue: 'POST' });
1111
const queryParams = useQueryParamOrStorage<KeyValuePair[]>({ name: 'params', storageName: 'api-tester:params', defaultValue: [] });
1212
const headers = useQueryParamOrStorage<KeyValuePair[]>({ name: 'headers', storageName: 'api-tester:headers', defaultValue: [] });
13+
const contentType = useQueryParamOrStorage({ name: 'ct', storageName: 'api-tester:ct', defaultValue: 'application/json' });
1314
const body = useQueryParamOrStorage({ name: 'body', storageName: 'api-tester:body', defaultValue: '' });
15+
const noCORS = ref(false);
1416
const apiCallResult = ref();
1517
1618
const inprogress = ref(false);
1719
async function callAPI() {
1820
const url = new URL(baseUrl.value);
1921
for (const kv of queryParams.value) {
22+
if (!kv.key) {
23+
continue;
24+
}
2025
url.searchParams.append(kv.key, kv.value || '');
2126
}
2227
const queryHeaders = [] as [string, string][];
2328
for (const kv of headers.value) {
29+
if (!kv.key) {
30+
continue;
31+
}
2432
queryHeaders.push([kv.key, kv.value || '']);
2533
}
34+
queryHeaders.push(['Content-Type', contentType.value || '']);
2635
2736
try {
2837
const response = await fetch(url, {
2938
method: method.value,
3039
headers: queryHeaders,
31-
body: body.value,
40+
body: (method.value === 'GET' || method.value === 'HEAD') ? null : body.value,
41+
mode: noCORS.value ? 'no-cors' : 'cors',
3242
});
3343
44+
let responseText = await response.text();
45+
try {
46+
responseText = JSON.stringify(JSON.parse(responseText), null, 2);
47+
}
48+
catch (_) {
49+
}
3450
apiCallResult.value = {
3551
code: response.status,
3652
error: '',
37-
result: await response.text(),
53+
result: responseText,
3854
};
3955
}
4056
catch (err: any) {
@@ -45,11 +61,18 @@ async function callAPI() {
4561
};
4662
}
4763
}
64+
65+
function emptyKeyPair() {
66+
return {
67+
key: '',
68+
value: '',
69+
};
70+
}
4871
</script>
4972

5073
<template>
5174
<div>
52-
<c-card title="">
75+
<c-card title="API Calling">
5376
<c-input-text
5477
v-model:value="baseUrl"
5578
label="Base API Url"
@@ -61,36 +84,44 @@ async function callAPI() {
6184
v-model:value="method"
6285
label="HTTP Method:"
6386
:options="['GET', 'POST', 'PUT', 'DELETE', 'PATCH']"
87+
mb-2
6488
/>
6589

6690
<c-card title="Headers" mb-2>
67-
<n-dynamic-input v-model:value="headers">
91+
<n-dynamic-input v-model:value="headers" :on-create="emptyKeyPair">
6892
<template #create-button-default>
6993
Add a new HTTP Header
7094
</template>
7195
<template #default="{ value }">
72-
<div style="display: flex; align-items: center; width: 100%">
73-
<n-input v-model:value="value.key" type="text" />
74-
<n-input v-model:value="value.value" type="text" />
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" />
7599
</div>
76100
</template>
77101
</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+
/>
78108
</c-card>
79109

80110
<c-card title="Query Parameters" mb-2>
81-
<n-dynamic-input v-model:value="queryParams">
111+
<n-dynamic-input v-model:value="queryParams" :on-create="emptyKeyPair">
82112
<template #create-button-default>
83-
Add a new HTTP Header
113+
Add a new Query Parameter
84114
</template>
85115
<template #default="{ value }">
86-
<div style="display: flex; align-items: center; width: 100%">
87-
<n-input v-model:value="value.key" type="text" />
88-
<n-input v-model:value="value.value" type="text" />
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" />
89119
</div>
90120
</template>
91121
</n-dynamic-input>
92122
</c-card>
93123
<c-input-text
124+
v-if="method !== 'GET' && method !== 'HEAD'"
94125
v-model:value="body"
95126
label="Body"
96127
placeholder="HTTP Query body"
@@ -99,20 +130,26 @@ async function callAPI() {
99130
mb-2
100131
/>
101132

102-
<c-button secondary @click="callAPI">
103-
Call API
104-
</c-button>
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>
105142
</c-card>
106143
<n-spin
107144
v-if="inprogress"
108145
size="small"
109146
/>
110-
<c-alert v-if="!inprogress && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
147+
<c-alert v-if="!inprogress && apiCallResult && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
111148
<p><strong>Status code = {{ apiCallResult.code }}</strong></p>
112-
<TextareaCopyable :value="apiCallResult.error" />
149+
<TextareaCopyable :value="apiCallResult.error" copy-placement="none" />
113150
</c-alert>
114-
<c-card v-if="!inprogress && apiCallResult.code === 200" mt-12 title="API Call result">
115-
<TextareaCopyable :value="apiCallResult.result" />
151+
<c-card v-if="!inprogress && apiCallResult && apiCallResult.code === 200" mt-12 title="API Call result">
152+
<TextareaCopyable :value="apiCallResult.result" word-wrap />
116153
</c-card>
117154
</div>
118155
</template>

0 commit comments

Comments
 (0)