From d60125bd5edbf6c0e601801408f9f42f5ce65273 Mon Sep 17 00:00:00 2001
From: Chaiwat Ekkaewnumchai <cekkaewnumchai@fb.com>
Date: Thu, 19 Mar 2020 05:14:48 -0700
Subject: [PATCH] (Server) Fix Unresponsive Header Input

Summary:
Before this diff, the input bar is unresponsive to the user input; when one typed fast enough the input doesn't reflect that as shown in the before video (the console printed the log directly when `onChange` was fired).

This diff tried to store value locally and use that to render. When the component is closed, the state update will take place. This tried to solve too many state update.

Reviewed By: mweststrate

Differential Revision: D20489142

fbshipit-source-id: c118adc61d9234daec17782e4bbf8e4ea3dd369f
---
 .../plugins/network/MockResponseDetails.tsx   | 50 +++++++++++--------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/desktop/plugins/network/MockResponseDetails.tsx b/desktop/plugins/network/MockResponseDetails.tsx
index 5caccb5cc..7f957c0f5 100644
--- a/desktop/plugins/network/MockResponseDetails.tsx
+++ b/desktop/plugins/network/MockResponseDetails.tsx
@@ -78,7 +78,7 @@ const StyledInput = styled(Input)({
   flexGrow: 5,
 });
 
-const HeaderInput = styled(Input)({
+const HeaderStyledInput = styled(Input)({
   width: '100%',
   height: 20,
   marginTop: 6,
@@ -139,14 +139,32 @@ const HeadersColumns = {
   },
 };
 
+const selectedHighlight = {backgroundColor: colors.highlight};
+
+function HeaderInput(props: {
+  initialValue: string;
+  isSelected: boolean;
+  onUpdate: (newValue: string) => void;
+}) {
+  const [value, setValue] = useState(props.initialValue);
+  return (
+    <HeaderStyledInput
+      type="text"
+      placeholder="Name"
+      value={value}
+      style={props.isSelected ? selectedHighlight : undefined}
+      onChange={event => setValue(event.target.value)}
+      onBlur={() => props.onUpdate(value)}
+    />
+  );
+}
+
 function _buildMockResponseHeaderRows(
   routeId: string,
   route: Route,
   selectedHeaderId: string | null,
   networkRouteManager: NetworkRouteManager,
 ) {
-  const selectedHighlight = {backgroundColor: colors.highlight};
-
   return Object.entries(route.responseHeaders).map(([id, header]) => {
     const selected = selectedHeaderId === id;
     return {
@@ -154,18 +172,13 @@ function _buildMockResponseHeaderRows(
         name: {
           value: (
             <HeaderInput
-              type="text"
-              placeholder="Name"
-              value={header.key}
-              style={selected ? selectedHighlight : {}}
-              onChange={event => {
-                if (!selected) {
-                  return;
-                }
+              initialValue={header.key}
+              isSelected={selected}
+              onUpdate={(newValue: string) => {
                 const newHeaders = produce(
                   route.responseHeaders,
                   draftHeaders => {
-                    draftHeaders[id].key = event.target.value;
+                    draftHeaders[id].key = newValue;
                   },
                 );
                 networkRouteManager.modifyRoute(routeId, {
@@ -178,18 +191,13 @@ function _buildMockResponseHeaderRows(
         value: {
           value: (
             <HeaderInput
-              type="text"
-              placeholder="Value"
-              value={header.value}
-              style={selected ? selectedHighlight : {}}
-              onChange={event => {
-                if (!selected) {
-                  return;
-                }
+              initialValue={header.value}
+              isSelected={selected}
+              onUpdate={(newValue: string) => {
                 const newHeaders = produce(
                   route.responseHeaders,
                   draftHeaders => {
-                    draftHeaders[id].value = event.target.value;
+                    draftHeaders[id].value = newValue;
                   },
                 );
                 networkRouteManager.modifyRoute(routeId, {