From d24aef13992588d79e6d7ebfeff9e8686e3b5d56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Boussu?= <remi.boussu@axa.fr>
Date: Tue, 14 Jun 2022 14:31:33 +0200
Subject: [PATCH] feat(JsonDiffer): added Json differ with recursive logic

---
 src/JsonDifferComponent.jsx        | 74 ++++++++++++++++++++++++++++++
 src/JsonDifferComponent.module.css | 30 ++++++++++++
 src/TestComponent.jsx              |  7 ---
 src/index.js                       |  2 +-
 4 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 src/JsonDifferComponent.jsx
 create mode 100644 src/JsonDifferComponent.module.css
 delete mode 100644 src/TestComponent.jsx

diff --git a/src/JsonDifferComponent.jsx b/src/JsonDifferComponent.jsx
new file mode 100644
index 0000000..78422d9
--- /dev/null
+++ b/src/JsonDifferComponent.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { diff, detailedDiff } from 'deep-object-diff';
+import get from 'lodash/get'
+import classes from './JsonDifferComponent.module.css';
+
+const JsonDifferComponent = ({object1, object2}) => {
+
+    const diffResult = diff(object1, object2);
+    const detailedDiffResult = detailedDiff(object1, object2);
+    console.log(JSON.stringify(diffResult));
+    console.log(JSON.stringify(detailedDiffResult));
+
+    return <div className={classes.reactJsonDiffer__container}>
+    {'{'}
+        <div className={classes.reactJsonDiffer__level}>
+    <DifferProp initialObjects={({object1, object2})} diffResult={diffResult} detailedDiffResult={detailedDiffResult} path=""></DifferProp>
+        </div>
+    {'}'}
+    </div>
+}
+
+const DifferProp = ({diffResult, detailedDiffResult, initialObjects, path}) => {
+    const {object1, object2} = initialObjects;
+    const {added, deleted, updated} = detailedDiffResult;
+    const keys = Object.keys(diffResult);
+    
+    return (<>{
+        keys.map(
+                property => {
+                    
+                    const currentPath = path == "" ? property : `${path}.${property}`;
+                    const nextDiffResult = diffResult[property] || [] ;
+                    const nextAdded = added[property] || [] ;
+                    const nextDeleted = deleted[property] || [] ;
+                    const nextUpdated = updated[property] || [] ;
+                    const nextDetailedDiffResult = {added: nextAdded, deleted: nextDeleted, updated: nextUpdated};
+                    const classToUse = Object.keys(added).includes(property) ? "added" : Object.keys(deleted).includes(property) ? "deleted" : "updated";
+                    
+                    if(typeof nextDiffResult != "string" && Object.keys(nextDiffResult).length != 0)
+                    {
+                        return <div>{property}: {'{'}<div className={classes.reactJsonDiffer__level}><DifferProp initialObjects={initialObjects} diffResult={nextDiffResult} detailedDiffResult={nextDetailedDiffResult} path={currentPath}></DifferProp></div>{'}'}</div>;
+                    } else {
+                        if(classToUse == "deleted")
+                        {
+                            let originalObjectContentToDisplay = JSON.stringify(get(object1, currentPath, ""));
+                            originalObjectContentToDisplay = originalObjectContentToDisplay.length > 50 ? originalObjectContentToDisplay.slice(0, 50) + "..." : originalObjectContentToDisplay;
+                            return <div><span className={classes.reactJsonDiffer__deleted}>{property}: {originalObjectContentToDisplay}</span>,</div>
+                        }
+                        if(classToUse == "added")
+                        {
+                            let newObjectContentToDisplay = JSON.stringify(diffResult[property]);
+                            newObjectContentToDisplay = newObjectContentToDisplay.length > 50 ? newObjectContentToDisplay.slice(0, 50) + "..." : newObjectContentToDisplay;
+
+                            return <div><span className={classes.reactJsonDiffer__added}>{property}: {newObjectContentToDisplay}</span>,</div>
+                        }
+                        if(classToUse == "updated")
+                        {
+                            let originalObjectContentToDisplay = JSON.stringify(get(object1, currentPath, ""));
+                            originalObjectContentToDisplay = originalObjectContentToDisplay.length > 50 ? originalObjectContentToDisplay.slice(0, 50) + "..." : originalObjectContentToDisplay;
+
+                            let newObjectContentToDisplay = JSON.stringify(diffResult[property]);
+                            newObjectContentToDisplay = newObjectContentToDisplay.length > 50 ? newObjectContentToDisplay.slice(0, 50) + "..." : newObjectContentToDisplay;
+
+                            return (<div className={classes.reactJsonDiffer__updated}>
+                                <div><span className={classes.reactJsonDiffer__deleted}>{property}: {originalObjectContentToDisplay}</span>,</div>
+                                <div><span className={classes.reactJsonDiffer__added}>{property}: {newObjectContentToDisplay}</span>,</div>
+                            </div>)
+                        }
+                    }
+                })
+        }</>);
+}
+
+export { JsonDifferComponent };
diff --git a/src/JsonDifferComponent.module.css b/src/JsonDifferComponent.module.css
new file mode 100644
index 0000000..7ec51f0
--- /dev/null
+++ b/src/JsonDifferComponent.module.css
@@ -0,0 +1,30 @@
+
+
+.reactJsonDiffer__deleted {
+    display:inline-block;
+    white-space: pre-wrap;
+    color: #b30000;
+    background: #fadad7;
+    border: 1px solid #f8a4a4;
+}
+
+.reactJsonDiffer__updated {
+}
+
+.reactJsonDiffer__added {
+    display:inline-block;
+    white-space: pre-wrap;
+    background: #eaf2c2;
+    color: #406619;
+    border: 1px solid #a3ce4c;
+}
+
+.reactJsonDiffer__container {
+    background-color: #eceef0;
+    font-size: 15px;
+    font-family: Menlo,Monaco,Consolas,Courier New,monospace;
+}
+
+.reactJsonDiffer__level {
+    margin-left: 2em;
+}
\ No newline at end of file
diff --git a/src/TestComponent.jsx b/src/TestComponent.jsx
deleted file mode 100644
index 01ca389..0000000
--- a/src/TestComponent.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const TestComponent = () => {
-    return <h1>Wow</h1>;
-}
-
-export { TestComponent };
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 01e21fa..5edd6b5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1 @@
-export { TestComponent } from './TestComponent';
+export { JsonDifferComponent } from './JsonDifferComponent';