Ensure api key is reactive

Author: netervati

composables/useAppRefKey.ts

@@ -1,9 +1,3 @@
-export default function (): string {
-  const route = useRoute();
-
-  if (typeof route.params.urlpath === 'string') {
-    return route.params.urlpath;
-  }
-
-  return '';
+export default function (): Ref<string> {
+  return useState('app_api_key');
 }

middleware/setAppRefKey.global.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware((to, _from) => {
+  let updated;
+
+  if (['/', '/dashboard', '/docs', '/login'].includes(to.path)) {
+    return;
+  }
+
+  if (typeof to.params.urlpath === 'string') {
+    updated = to.params.urlpath;
+  } else{
+    updated = '';
+  }
+
+  useAppRefKey().value = updated;
+});

pages/dashboard/app/[url-path]/settings.vue

@@ -22,7 +22,7 @@
     form.setValues({
       description: app.target?.description,
       title: app.target?.title,
-      apiKey,
+      apiKey: apiKey.value,
     });
 
     const querySecretKey = useRoute().query?.secret_key;
@@ -44,13 +44,13 @@
           await app.refresh();
 
           app.target = app.list.filter(
-            (proj) => proj.app_keys[0]?.api_key === apiKey
+            (proj) => proj.app_keys[0]?.api_key === apiKey.value
           )[0];
 
           form.setValues({
             description: app.target?.description,
             title: app.target?.title,
-            apiKey,
+            apiKey: apiKey.value,
           });
         },
       }

stores/useApp.ts

@@ -77,7 +77,7 @@ export default defineStore('apps', () => {
       body: {
         description: payload.description,
         title: payload.title,
-        apiKey: useAppRefKey(),
+        apiKey: useAppRefKey().value,
       },
       async onResponse({ response }) {
         if (response.status === 200) {

stores/useAppKey.ts

@@ -18,7 +18,7 @@ export default defineStore('appKeys', (): AppKeyStore => {
     await $fetch(`/apps/${id}/generate-secret-key`, {
       method: 'POST',
       body: {
-        appKey: useAppRefKey(),
+        appKey: useAppRefKey().value,
       },
       onResponse({ response }) {
         if (response.status === 200) {

stores/useModel.ts

@@ -32,7 +32,14 @@ export default defineStore('models', () => {
     }
   );
 
-  const list = computed(() => data.value || []);
+  const list = computed(() => {
+    if (pending.value) {
+      return [];
+    }
+
+    return data.value || [];
+  });
+
   const isDisabled = computed(() => list.value.length === 10 || pending.value);
 
   const setTarget = (md: NormalizedModel) => {
@@ -47,7 +54,7 @@ export default defineStore('models', () => {
     await $fetch('/models', {
       method: 'POST',
       body: {
-        apiKey,
+        apiKey: apiKey.value,
         name: body.name,
         schema: body.schema,
       },
@@ -72,7 +79,7 @@ export default defineStore('models', () => {
   const del = async (id: string): Promise<void> => {
     await $fetch(`/models/${id}`, {
       method: 'DELETE',
-      query: { apiKey },
+      query: { apiKey: apiKey.value },
       async onResponse({ response }) {
         if (response.status === 200) {
           toast.success('Deleted the model!');
@@ -89,7 +96,7 @@ export default defineStore('models', () => {
       name?: string;
       schema: Schema;
     } = {
-      apiKey,
+      apiKey: apiKey.value,
       schema: body.schema,
     };
 

stores/useModelData.ts

@@ -51,7 +51,7 @@ export default defineStore('model-data', () => {
   const bulkDelete = async (ids: string): Promise<void> => {
     await $fetch(`/models/${modelId.value}/model-data`, {
       method: 'DELETE',
-      query: { ids, apiKey },
+      query: { ids, apiKey: apiKey.value },
       async onResponse({ response }) {
         if (response.status === 200) {
           toast.success('Deleted the model data!');
@@ -66,7 +66,7 @@ export default defineStore('model-data', () => {
     await $fetch(`/models/${modelId.value}/model-data`, {
       method: 'POST',
       body: {
-        apiKey,
+        apiKey: apiKey.value,
         increase: body.increase,
         schema: body.schema,
       },