Remove old React version and import React, ReactDOM and createReactCl…

…ass directly from the entry-points In this commit (af4d9a8) React and ReactDOM where added as dependencies of the project But it seems that they are not used because no entry-point import them. The React version that is used is the version 0.12.2 that is coming from 2014 and it is loaded as a separate script directly from the HTML templates. The purpose of this commit is to import React, ReactDOM, and createReactClass from the entry-points and get rid of the old react version. In this way, the project can be escalated using the new features of React
itpp-labs · Nov 16, 2019 · 0a5c3d5 · 0a5c3d5
1 parent 06d3e05
commit 0a5c3d5
Show file tree

Hide file tree

Showing 10 changed files with 1,632 additions and 1,506 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,10 +22,11 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.6",
+    "create-react-class": "^15.6.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "webpack": "^4.34.0",
-    "webpack-cli": "^3.3.4",
+    "webpack-cli": "^3.3.8",
     "webpack-dev-server": "^3.7.1"
   }
 }
diff --git a/ui/assets/excluded_files.tpl.html b/ui/assets/excluded_files.tpl.html
@@ -8,8 +8,6 @@
     </head>
     <body>
         <div id="root"></div>
-
-        <script src="js/react-{{.ReactVersion}}.min.js"></script>
         <script src="js/jquery-{{.jQueryVersion}}.min.js"></script>
         {{ .Source }}
     </body>

diff --git a/ui/assets/index.tpl.html b/ui/assets/index.tpl.html
@@ -19,7 +19,6 @@
         <script>
         var ModelData = {{ .ReposAsJson }};
         </script>
-        <script src="js/react-{{.ReactVersion}}.min.js"></script>
         <script src="js/jquery-{{.jQueryVersion}}.min.js"></script>
         {{ .Source }}
     </body>

diff --git a/ui/assets/js/excluded_files.js b/ui/assets/js/excluded_files.js
@@ -1,6 +1,9 @@
-import {UrlToRepo} from './common';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import ReactDOM from 'react-dom';
+import { UrlToRepo } from './common';
 
-var ExcludedRow = React.createClass({
+var ExcludedRow = createReactClass({
   render: function() {
     var url = UrlToRepo(this.props.repo, this.props.file.Filename, this.props.rev);
     return (
@@ -14,7 +17,7 @@ var ExcludedRow = React.createClass({
   }
 });
 
-var ExcludedTable = React.createClass({
+var ExcludedTable = createReactClass({
   render: function() {
     var _this = this;
     if (this.props.searching) {
@@ -40,7 +43,7 @@ var ExcludedTable = React.createClass({
   }
 });
 
-var RepoButton = React.createClass({
+var RepoButton = createReactClass({
   handleClick: function(repoName) {
     this.props.onRepoClick(repoName);
   },
@@ -58,12 +61,12 @@ var RepoButton = React.createClass({
   }
 });
 
-var RepoList = React.createClass({
+var RepoList = createReactClass({
   render: function() {
     var repos = [],
         _this = this;
-    this.props.repos.forEach(function(repo){
-      repos.push(<RepoButton repo={repo} onRepoClick={_this.props.onRepoClick} currentRepo={_this.props.repo} />);
+    this.props.repos.forEach(function(repo, index){
+      repos.push(<RepoButton key={"repo-list-" + index} repo={repo} onRepoClick={_this.props.onRepoClick} currentRepo={_this.props.repo} />);
     });
 
     return (
@@ -74,7 +77,7 @@ var RepoList = React.createClass({
   }
 });
 
-var FilterableExcludedFiles = React.createClass({
+var FilterableExcludedFiles = createReactClass({
   getInitialState: function() {
     var _this = this;
     $.ajax({
@@ -132,7 +135,7 @@ var FilterableExcludedFiles = React.createClass({
   }
 });
 
-React.renderComponent(
+ReactDOM.render(
   <FilterableExcludedFiles />,
   document.getElementById('root')
 );
diff --git a/ui/assets/js/hound.js b/ui/assets/js/hound.js
@@ -1,4 +1,7 @@
-import {UrlToRepo} from './common';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import ReactDOM from 'react-dom';
+import { UrlToRepo } from './common';
 
 var Signal = function() {
 };
@@ -300,15 +303,15 @@ var Model = {
 
 };
 
-var RepoOption = React.createClass({
+var RepoOption = createReactClass({
   render: function() {
     return (
       <option value={this.props.value} selected={this.props.selected}>{this.props.value}</option>
     )
   }
 });
 
-var SearchBar = React.createClass({
+var SearchBar = createReactClass({
   componentWillMount: function() {
     var _this = this;
     Model.didLoadRepos.tap(function(model, repos) {
@@ -317,7 +320,7 @@ var SearchBar = React.createClass({
   },
 
   componentDidMount: function() {
-    var q = this.refs.q.getDOMNode();
+    var q = this.refs.q;
 
     // TODO(knorton): Can't set this in jsx
     q.setAttribute('autocomplete', 'off');
@@ -341,7 +344,7 @@ var SearchBar = React.createClass({
     switch (event.keyCode) {
     case 40:
       // this will cause advanced to expand if it is not expanded.
-      this.refs.files.getDOMNode().focus();
+      this.refs.files.focus();
       break;
     case 38:
       this.hideAdvanced();
@@ -360,10 +363,10 @@ var SearchBar = React.createClass({
     switch (event.keyCode) {
     case 38:
       // if advanced is empty, close it up.
-      if (this.refs.files.getDOMNode().value.trim() === '') {
+      if (this.refs.files.value.trim() === '') {
         this.hideAdvanced();
       }
-      this.refs.q.getDOMNode().focus();
+      this.refs.q.focus();
       break;
     case 13:
       this.submitQuery();
@@ -378,41 +381,45 @@ var SearchBar = React.createClass({
   },
   getRegExp : function() {
     return new RegExp(
-      this.refs.q.getDOMNode().value.trim(),
-      this.refs.icase.getDOMNode().checked ? 'ig' : 'g');
+      this.refs.q.value.trim(),
+      this.refs.icase.checked ? 'ig' : 'g');
   },
   getParams: function() {
     // selecting all repos is the same as not selecting any, so normalize the url
     // to have none.
-    var repos = Model.ValidRepos(this.refs.repos.state.value);
+    var repos = Model.ValidRepos(
+        Array.prototype.map.call(this.refs.repos.querySelectorAll("option:checked"), function (option) {
+          return option.value;
+        })
+    );
     if (repos.length == Model.RepoCount()) {
       repos = [];
     }
 
     return {
-      q : this.refs.q.getDOMNode().value.trim(),
-      files : this.refs.files.getDOMNode().value.trim(),
+      q : this.refs.q.value.trim(),
+      files : this.refs.files.value.trim(),
       repos : repos.join(','),
-      i: this.refs.icase.getDOMNode().checked ? 'fosho' : 'nope'
+      i: this.refs.icase.checked ? 'fosho' : 'nope'
     };
   },
   setParams: function(params) {
-    var q = this.refs.q.getDOMNode(),
-        i = this.refs.icase.getDOMNode(),
-        files = this.refs.files.getDOMNode();
+    var q = this.refs.q,
+        i = this.refs.icase,
+        files = this.refs.files;
 
     q.value = params.q;
     i.checked = ParamValueToBool(params.i);
     files.value = params.files;
   },
   hasAdvancedValues: function() {
-    return this.refs.files.getDOMNode().value.trim() !== '' || this.refs.icase.getDOMNode().checked || this.refs.repos.getDOMNode().value !== '';
+    return this.refs.files.value.trim() !== '' || this.refs.icase.checked || this.refs.repos.value !== '';
   },
   showAdvanced: function() {
-    var adv = this.refs.adv.getDOMNode(),
-        ban = this.refs.ban.getDOMNode(),
-        q = this.refs.q.getDOMNode(),
-        files = this.refs.files.getDOMNode();
+    var adv = this.refs.adv,
+        ban = this.refs.ban,
+        q = this.refs.q,
+        files = this.refs.files;
 
     css(adv, 'height', 'auto');
     css(adv, 'padding', '10px 0');
@@ -425,9 +432,9 @@ var SearchBar = React.createClass({
     }
   },
   hideAdvanced: function() {
-    var adv = this.refs.adv.getDOMNode(),
-        ban = this.refs.ban.getDOMNode(),
-        q = this.refs.q.getDOMNode();
+    var adv = this.refs.adv,
+        ban = this.refs.ban,
+        q = this.refs.q;
 
     css(adv, 'height', '0');
     css(adv, 'padding', '0');
@@ -446,8 +453,8 @@ var SearchBar = React.createClass({
       selected[repo] = true;
     });
 
-    this.state.allRepos.forEach(function(repoName) {
-      repoOptions.push(<RepoOption value={repoName} selected={selected[repoName]}/>);
+    this.state.allRepos.forEach(function(repoName, index) {
+      repoOptions.push(<RepoOption key={repoName + "-option-" + index} value={repoName} selected={selected[repoName]}/>);
     });
 
     var stats = this.state.stats;
@@ -477,7 +484,7 @@ var SearchBar = React.createClass({
               type="text"
               placeholder="Search by Regexp"
               ref="q"
-              autocomplete="off"
+              autoComplete="off"
               onKeyDown={this.queryGotKeydown}
               onFocus={this.queryGotFocus}/>
           <div className="button-add-on">
@@ -636,7 +643,7 @@ var ContentFor = function(line, regexp) {
   return buffer.join('');
 };
 
-var FilesView = React.createClass({
+var FilesView = createReactClass({
   onLoadMore: function(event) {
     Model.LoadMore(this.props.repo);
   },
@@ -650,11 +657,11 @@ var FilesView = React.createClass({
     var files = matches.map(function(match, index) {
       var filename = match.Filename,
           blocks = CoalesceMatches(match.Matches);
-      var matches = blocks.map(function(block) {
-        var lines = block.map(function(line) {
+      var matches = blocks.map(function(block, mindex) {
+        var lines = block.map(function(line, lindex) {
           var content = ContentFor(line, regexp);
           return (
-            <div className="line">
+            <div className="line" key={repo + "-" + lindex + "-" + mindex + "-" + index}>
               <a href={Model.UrlToRepo(repo, filename, line.Number, rev)}
                   className="lnum"
                   target="_blank">{line.Number}</a>
@@ -664,12 +671,12 @@ var FilesView = React.createClass({
         });
 
         return (
-          <div className="match">{lines}</div>
+          <div className="match" key={repo + "-lines-" + mindex + "-" + index}>{lines}</div>
         );
       });
 
       return (
-        <div className="file">
+        <div className="file" key={repo + "-file-" + index}>
           <div className="title">
             <a href={Model.UrlToRepo(repo, match.Filename, null, rev)}>
               {match.Filename}
@@ -696,7 +703,7 @@ var FilesView = React.createClass({
   }
 });
 
-var ResultView = React.createClass({
+var ResultView = createReactClass({
   componentWillMount: function() {
     var _this = this;
     Model.willSearch.tap(function(model, params) {
@@ -735,7 +742,7 @@ var ResultView = React.createClass({
         results = this.state.results || [];
     var repos = results.map(function(result, index) {
       return (
-        <div className="repo">
+        <div className="repo" key={"results-view-" + index}>
           <div className="title">
             <span className="mega-octicon octicon-repo"></span>
             <span className="name">{Model.NameForRepo(result.Repo)}</span>
@@ -754,7 +761,7 @@ var ResultView = React.createClass({
   }
 });
 
-var App = React.createClass({
+var App = createReactClass({
   componentWillMount: function() {
     var params = ParamsFromUrl(),
         repos = (params.repos == '') ? [] : params.repos.split(',');
@@ -835,7 +842,7 @@ var App = React.createClass({
   }
 });
 
-React.renderComponent(
+ReactDOM.render(
   <App />,
   document.getElementById('root')
 );

diff --git a/ui/assets/js/react-0.12.2.min.js b/ui/assets/js/react-0.12.2.min.js