make body option persisted across request selection (#1448)

Summary:
This PR make the formatter body option persisted across request selection as mentioned in [here](https://github.com/facebook/flipper/issues/432)

Close https://github.com/facebook/flipper/issues/432

## Changelog

Make request body option persisted across request selection

Pull Request resolved: https://github.com/facebook/flipper/pull/1448

Test Plan:
1. Select the first request and change the body option from `parsed` to `formatted`

<img width="1432" alt="Screen Shot 2020-08-10 at 19 00 07" src="https://user-images.githubusercontent.com/1691440/89780560-de753c80-db3b-11ea-87d7-92831e16b961.png">

2. Move to second request, still in `formatted`

<img width="1431" alt="Screen Shot 2020-08-10 at 19 00 18" src="https://user-images.githubusercontent.com/1691440/89780573-e9c86800-db3b-11ea-900e-e6d02054e9ba.png">

Reviewed By: cekkaewnumchai

Differential Revision: D23264774

Pulled By: mweststrate

fbshipit-source-id: aed97642d030fa8e01e63d115e79ffb7a702c5e6

desktop/plugins/network/RequestDetails.tsx

@@ -22,7 +22,7 @@ import {
   SmallText,
 } from 'flipper';
 import {decodeBody, getHeaderValue} from './utils';
-import {formatBytes} from './index';
+import {formatBytes, BodyOptions} from './index';
 import React from 'react';
 
 import querystring from 'querystring';
@@ -54,26 +54,14 @@ const KeyValueColumns = {
 type RequestDetailsProps = {
   request: Request;
   response: Response | null | undefined;
-};
-
-type RequestDetailsState = {
   bodyFormat: string;
+  onSelectFormat: (bodyFormat: string) => void;
 };
-
-export default class RequestDetails extends Component<
-  RequestDetailsProps,
-  RequestDetailsState
-> {
+export default class RequestDetails extends Component<RequestDetailsProps> {
   static Container = styled(FlexColumn)({
     height: '100%',
     overflow: 'auto',
   });
-  static BodyOptions = {
-    formatted: 'formatted',
-    parsed: 'parsed',
-  };
-
-  state: RequestDetailsState = {bodyFormat: RequestDetails.BodyOptions.parsed};
 
   urlColumns = (url: URL) => {
     return [
@@ -120,16 +108,11 @@ export default class RequestDetails extends Component<
     ];
   };
 
-  onSelectFormat = (bodyFormat: string) => {
-    this.setState(() => ({bodyFormat}));
-  };
-
   render() {
-    const {request, response} = this.props;
+    const {request, response, bodyFormat, onSelectFormat} = this.props;
     const url = new URL(request.url);
 
-    const {bodyFormat} = this.state;
-    const formattedText = bodyFormat == RequestDetails.BodyOptions.formatted;
+    const formattedText = bodyFormat == BodyOptions.formatted;
 
     return (
       <RequestDetails.Container>
@@ -215,8 +198,8 @@ export default class RequestDetails extends Component<
             grow
             label="Body"
             selected={bodyFormat}
-            onChange={this.onSelectFormat}
-            options={RequestDetails.BodyOptions}
+            onChange={onSelectFormat}
+            options={BodyOptions}
           />
         </Panel>
         {response && response.insights ? (