From 1324ee74ebb9096f8f5632ee127fb65331daede2 Mon Sep 17 00:00:00 2001
From: Alexander Fritsch <35202909+loudar@users.noreply.github.com>
Date: Wed, 24 Jul 2024 09:26:00 +0200
Subject: [PATCH] fix headers not properly loading/updating

---
 src/ui/templates/generic.templates.mjs | 14 ++++++++------
 src/ui/templates/layout.templates.mjs  |  9 +++------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/ui/templates/generic.templates.mjs b/src/ui/templates/generic.templates.mjs
index 4a85ed3..38c9ea1 100644
--- a/src/ui/templates/generic.templates.mjs
+++ b/src/ui/templates/generic.templates.mjs
@@ -339,7 +339,7 @@ export class GenericTemplates {
         return details;
     }
 
-    static headers(headers, onlyDisplay = false) {
+    static headers(request, headers, onlyDisplay = false) {
         const useHeaders = computedSignal(headers, h => {
             if (!h) {
                 return [];
@@ -353,10 +353,11 @@ export class GenericTemplates {
             .classes("flex-v")
             .children(
                 ifjs(onlyDisplay, GenericTemplates.buttonWithIcon("add", "Add Header", () => {
-                    headers.value = {
+                    const newHeaders = {
                         ...headers.value,
                         ["Header-" + newId()]: "",
                     };
+                    request.updateHeaders(newHeaders);
                 }), true),
                 create("table")
                     .children(
@@ -373,12 +374,12 @@ export class GenericTemplates {
                                     ).build()
                             ).build(),
                         signalMap(useHeaders, create("tbody"),
-                            header => GenericTemplates.header(headers, header, onlyDisplay))
+                            header => GenericTemplates.header(request, headers, header, onlyDisplay))
                     ).build(),
             ).build();
     }
 
-    static header(headers, header, onlyDisplay = false) {
+    static header(request, headers, header, onlyDisplay = false) {
         if (onlyDisplay) {
             const guessedType = guessType(header.value);
             const id = newId();
@@ -424,16 +425,17 @@ export class GenericTemplates {
                                 [val]: header.value,
                             };
                             delete newHeaders[header.name];
-                            headers.value = newHeaders;
+                            request.updateHeaders(newHeaders);
                         }, () => {}, true),
                     ).build(),
                 create("td")
                     .children(
                         GenericTemplates.input("text", "headervalue", header.value, "Header Value", "Header Value", "header-value", ["flex-grow"], (val) => {
-                            headers.value = {
+                            const newHeaders = {
                                 ...headers.value,
                                 [header.name]: val,
                             };
+                            request.updateHeaders(newHeaders);
                         }, () => {}, true),
                     ).build(),
             ).build();
diff --git a/src/ui/templates/layout.templates.mjs b/src/ui/templates/layout.templates.mjs
index 7af734e..e20b27e 100644
--- a/src/ui/templates/layout.templates.mjs
+++ b/src/ui/templates/layout.templates.mjs
@@ -73,10 +73,7 @@ export class LayoutTemplates {
     }
 
     static mainPanel(request, requests, sending, saving, response, sideBarOpen) {
-        const headers = signal(request.headers);
-        headers.subscribe((val) => {
-            request.updateHeaders(val);
-        });
+        const headers = computedSignal(request.signal, req => req ? req.headers : {});
         const headersTitle = computedSignal(headers, (val) => {
             if (!val || Object.keys(val).length === 0) {
                 return "Request Headers";
@@ -156,7 +153,7 @@ export class LayoutTemplates {
                             });
                         }, ["positive"]),
                     ).build(),
-                GenericTemplates.collapsible(headersTitle, GenericTemplates.headers(headers), ["full-width"]),
+                GenericTemplates.collapsible(headersTitle, GenericTemplates.headers(request, headers), ["full-width"]),
                 GenericTemplates.collapsible("Request Body", GenericTemplates.bodyEditor(request, headers), ["full-width"], true),
                 ifjs(sending, create("div")
                     .classes("flex")
@@ -211,7 +208,7 @@ export class LayoutTemplates {
                         ifjs(error, GenericTemplates.infoText("timer", timeText, [responseClass]), true),
                         ifjs(error, GenericTemplates.infoText("error", error, ["negative"]))
                     ).build(),
-                ifjs(error, GenericTemplates.collapsible(responseHeadersTitle, GenericTemplates.headers(responseHeaders, true), ["full-width"]), true),
+                ifjs(error, GenericTemplates.collapsible(responseHeadersTitle, GenericTemplates.headers(response, responseHeaders, true), ["full-width"]), true),
                 ifjs(error, GenericTemplates.collapsible("Response Body", GenericTemplates.bodyDisplay(body, contentType), ["full-width"], true), true),
             ).build();
     }