fix : Revert wrong branch's commit

Author: hyunw9

docs-client/src/containers/MethodPage/DebugPage.tsx

@@ -59,12 +59,6 @@ import { TRANSPORTS } from '../../lib/transports';
 import { SelectOption } from '../../lib/types';
 import DebugInputs from './DebugInputs';
 
-const stringifyHeaders = (headers: [string, string[]][]): string =>
-  JSON.stringify(
-    Object.fromEntries(headers.map(([key, value]) => [key, value.join(', ')])),
-    null,
-    2,
-  );
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     actionDialog: {
@@ -155,9 +149,6 @@ const DebugPage: React.FunctionComponent<Props> = ({
   const [requestBody, setRequestBody] = useState('');
   const [debugResponse, setDebugResponse] = useState('');
   const [additionalQueries, setAdditionalQueries] = useState('');
-  const [debugResponseHeaders, setDebugResponseHeaders] = useState<
-    [string, string[]][]
-  >([]);
   const [additionalPath, setAdditionalPath] = useState('');
   const [additionalHeaders, setAdditionalHeaders] = useState('');
   const [stickyHeaders, toggleStickyHeaders] = useReducer(toggle, false);
@@ -168,34 +159,13 @@ const DebugPage: React.FunctionComponent<Props> = ({
     false,
   );
 
-  const [currentApiId, setCurrentApiId] = useState<string>(method.id);
-  const [responseCache, setResponseCache] = useState<
-    Record<string, { body: string; headers: Map<string, string[]> }>
-  >({});
-
   const classes = useStyles();
 
   const transport = TRANSPORTS.getDebugTransport(method);
   if (!transport) {
     throw new Error("This method doesn't have a debug transport.");
   }
 
-  useEffect(() => {
-    const apiId = method.id;
-    if (apiId !== currentApiId) {
-      setCurrentApiId(apiId);
-      if (responseCache[apiId]) {
-        setDebugResponse(responseCache[apiId].body);
-        setDebugResponseHeaders(
-          Array.from(responseCache[apiId].headers.entries()),
-        );
-      } else {
-        setDebugResponse('');
-        setDebugResponseHeaders([]);
-      }
-    }
-  }, [method, currentApiId, responseCache]);
-
   useEffect(() => {
     const urlParams = new URLSearchParams(location.search);
 
@@ -232,7 +202,6 @@ const DebugPage: React.FunctionComponent<Props> = ({
 
     if (!keepDebugResponse) {
       setDebugResponse('');
-      setDebugResponseHeaders([]);
       toggleKeepDebugResponse(false);
     }
     setSnackbarOpen(false);
@@ -395,7 +364,6 @@ const DebugPage: React.FunctionComponent<Props> = ({
 
   const onClear = useCallback(() => {
     setDebugResponse('');
-    setDebugResponseHeaders([]);
   }, []);
 
   const executeRequest = useCallback(
@@ -422,29 +390,24 @@ const DebugPage: React.FunctionComponent<Props> = ({
       const headersText = params.get('headers');
       const headers = headersText ? JSON.parse(headersText) : {};
 
+      let executedDebugResponse;
       try {
-        const { body, headers: responseHeaders } = await transport.send(
+        executedDebugResponse = await transport.send(
           method,
           headers,
           parseServerRootPath(docServiceRoute),
           executedRequestBody,
           executedEndpointPath,
           queries,
         );
-        setDebugResponse(body);
-        setDebugResponseHeaders(Array.from(responseHeaders.entries()));
-        setResponseCache((prev) => ({
-          ...prev,
-          [currentApiId]: {
-            body,
-            headers: responseHeaders,
-          },
-        }));
       } catch (e) {
-        const message = e instanceof Object ? e.toString() : '<unknown>';
-        setDebugResponse(message);
-        setDebugResponseHeaders([]);
+        if (e instanceof Object) {
+          executedDebugResponse = e.toString();
+        } else {
+          executedDebugResponse = '<unknown>';
+        }
       }
+      setDebugResponse(executedDebugResponse);
     },
     [
       useRequestBody,
@@ -453,7 +416,6 @@ const DebugPage: React.FunctionComponent<Props> = ({
       method,
       transport,
       docServiceRoute,
-      currentApiId,
     ],
   );
 
@@ -610,7 +572,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
             <Grid item xs={12} sm={6}>
               <Grid container spacing={1}>
                 <Grid item xs="auto">
-                  <Tooltip title="Copy response body">
+                  <Tooltip title="Copy response">
                     <div>
                       <IconButton
                         onClick={onCopy}
@@ -634,37 +596,13 @@ const DebugPage: React.FunctionComponent<Props> = ({
                   </Tooltip>
                 </Grid>
               </Grid>
-              {debugResponse && (
-                <>
-                  {Object.keys(debugResponseHeaders).length > 0 && (
-                    <>
-                      <Typography
-                        variant="subtitle1"
-                        style={{ marginTop: '1rem' }}
-                      >
-                        Response Headers:
-                      </Typography>
-                      <SyntaxHighlighter
-                        language="json"
-                        style={githubGist}
-                        wrapLines={false}
-                      >
-                        {stringifyHeaders(debugResponseHeaders)}
-                      </SyntaxHighlighter>
-                    </>
-                  )}
-                  <Typography variant="subtitle1" style={{ marginTop: '1rem' }}>
-                    Response Body:
-                  </Typography>
-                  <SyntaxHighlighter
-                    language="json"
-                    style={githubGist}
-                    wrapLines={false}
-                  >
-                    {debugResponse}
-                  </SyntaxHighlighter>
-                </>
-              )}
+              <SyntaxHighlighter
+                language="json"
+                style={githubGist}
+                wrapLines={false}
+              >
+                {debugResponse}
+              </SyntaxHighlighter>
             </Grid>
           </Grid>
           <Snackbar
@@ -746,26 +684,6 @@ const DebugPage: React.FunctionComponent<Props> = ({
                     </Tooltip>
                   </Grid>
                 </Grid>
-                {Object.keys(debugResponseHeaders).length > 0 && (
-                  <>
-                    <Typography
-                      variant="subtitle1"
-                      style={{ marginTop: '1rem' }}
-                    >
-                      Response Headers:
-                    </Typography>
-                    <SyntaxHighlighter
-                      language="json"
-                      style={githubGist}
-                      wrapLines={false}
-                    >
-                      {stringifyHeaders(debugResponseHeaders)}
-                    </SyntaxHighlighter>
-                  </>
-                )}
-                <Typography variant="subtitle1" style={{ marginTop: '1rem' }}>
-                  Response Body:
-                </Typography>
                 <SyntaxHighlighter
                   language="json"
                   style={githubGist}