From 2564bce5a00f190fbc6a30bc096896316d79cfcf Mon Sep 17 00:00:00 2001
From: JianyingLi <lijy91@foxmail.com>
Date: Tue, 19 Mar 2019 17:00:27 -0700
Subject: [PATCH] Fix `DataInspector` Component `diff` some problems. (#397)

Summary:
1. In `diffMetadataExtractor` function, when the `data` or `diff` is `null`, it diff view does not display correctly.

```jsx

<Panel floating={false} heading={'Test'}>
  <ManagedDataInspector
    diff={{
      auth: null
    }}
    data={{
      auth: {
        user: {
          name: 'JianyingLi'
        }
      }
    }}
    expandRoot={true}
  />
</Panel>
```

Before:
![2561552808023_ pic](https://user-images.githubusercontent.com/3889523/54486986-db383b80-48ca-11e9-9869-a008f72f4324.jpg)

After:
![2551552807969_ pic](https://user-images.githubusercontent.com/3889523/54486992-ea1eee00-48ca-11e9-90b0-7fd043f1c2bd.jpg)

2. Status `added`(green) and `removed`(red) should be the opposite

```jsx
<ManagedDataInspector
  diff={{
    user: {
      name: 'Leo'
    }
  }}
  data={{
    user: {
      name: 'JianyingLi'
    }
  }}
  expandRoot={true}
/>
```

Before:
![2591552808195_ pic](https://user-images.githubusercontent.com/3889523/54487019-35390100-48cb-11e9-8c20-1526aeae52a1.jpg)

After:
![2581552808145_ pic](https://user-images.githubusercontent.com/3889523/54487022-3c600f00-48cb-11e9-9ea9-75a8c8490c22.jpg)
Pull Request resolved: https://github.com/facebook/flipper/pull/397

Reviewed By: danielbuechele

Differential Revision: D14505757

Pulled By: passy

fbshipit-source-id: 35ca1bf8721468fdde13f3a9ede75cb72a59caea
---
 src/plugins/network/RequestDetails.js             | 1 +
 src/ui/components/data-inspector/DataInspector.js | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/plugins/network/RequestDetails.js b/src/plugins/network/RequestDetails.js
index 5c3278960..d99b078f0 100644
--- a/src/plugins/network/RequestDetails.js
+++ b/src/plugins/network/RequestDetails.js
@@ -62,6 +62,7 @@ function decodeBody(container: Request | Response): string {
   if (!container.data) {
     return '';
   }
+
   const b64Decoded = atob(container.data);
   const body =
     getHeaderValue(container.headers, 'Content-Encoding') === 'gzip'
diff --git a/src/ui/components/data-inspector/DataInspector.js b/src/ui/components/data-inspector/DataInspector.js
index 50c21236f..faccc9185 100644
--- a/src/ui/components/data-inspector/DataInspector.js
+++ b/src/ui/components/data-inspector/DataInspector.js
@@ -217,6 +217,7 @@ function getRootContextMenu(data: Object): Array<Electron$MenuItemOptions> {
 
 function isPureObject(obj: Object) {
   return (
+    obj !== null &&
     Object.prototype.toString.call(obj) !== '[object Date]' &&
     typeof obj === 'object'
   );
@@ -234,10 +235,10 @@ const diffMetadataExtractor: DiffMetadataExtractor = (
   const val = data[key];
   const diffVal = diff[key];
   if (!data.hasOwnProperty(key)) {
-    return [{data: diffVal, status: 'added'}];
+    return [{data: diffVal, status: 'removed'}];
   }
   if (!diff.hasOwnProperty(key)) {
-    return [{data: val, status: 'removed'}];
+    return [{data: val, status: 'added'}];
   }
 
   if (isPureObject(diffVal) && isPureObject(val)) {
@@ -248,7 +249,7 @@ const diffMetadataExtractor: DiffMetadataExtractor = (
     // Check if there's a difference between the original value and
     // the value from the diff prop
     // The property name still exists, but the values may be different.
-    return [{data: diffVal, status: 'added'}, {data: val, status: 'removed'}];
+    return [{data: val, status: 'added'}, {data: diffVal, status: 'removed'}];
   }
 
   return Object.prototype.hasOwnProperty.call(data, key) ? [{data: val}] : [];