fix: persist headers across endpoints (#6)

* refactor: config are not reactive

* fix: persist headers across endpoints

make sure the UI and request builder are truly in sync

resources/js/components/domain/Client/Request/RequestHeader/RequestHeaders.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import KeyValueParametersBuilder from '@/components/common/KeyValueParameters/KeyValueParameters.vue';
 import PanelSubHeader from '@/components/layout/PanelSubHeader/PanelSubHeader.vue';
-import { GeneratorType, RequestHeader, SourceGlobalHeaders } from '@/interfaces/http';
+import {
+    GeneratorType,
+    PendingRequest,
+    RequestHeader,
+    SourceGlobalHeaders,
+} from '@/interfaces/http';
 import { ParametersExternalContract } from '@/interfaces/ui';
 import { useConfigStore, useRequestStore, useValueGeneratorStore } from '@/stores';
 import { computed, onBeforeMount, ref, watch } from 'vue';
@@ -14,17 +19,7 @@ const headers = ref<RequestHeader[]>([]);
 
 const pendingRequestData = computed(() => requestStore.pendingRequestData);
 
-const globalHeaders = computed(() => {
-    return configStore.headers.map(
-        (globalHeader: SourceGlobalHeaders): RequestHeader => ({
-            key: globalHeader.header,
-            value:
-                globalHeader.type === 'generator'
-                    ? generateValue(globalHeader.value as GeneratorType)
-                    : globalHeader.value,
-        }),
-    );
-});
+let globalHeaders: RequestHeader[] = [];
 
 /**
  * Converts RequestHeader[] to ParameterContractShape[] for the KeyValueParameters component.
@@ -70,12 +65,15 @@ const syncHeadersWithPendingRequest = () => {
     );
 };
 
-const initializeHeaders = () => {
-    // TODO [Enhancement] De-dupe the list.
-    headers.value = [
-        ...globalHeaders.value,
-        ...(pendingRequestData.value?.headers ?? []),
-    ];
+const initializeHeaders = (previousPendingData: PendingRequest | null = null) => {
+    const previousHeaders = previousPendingData?.headers ?? [];
+    const previousHeaderKeys = previousHeaders.map((header: RequestHeader) => header.key);
+
+    const missingGlobalHeaders = globalHeaders.filter(
+        (header: RequestHeader) => !previousHeaderKeys.includes(header.key),
+    );
+
+    headers.value = [...missingGlobalHeaders, ...previousHeaders];
 };
 
 /*
@@ -95,7 +93,7 @@ watch(
             return;
         }
 
-        initializeHeaders();
+        initializeHeaders(oldValue);
     },
     { deep: true },
 );
@@ -105,6 +103,16 @@ watch(
  */
 
 onBeforeMount(() => {
+    globalHeaders = configStore.headers.map(
+        (globalHeader: SourceGlobalHeaders): RequestHeader => ({
+            key: globalHeader.header,
+            value:
+                globalHeader.type === 'generator'
+                    ? generateValue(globalHeader.value as GeneratorType)
+                    : globalHeader.value,
+        }),
+    );
+
     initializeHeaders();
 });
 </script>

resources/js/stores/core/useConfigStore.ts

@@ -1,52 +1,35 @@
 import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
 
 export interface CurrentUser {
     id: string | number;
 }
 
-export interface AppConfig {
-    urlBase: string;
-    basePath: string;
-    globalHeaders: Array<{
-        header: string;
-        type: 'raw' | 'generator';
-        value: string | number;
-    }>;
-    isVersioned: boolean;
-    currentUser: CurrentUser | null;
-}
+export type GlobalHeadersArray = Array<{
+    header: string;
+    type: 'raw' | 'generator';
+    value: string | number;
+}>;
 
+// TODO [Refactor] convert this to a plain module.
 export const useConfigStore = defineStore('config', () => {
-    // Default configuration
-    const config = ref<AppConfig>({
-        urlBase: (window.Nimbus?.apiBaseUrl as string) || 'http://localhost',
-        isVersioned: (window.Nimbus?.isVersioned as boolean) || false,
-        basePath: (window.Nimbus?.basePath as string) || '',
-        globalHeaders: window.Nimbus?.headers
-            ? JSON.parse(window.Nimbus.headers as string)
-            : [],
-        currentUser: window.Nimbus?.currentUser
-            ? JSON.parse(window.Nimbus.currentUser)
-            : null,
-    });
+    const urlBase = (window.Nimbus?.apiBaseUrl as string) || 'http://localhost';
+    const isVersioned = (window.Nimbus?.isVersioned as boolean) || false;
+    const basePath = (window.Nimbus?.basePath as string) || '';
+    const globalHeaders: GlobalHeadersArray = window.Nimbus?.headers
+        ? JSON.parse(window.Nimbus.headers as string)
+        : [];
+    const currentUser = window.Nimbus?.currentUser
+        ? JSON.parse(window.Nimbus.currentUser)
+        : null;
 
-    // Computed values
-    const apiUrl = computed(() => config.value.urlBase);
-    const appBasePath = computed(() => config.value.basePath);
-    const headers = computed(() => config.value.globalHeaders);
-    const isVersioned = computed(() => config.value.isVersioned);
-    const isLoggedIn = computed(() => config.value.currentUser !== null);
-    const userId = computed(() => config.value.currentUser?.id ?? null);
+    // Derived values
+    const isLoggedIn = currentUser !== null;
+    const userId = currentUser?.id ?? null;
 
     return {
-        // State
-        config,
-
-        // Getters
-        apiUrl,
-        appBasePath,
-        headers,
+        apiUrl: urlBase,
+        appBasePath: basePath,
+        headers: globalHeaders,
         isVersioned,
         isLoggedIn,
         userId,