Initial use of diff2html

Author: nickrfer

app/app.html

@@ -6,6 +6,9 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/loaders.css/0.1.2/loaders.min.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.47.0/react-datepicker.min.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css" type="text/css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.0/diff2html.min.js" type="text/css" />
     <script>
       (function() {
         if (!process.env.HOT) {
@@ -45,5 +48,9 @@
         );
       }
     </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.0/diff2html.min.js"></script>
   </body>
 </html>

app/components/Home.js

@@ -11,7 +11,7 @@ export default class Home extends Component {
     loading: boolean
   };
 
-  constructor(props) {
+  constructor(props: any) {
     super(props);
     this.state = {
       loading: true

app/components/SvnRevisionList.css

@@ -74,6 +74,7 @@
 
 div {
   text-align: left !important;
+  cursor: pointer;
 }
 
 i {

app/components/SvnRevisionList.js

@@ -7,8 +7,10 @@ import _ from 'lodash';
 import dateFormat from 'dateformat';
 import DatePicker from 'react-datepicker';
 import moment from 'moment';
-import { func, array, date } from 'prop-types';
+import { Diff2Html, Diff2HtmlUI } from 'diff2html';
 import DiffSvn2Git from 'diffsvn2git';
+import ReactHtmlParser from 'react-html-parser';
+import { array, boolean, func, date } from 'prop-types';
 import 'react-datepicker/dist/react-datepicker.css';
 import styles from './SvnRevisionList.css';
 
@@ -25,43 +27,61 @@ export default class SvnRevisionList extends Component {
     revisions: array,
     revisionDate: date,
     onRevisionDateChanged: func.isRequired,
-    startRevisionLoading: func.isRequired
+    startRevisionLoading: func.isRequired,
+    prettyDiffHtml: string
   };
 
   constructor(props) {
     super(props);
     this.state = {
       revisions: [],
-      revisionDate: moment('15/04/2011', 'DD/MM/YYYY')
+      revisionDate: moment('13/04/2015', 'DD/MM/YYYY'),
+      prettyDiffHtml: ''
     };
   }
 
   componentWillMount() {
-    this.fetchRevisionList();
+    this.fetchRevisionList(this.state.revisionDate);
   }
 
-  fetchRevisionList() {
-    if (moment(this.state.revisionDate, 'DD/MM/YYYY').isValid()) {
+  fetchRevisionList(dateChanged: date) {
+    if (moment(dateChanged, 'DD/MM/YYYY').isValid()) {
       this.setState({ revisions: [] });
 
       this.props.startRevisionLoading(true);
       const self = this;
-      console.log('revisionDate: ', moment(this.state.revisionDate, 'DD/MM/YYYY'));
 
-      const revisionDateFormated = this.state.revisionDate.format('YYYY-MM-DD');
-      console.log('revisionDateFormated: ', revisionDateFormated);
+      const revisionDateFormated = dateChanged.format('YYYY-MM-DD');
 
       diffSvn2Git.listRevisionsByDate(revisionDateFormated).then((loadedRevisions) => {
-        self.setState({ revisions: loadedRevisions });
+        self.setState({ revisions: loadedRevisions, prettyDiffHtml: '' });
         this.props.startRevisionLoading(false);
       });
+      self.setState({ revisionDate: dateChanged });
     }
   }
 
+  generateDiffTest(revisionSelected) {
+    console.log('revisionSelected: ', revisionSelected);
+    diffSvn2Git.parse(revisionSelected).then((patch) => {
+      console.log('Patch result: ');
+
+      console.log('Diff2Html result: ');
+      const diff2HtmlResult = Diff2Html.getPrettyHtml(patch);
+      console.log(diff2HtmlResult);
+
+      this.setState({ prettyDiffHtml: diff2HtmlResult });
+    });
+  }
+
   createItem(rows: Array<any>, revision: Object) {
     rows.push(
       <li key={revision.$.revision}>
-        <div style={styles.fileName}>
+        <div
+          role="button"
+          style={styles.fileName}
+          onClick={this.generateDiffTest(revision.$.revision)}
+        >
           <i className="material-icons">label</i>
           <p>{`r${revision.$.revision} | ${dateFormat(revision.date, 'dd/mm/yyyy HH:MM:ss')} | ${revision.author} | ${revision.msg}`}</p>
         </div>
@@ -89,10 +109,14 @@ export default class SvnRevisionList extends Component {
           dateFormat="DD/MM/YYYY"
           selected={this.state.revisionDate}
           onChange={this.fetchRevisionList.bind(this)}
+          isClearable
         />
         <ul className="video-list">
           {rows}
         </ul>
+        <div>
+          { ReactHtmlParser(this.state.prettyDiffHtml) }
+        </div>
       </div>
     );
   }

app/package.json

@@ -15,6 +15,7 @@
   "license": "MIT",
   "dependencies": {
     "dateformat": "^2.0.0",
+    "diff2html": "^2.3.0",
     "diffsvn2git": "^0.0.25",
     "loaders.css": "^0.1.2",
     "moment": "^2.18.1",

app/yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+abbrev@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+
 asap@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
@@ -40,6 +44,18 @@ dateformat@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
 
+diff2html@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/diff2html/-/diff2html-2.3.0.tgz#375fb0783ca8fa90307749399bc9c75eb7cf6580"
+  dependencies:
+    diff "^3.2.0"
+    hogan.js "^3.0.2"
+    whatwg-fetch "^2.0.3"
+
+diff@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
+
 diffsvn2git@^0.0.25:
   version "0.0.25"
   resolved "https://registry.yarnpkg.com/diffsvn2git/-/diffsvn2git-0.0.25.tgz#92b8168569369cf4a156759db3170a77be6bd716"
@@ -74,6 +90,13 @@ fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
+hogan.js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
+  dependencies:
+    mkdirp "0.3.0"
+    nopt "1.0.10"
+
 iconv-lite@~0.4.13:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
@@ -107,6 +130,10 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   dependencies:
     js-tokens "^3.0.0"
 
+mkdirp@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
+
 moment@^2.17.1, moment@^2.18.1:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
@@ -118,6 +145,12 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+nopt@1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"
+
 object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -145,15 +178,6 @@ react-datepicker@^0.47.0:
     react-onclickoutside "^5.11.1"
     tether "^1.4.0"
 
-react-dom@^15.6.1:
-  version "15.6.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
-
 react-loaders@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-loaders/-/react-loaders-2.5.0.tgz#fb23e9545995a403f8214e893037549aae5088c8"
@@ -206,7 +230,7 @@ ua-parser-js@^0.7.9:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
-whatwg-fetch@>=0.10.0:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
 

package.json

@@ -189,17 +189,18 @@
     "extract-text-webpack-plugin": "^2.1.0",
     "font-awesome": "^4.7.0",
     "history": "^4.6.1",
+    "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-datepicker": "^0.47.0",
     "react-dom": "^15.5.4",
     "react-hot-loader": "3.0.0-beta.6",
+    "react-html-parser": "^1.0.3",
     "react-redux": "^5.0.4",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "react-router-redux": "^5.0.0-alpha.6",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0",
-    "prop-types": "^15.5.10",
     "source-map-support": "^0.4.14"
   },
   "devEngines": {