Link Send request & response data to properly support multiple tabs

Author: pimterry

src/components/send/request-pane.tsx

@@ -56,7 +56,7 @@ export class RequestPane extends React.Component<{
     editorNode: portals.HtmlPortalNode<typeof ContainerSizedEditor>,
 
     requestInput: RequestInput,
-    sendRequest: (requestInput: RequestInput) => void
+    sendRequest: () => void
 }> {
 
     get cardProps() {
@@ -152,7 +152,7 @@ export class RequestPane extends React.Component<{
         this.isSending = true;
 
         try {
-            yield this.props.sendRequest(this.props.requestInput);
+            yield this.props.sendRequest();
         } catch (e) {
             console.warn('Sending request failed', e);
         } finally {

src/components/send/send-page.tsx

@@ -33,11 +33,12 @@ export class SendPage extends React.Component<{
 
     render() {
         const {
-            requestInputs,
-            sendRequest,
-            sentExchange
+            sendRequests,
+            sendRequest
         } = this.props.sendStore!;
 
+        const focusedSendRequest = sendRequests[0];
+
         return <SendPageContainer>
             <SplitPane
                 split='vertical'
@@ -47,13 +48,13 @@ export class SendPage extends React.Component<{
                 maxSize={-300}
             >
                 <RequestPane
-                    requestInput={requestInputs[0]}
-                    sendRequest={sendRequest}
+                    requestInput={focusedSendRequest.request}
+                    sendRequest={() => sendRequest(focusedSendRequest)}
                     editorNode={this.requestEditorNode}
                 />
                 <ResponsePane
-                    requestInput={requestInputs[0]}
-                    exchange={sentExchange}
+                    requestInput={focusedSendRequest.request}
+                    exchange={focusedSendRequest.sentExchange}
                     editorNode={this.responseEditorNode}
                 />
             </SplitPane>

src/model/send/send-request-model.ts

@@ -66,7 +66,12 @@ export class RequestInput {
 
 }
 
-export const requestInputSchema = serializr.createModelSchema(RequestInput, {
+export interface SendRequest {
+    request: RequestInput,
+    sentExchange: HttpExchange | undefined
+}
+
+const requestInputSchema = serializr.createModelSchema(RequestInput, {
     method: serializr.primitive(),
     url: serializr.primitive(),
     headers: serializr.list(serializr.list(serializr.primitive())),
@@ -85,6 +90,11 @@ export const requestInputSchema = serializr.createModelSchema(RequestInput, {
     });
 });
 
+export const sendRequestSchema = serializr.createSimpleSchema({
+    request: serializr.object(requestInputSchema),
+    sentExchange: false // Never persisted here
+});
+
 export async function buildRequestInputFromExchange(exchange: HttpExchange): Promise<RequestInput> {
     const body = await exchange.request.body.decodedPromise ??
         Buffer.from('!!! ORIGINAL REQUEST BODY COULD NOT BE DECODED !!!');

src/model/send/send-store.ts

@@ -27,8 +27,9 @@ import {
     buildRequestInputFromExchange,
     ClientProxyConfig,
     RequestInput,
-    requestInputSchema,
-    RULE_PARAM_REF_KEY
+    SendRequest,
+    RULE_PARAM_REF_KEY,
+    sendRequestSchema
 } from './send-request-model';
 
 export class SendStore {
@@ -55,18 +56,18 @@ export class SendStore {
         }
 
         autorun(() => {
-            if (this.requestInputs.length === 0) this.addRequestInput();
+            if (this.sendRequests.length === 0) this.addRequestInput();
         })
 
         console.log('Send store initialized');
     });
 
-    @persist('list', requestInputSchema) @observable
-    requestInputs: RequestInput[] = [];
+    @persist('list', sendRequestSchema) @observable
+    sendRequests: Array<SendRequest> = [];
 
     @action.bound
     addRequestInput(requestInput = new RequestInput()): RequestInput {
-        this.requestInputs[0] = requestInput;
+        this.sendRequests[0] = { request: requestInput, sentExchange: undefined };
         return requestInput;
     }
 
@@ -78,12 +79,14 @@ export class SendStore {
         );
     }
 
-    @observable
-    sentExchange: HttpExchange | undefined;
-
-    readonly sendRequest = async (requestInput: RequestInput) => {
+    readonly sendRequest = async (sendRequest: SendRequest) => {
         trackEvent({ category: 'Send', action: 'Sent request' });
 
+        const requestInput = sendRequest.request;
+        runInAction(() => {
+            sendRequest.sentExchange = undefined;
+        });
+
         const exchangeId = uuid();
 
         const passthroughOptions = this.rulesStore.activePassthroughOptions;
@@ -146,7 +149,7 @@ export class SendStore {
         }));
 
         runInAction(() => {
-            this.sentExchange = exchange;
+            sendRequest.sentExchange = exchange;
         });
     }