use type safe api, fix typescript errors

src/app.vue

@@ -1590,7 +1590,7 @@ onMounted(() => {
   }, 1000);
 
   api
-    .getuiTrafficStats()
+    .getUITrafficStats()
     .then((res) => {
       uiTrafficStats.value = res;
     })

src/server/utils/WireGuard.ts

@@ -21,15 +21,15 @@ type Server = {
 };
 
 type Client = {
-  enabled: boolean;
   name: string;
-  publicKey: string;
+  address: string;
   privateKey: string;
+  publicKey: string;
   preSharedKey: string;
-  address: string;
-  createdAt: number;
-  updatedAt: Date;
-  allowedIPs?: string[];
+  createdAt: string;
+  updatedAt: string;
+  enabled: boolean;
+  allowedIPs?: never;
 };
 
 type Config = {
@@ -168,10 +168,10 @@ ${
         updatedAt: new Date(client.updatedAt),
         allowedIPs: client.allowedIPs,
         downloadableConfig: 'privateKey' in client,
-        persistentKeepalive: null,
-        latestHandshakeAt: null,
-        transferRx: null,
-        transferTx: null,
+        persistentKeepalive: null as string | null,
+        latestHandshakeAt: null as Date | null,
+        transferRx: null as number | null,
+        transferTx: null as number | null,
       })
     );
 
@@ -265,11 +265,11 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     let address;
     for (let i = 2; i < 255; i++) {
       const client = Object.values(config.clients).find((client) => {
-        return client.address === WG_DEFAULT_ADDRESS.replace('x', i);
+        return client.address === WG_DEFAULT_ADDRESS.replace('x', i.toString());
       });
 
       if (!client) {
-        address = WG_DEFAULT_ADDRESS.replace('x', i);
+        address = WG_DEFAULT_ADDRESS.replace('x', i.toString());
         break;
       }
     }
@@ -288,8 +288,8 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
       publicKey,
       preSharedKey,
 
-      createdAt: new Date(),
-      updatedAt: new Date(),
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
 
       enabled: true,
     };
@@ -305,6 +305,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     const config = await this.getConfig();
 
     if (config.clients[clientId]) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete config.clients[clientId];
       await this.saveConfig();
     }
@@ -314,7 +315,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     const client = await this.getClient({ clientId });
 
     client.enabled = true;
-    client.updatedAt = new Date();
+    client.updatedAt = new Date().toISOString();
 
     await this.saveConfig();
   }
@@ -323,7 +324,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     const client = await this.getClient({ clientId });
 
     client.enabled = false;
-    client.updatedAt = new Date();
+    client.updatedAt = new Date().toISOString();
 
     await this.saveConfig();
   }
@@ -338,7 +339,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     const client = await this.getClient({ clientId });
 
     client.name = name;
-    client.updatedAt = new Date();
+    client.updatedAt = new Date().toISOString();
 
     await this.saveConfig();
   }
@@ -357,7 +358,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     }
 
     client.address = address;
-    client.updatedAt = new Date();
+    client.updatedAt = new Date().toISOString();
 
     await this.saveConfig();
   }

src/server/utils/cmd.ts

@@ -14,7 +14,7 @@ export function exec(
     return Promise.resolve('');
   }
 
-  return new Promise((resolve, reject) => {
+  return new Promise<string>((resolve, reject) => {
     childProcess.exec(
       cmd,
       {

src/utils/api.ts

@@ -1,104 +1,51 @@
-export type APIClient = {
-  id: string;
-  name: string;
-  enabled: boolean;
-  address: string;
-  publicKey: string;
-  createdAt: string;
-  updatedAt: string;
-  downloadableConfig: boolean;
-  persistentKeepalive: string;
-  latestHandshakeAt: null;
-  transferRx: number;
-  transferTx: number;
-};
-
 class API {
-  async call({
-    method,
-    path,
-    body,
-  }: {
-    method: string;
-    path: string;
-    body?: Record<string, unknown>;
-  }) {
-    const res = await fetch(`./api${path}`, {
-      method,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: body ? JSON.stringify(body) : undefined,
-    });
-
-    if (res.status === 204) {
-      return undefined;
-    }
-
-    const json = await res.json();
-
-    if (!res.ok) {
-      throw new Error(json.message || res.statusText);
-    }
-
-    return json;
-  }
-
   async getRelease() {
-    return this.call({
+    return $fetch('/api/release', {
       method: 'get',
-      path: '/release',
     });
   }
 
   async getLang() {
-    return this.call({
+    return $fetch('/api/lang', {
       method: 'get',
-      path: '/lang',
     });
   }
 
-  async getuiTrafficStats() {
-    return this.call({
+  async getUITrafficStats() {
+    return $fetch('/api/ui-traffic-stats', {
       method: 'get',
-      path: '/ui-traffic-stats',
     });
   }
 
   async getChartType() {
-    return this.call({
+    return $fetch('/api/ui-chart-type', {
       method: 'get',
-      path: '/ui-chart-type',
     });
   }
 
   async getSession() {
-    return this.call({
+    return $fetch('/api/session', {
       method: 'get',
-      path: '/session',
     });
   }
 
   async createSession({ password }: { password: string | null }) {
-    return this.call({
+    return $fetch('/api/session', {
       method: 'post',
-      path: '/session',
       body: { password },
     });
   }
 
   async deleteSession() {
-    return this.call({
+    return $fetch('/api/session', {
       method: 'delete',
-      path: '/session',
     });
   }
 
   async getClients() {
-    return this.call({
+    return $fetch('/api/wireguard/client', {
       method: 'get',
-      path: '/wireguard/client',
-    }).then((clients: APIClient[]) =>
+    }).then((clients) =>
       clients.map((client) => ({
         ...client,
         createdAt: new Date(client.createdAt),
@@ -112,31 +59,27 @@ class API {
   }
 
   async createClient({ name }: { name: string }) {
-    return this.call({
-      method: 'post',
-      path: '/wireguard/client',
+    return $fetch('/api/wireguard/client', {
+      method: 'POST',
       body: { name },
     });
   }
 
   async deleteClient({ clientId }: { clientId: string }) {
-    return this.call({
-      method: 'delete',
-      path: `/wireguard/client/${clientId}`,
+    return $fetch(`/api/wireguard/client/${clientId}`, {
+      method: 'DELETE',
     });
   }
 
   async enableClient({ clientId }: { clientId: string }) {
-    return this.call({
-      method: 'post',
-      path: `/wireguard/client/${clientId}/enable`,
+    return $fetch(`/api/wireguard/client/${clientId}/enable`, {
+      method: 'POST',
     });
   }
 
   async disableClient({ clientId }: { clientId: string }) {
-    return this.call({
-      method: 'post',
-      path: `/wireguard/client/${clientId}/disable`,
+    return $fetch(`/api/wireguard/client/${clientId}/disable`, {
+      method: 'POST',
     });
   }
 
@@ -147,9 +90,8 @@ class API {
     clientId: string;
     name: string;
   }) {
-    return this.call({
-      method: 'put',
-      path: `/wireguard/client/${clientId}/name/`,
+    return $fetch(`/api/wireguard/client/${clientId}/name`, {
+      method: 'PUT',
       body: { name },
     });
   }
@@ -161,17 +103,15 @@ class API {
     clientId: string;
     address: string;
   }) {
-    return this.call({
-      method: 'put',
-      path: `/wireguard/client/${clientId}/address/`,
+    return $fetch(`/api/wireguard/client/${clientId}/address`, {
+      method: 'PUT',
       body: { address },
     });
   }
 
   async restoreConfiguration(file: string) {
-    return this.call({
-      method: 'put',
-      path: '/wireguard/restore',
+    return $fetch('/api/wireguard/restore', {
+      method: 'PUT',
       body: { file },
     });
   }