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/index.tsx

@@ -48,6 +48,11 @@ import {combineBase64Chunks} from './chunks';
 
 const LOCALSTORAGE_MOCK_ROUTE_LIST_KEY = '__NETWORK_CACHED_MOCK_ROUTE_LIST';
 
+export const BodyOptions = {
+  formatted: 'formatted',
+  parsed: 'parsed',
+};
+
 type State = {
   selectedIds: Array<RequestId>;
   searchTerm: string;
@@ -55,6 +60,7 @@ type State = {
   nextRouteId: number;
   isMockResponseSupported: boolean;
   showMockResponseDialog: boolean;
+  detailBodyFormat: string;
 };
 
 const COLUMN_SIZE = {
@@ -321,6 +327,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
       nextRouteId: 0,
       isMockResponseSupported: false,
       showMockResponseDialog: false,
+      detailBodyFormat: BodyOptions.parsed,
     };
   }
 
@@ -486,9 +493,13 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
     this.setState({showMockResponseDialog: false});
   };
 
+  onSelectFormat = (bodyFormat: string) => {
+    this.setState({detailBodyFormat: bodyFormat});
+  };
+
   renderSidebar = () => {
     const {requests, responses} = this.props.persistedState;
-    const {selectedIds} = this.state;
+    const {selectedIds, detailBodyFormat} = this.state;
     const selectedId = selectedIds.length === 1 ? selectedIds[0] : null;
 
     if (!selectedId) {
@@ -503,6 +514,8 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
         key={selectedId}
         request={requestWithId}
         response={responses[selectedId]}
+        bodyFormat={detailBodyFormat}
+        onSelectFormat={this.onSelectFormat}
       />
     );
   };