From f0f673843e44ecc7f551105d485b0043b4d70d23 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Tue, 18 Oct 2022 22:04:42 +0200
Subject: [PATCH] refactor API console

Refactor to use $ref sugar.

Also forego the API call to fetch endpoint information if the endpoint
name is not in the list of available endpoints that has already been
fetched.
---
 packages/client/src/pages/api-console.vue | 35 ++++++++++++-----------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index d2b6847a1..4f734f573 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -29,7 +29,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
 import JSON5 from 'json5';
 import { Endpoints } from 'foundkey-js';
 import MkButton from '@/components/ui/button.vue';
@@ -39,31 +38,33 @@ import MkSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const body = ref('{}');
-const endpoint = ref('');
-const endpoints = ref<any[]>([]);
-const sending = ref(false);
-const res = ref('');
-const withCredential = ref(true);
+let body = $ref('{}');
+let endpoint = $ref('');
+let endpoints = $ref<any[]>([]);
+let sending = $ref(false);
+let res = $ref('');
+let withCredential = $ref(true);
 
 os.api('endpoints').then(endpointResponse => {
-	endpoints.value = endpointResponse;
+	endpoints = endpointResponse;
 });
 
 function send(): void {
-	sending.value = true;
-	const requestBody = JSON5.parse(body.value);
-	os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
-		sending.value = false;
-		res.value = JSON5.stringify(resp, null, 2);
+	sending = true;
+	const requestBody = JSON5.parse(body);
+	os.api(endpoint as keyof Endpoints, requestBody, requestBody.i || (withCredential ? undefined : null)).then(resp => {
+		sending = false;
+		res = JSON5.stringify(resp, null, 2);
 	}, err => {
-		sending.value = false;
-		res.value = JSON5.stringify(err, null, 2);
+		sending = false;
+		res = JSON5.stringify(err, null, 2);
 	});
 }
 
 function onEndpointChange(): void {
-	os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
+	if (!endpoints.includes(endpoint)) return;
+
+	os.api('endpoint', { endpoint }, withCredential ? undefined : null).then(resp => {
 		const endpointBody = {};
 		for (const p of resp.params) {
 			endpointBody[p.name] =
@@ -74,7 +75,7 @@ function onEndpointChange(): void {
 				p.type === 'Object' ? {} :
 				null;
 		}
-		body.value = JSON5.stringify(endpointBody, null, 2);
+		body = JSON5.stringify(endpointBody, null, 2);
 	});
 }