fix headers not properly loading/updating

loudar · Jul 24, 2024 · 1324ee7 · 1324ee7
1 parent a96ca02
commit 1324ee7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git 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
@@ -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();
     }