migrate to react 15.5

npm-shrinkwrap.json

@@ -1417,6 +1417,11 @@
       "from": "cipher-base@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.3.tgz"
     },
+    "classnames": {
+      "version": "2.2.5",
+      "from": "classnames@>=2.2.5 <3.0.0",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz"
+    },
     "clean-css": {
       "version": "3.4.24",
       "from": "clean-css@>=3.1.9 <4.0.0",
@@ -1835,6 +1840,11 @@
       "from": "diffie-hellman@>=5.0.0 <6.0.0",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz"
     },
+    "dom-helpers": {
+      "version": "3.2.1",
+      "from": "dom-helpers@>=3.2.0 <4.0.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz"
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "from": "dom-serializer@>=0.0.0 <1.0.0",
@@ -4452,6 +4462,11 @@
         }
       }
     },
+    "keycode": {
+      "version": "2.1.8",
+      "from": "keycode@>=2.1.2 <3.0.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.8.tgz"
+    },
     "keygrip": {
       "version": "1.0.1",
       "from": "keygrip@>=1.0.0 <1.1.0",
@@ -5686,6 +5701,11 @@
       "from": "promise@>=7.1.1 <8.0.0",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz"
     },
+    "prop-types": {
+      "version": "15.5.8",
+      "from": "prop-types@>=15.5.6 <16.0.0",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.8.tgz"
+    },
     "proxy-addr": {
       "version": "1.1.4",
       "from": "proxy-addr@>=1.1.3 <1.2.0",
@@ -5782,14 +5802,43 @@
       }
     },
     "react": {
-      "version": "15.0.2",
-      "from": "react@>=15.0.1 <15.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.0.2.tgz"
+      "version": "15.5.0",
+      "from": "react@15.5.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-15.5.0.tgz",
+      "dependencies": {
+        "prop-types": {
+          "version": "15.5.0-alpha.0",
+          "from": "prop-types@15.5.0-alpha.0",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.0-alpha.0.tgz"
+        }
+      }
+    },
+    "react-bootstrap": {
+      "version": "0.30.10",
+      "from": "react-bootstrap@latest",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.30.10.tgz",
+      "dependencies": {
+        "babel-runtime": {
+          "version": "6.23.0",
+          "from": "babel-runtime@>=6.11.6 <7.0.0",
+          "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.23.0.tgz"
+        }
+      }
     },
     "react-dom": {
-      "version": "15.0.2",
-      "from": "react-dom@>=15.0.1 <15.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.0.2.tgz"
+      "version": "15.5.0",
+      "from": "react-dom@15.5.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.5.0.tgz"
+    },
+    "react-overlays": {
+      "version": "0.6.12",
+      "from": "react-overlays@>=0.6.12 <0.7.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.6.12.tgz"
+    },
+    "react-prop-types": {
+      "version": "0.4.0",
+      "from": "react-prop-types@>=0.4.0 <0.5.0",
+      "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz"
     },
     "read-pkg": {
       "version": "1.1.0",
@@ -6836,6 +6885,11 @@
       "from": "unc-path-regex@>=0.1.0 <0.2.0",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz"
     },
+    "uncontrollable": {
+      "version": "4.1.0",
+      "from": "uncontrollable@>=4.0.1 <5.0.0",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-4.1.0.tgz"
+    },
     "underscore": {
       "version": "1.7.0",
       "from": "underscore@>=1.7.0 <1.8.0",
@@ -7035,6 +7089,11 @@
       "from": "ware@>=1.3.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz"
     },
+    "warning": {
+      "version": "3.0.0",
+      "from": "warning@>=3.0.0 <4.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz"
+    },
     "watchpack": {
       "version": "1.3.1",
       "from": "watchpack@>=1.2.0 <2.0.0",

package.json

@@ -88,8 +88,9 @@
     "multer": "~1.2.1",
     "nodemailer": "~2.7.0",
     "nodemailer-ses-transport": "~1.5.0",
-    "react": "~15.0.1",
-    "react-dom": "~15.0.1",
+    "react": "~15.5.0",
+    "react-bootstrap": "~0.30.10",
+    "react-dom": "~15.5.0",
     "redis": "~2.6.5",
     "reveal.js": "~3.2.0",
     "socket.io": "~1.3.0",

resource/js/app.js

@@ -30,9 +30,10 @@ const crowiRenderer = new CrowiRenderer();
 window.crowiRenderer = crowiRenderer;
 
 const componentMappings = {
-  'search-top': <HeaderSearchBox />,
-  'search-page': <SearchPage />,
-  'page-list-search': <PageListSearch />,
+  'search-top': <HeaderSearchBox crowi={crowi} />,
+  'search-page': <SearchPage crowi={crowi} />,
+  'page-list-search': <PageListSearch crowi={crowi} />,
+
   //'revision-history': <PageHistory pageId={pageId} />,
   //'page-comment': <PageComment />,
   'seen-user-list': <SeenUserList />,

resource/js/components/Common/Icon.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class Icon extends React.Component {
 
@@ -17,6 +18,6 @@ export default class Icon extends React.Component {
 
 // TODO: support spin, size and so far
 Icon.propTypes = {
-  name: React.PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
 };
 

resource/js/components/Common/UserDate.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import moment from 'moment';
 
@@ -21,9 +22,9 @@ export default class UserDate extends React.Component {
 }
 
 UserDate.propTypes = {
-  dateTime: React.PropTypes.string.isRequired,
-  format: React.PropTypes.string,
-  className: React.PropTypes.string,
+  dateTime: PropTypes.string.isRequired,
+  format: PropTypes.string,
+  className: PropTypes.string,
 };
 
 UserDate.defaultProps = {

resource/js/components/HeaderSearchBox.js

@@ -1,18 +1,16 @@
 // This is the root component for #search-top
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import SearchForm from './HeaderSearchBox/SearchForm';
 import SearchSuggest from './HeaderSearchBox/SearchSuggest';
-import axios from 'axios'
 
 export default class SearchBox extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.crowi = window.crowi; // FIXME
-
     this.state = {
       searchingKeyword: '',
       searchedPages: [],
@@ -45,7 +43,7 @@ export default class SearchBox extends React.Component {
       searching: true,
     });
 
-    this.crowi.apiGet('/search', {q: keyword})
+    this.props.crowi.apiGet('/search', {q: keyword})
     .then(res => {
       this.setState({
         searchingKeyword: keyword,
@@ -81,7 +79,7 @@ export default class SearchBox extends React.Component {
 }
 
 SearchBox.propTypes = {
-  //pollInterval: React.PropTypes.number,
+  //pollInterval: PropTypes.number,
 };
 SearchBox.defaultProps = {
   //pollInterval: 1000,

resource/js/components/HeaderSearchBox/SearchForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 // Header.SearchForm
 export default class SearchForm extends React.Component {
@@ -73,7 +74,7 @@ export default class SearchForm extends React.Component {
         className="search-form form-group input-group search-top-input-group"
       >
         <input
-          autocomplete="off"
+          autoComplete="off"
           type="text"
           className="search-top-input form-control"
           placeholder="Search ... Page Title (Path) and Content"
@@ -95,9 +96,9 @@ export default class SearchForm extends React.Component {
 }
 
 SearchForm.propTypes = {
-  onSearchFormChanged: React.PropTypes.func.isRequired,
-  isShown: React.PropTypes.func.isRequired,
-  pollInterval: React.PropTypes.number,
+  onSearchFormChanged: PropTypes.func.isRequired,
+  isShown: PropTypes.func.isRequired,
+  pollInterval: PropTypes.number,
 };
 SearchForm.defaultProps = {
   pollInterval: 1000,

resource/js/components/HeaderSearchBox/SearchSuggest.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import ListView from '../PageList/ListView';
 
@@ -46,9 +47,9 @@ export default class SearchSuggest extends React.Component {
 }
 
 SearchSuggest.propTypes = {
-  searchedPages: React.PropTypes.array.isRequired,
-  searchingKeyword: React.PropTypes.string.isRequired,
-  searching: React.PropTypes.bool.isRequired,
+  searchedPages: PropTypes.array.isRequired,
+  searchingKeyword: PropTypes.string.isRequired,
+  searching: PropTypes.bool.isRequired,
 };
 
 SearchSuggest.defaultProps = {

resource/js/components/Page/PageBody.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class PageBody extends React.Component {
 
@@ -31,8 +32,8 @@ export default class PageBody extends React.Component {
 }
 
 PageBody.propTypes = {
-  page: React.PropTypes.object.isRequired,
-  pageBody: React.PropTypes.string,
+  page: PropTypes.object.isRequired,
+  pageBody: PropTypes.string,
 };
 
 PageBody.defaultProps = {

resource/js/components/Page/PagePath.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class PagePath extends React.Component {
 
@@ -56,7 +57,7 @@ export default class PagePath extends React.Component {
 }
 
 PagePath.propTypes = {
-  page: React.PropTypes.object.isRequired,
+  page: PropTypes.object.isRequired,
 };
 
 PagePath.defaultProps = {

resource/js/components/PageHistory.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Icon from './Common/Icon';
 import PageRevisionList from './PageHistory/PageRevisionList';
@@ -134,6 +135,6 @@ export default class PageHistory extends React.Component {
 }
 
 PageHistory.propTypes = {
-  pageId: React.PropTypes.string,
-  crowi: React.PropTypes.object.isRequired,
+  pageId: PropTypes.string,
+  crowi: PropTypes.object.isRequired,
 };

resource/js/components/PageHistory/PageRevisionList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Revision     from './Revision';
 import RevisionDiff from './RevisionDiff';
@@ -47,8 +48,8 @@ export default class PageRevisionList extends React.Component {
 }
 
 PageRevisionList.propTypes = {
-  revisions: React.PropTypes.array,
-  diffOpened: React.PropTypes.object,
-  onDiffOpenClicked: React.PropTypes.func.isRequired,
+  revisions: PropTypes.array,
+  diffOpened: PropTypes.object,
+  onDiffOpenClicked: PropTypes.func.isRequired,
 }
 

resource/js/components/PageHistory/Revision.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import UserDate     from '../Common/UserDate';
 import Icon         from '../Common/Icon';
@@ -53,7 +54,7 @@ export default class Revision extends React.Component {
 }
 
 Revision.propTypes = {
-  revision: React.PropTypes.object,
-  onDiffOpenClicked: React.PropTypes.func.isRequired,
+  revision: PropTypes.object,
+  onDiffOpenClicked: PropTypes.func.isRequired,
 }
 

resource/js/components/PageHistory/RevisionDiff.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { createPatch } from 'diff';
 import { Diff2Html } from 'diff2html';
@@ -36,7 +37,7 @@ export default class RevisionDiff extends React.Component {
 }
 
 RevisionDiff.propTypes = {
-  currentRevision: React.PropTypes.object.isRequired,
-  previousRevision: React.PropTypes.object.isRequired,
-  revisionDiffOpened: React.PropTypes.bool.isRequired,
+  currentRevision: PropTypes.object.isRequired,
+  previousRevision: PropTypes.object.isRequired,
+  revisionDiffOpened: PropTypes.bool.isRequired,
 }

resource/js/components/PageList/ListView.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Page from './Page';
 
@@ -6,7 +7,7 @@ export default class ListView extends React.Component {
 
   render() {
     const listView = this.props.pages.map((page) => {
-      return <Page page={page} />;
+      return <Page page={page} key={"page-list:list-view:" + page._id} />;
     });
 
     return (
@@ -20,7 +21,7 @@ export default class ListView extends React.Component {
 }
 
 ListView.propTypes = {
-  pages: React.PropTypes.array.isRequired,
+  pages: PropTypes.array.isRequired,
 };
 
 ListView.defaultProps = {

resource/js/components/PageList/Page.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import UserPicture from '../User/UserPicture';
 import PageListMeta from './PageListMeta';
@@ -27,8 +28,8 @@ export default class Page extends React.Component {
 }
 
 Page.propTypes = {
-  page: React.PropTypes.object.isRequired,
-  linkTo: React.PropTypes.string,
+  page: PropTypes.object.isRequired,
+  linkTo: PropTypes.string,
 };
 
 Page.defaultProps = {

resource/js/components/PageList/PageListMeta.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class PageListMeta extends React.Component {
 
@@ -42,7 +43,7 @@ export default class PageListMeta extends React.Component {
 }
 
 PageListMeta.propTypes = {
-  page: React.PropTypes.object.isRequired,
+  page: PropTypes.object.isRequired,
 };
 
 PageListMeta.defaultProps = {

resource/js/components/PageList/PagePath.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class PagePath extends React.Component {
 
@@ -40,7 +41,7 @@ export default class PagePath extends React.Component {
 }
 
 PagePath.propTypes = {
-  page: React.PropTypes.object.isRequired,
+  page: PropTypes.object.isRequired,
 };
 
 PagePath.defaultProps = {

resource/js/components/PageListSearch.js

@@ -1,7 +1,8 @@
 // This is the root component for #page-list-search
 
 import React from 'react';
-import axios from 'axios'
+import PropTypes from 'prop-types';
+
 import SearchResult from './SearchPage/SearchResult';
 
 export default class PageListSearch extends React.Component {
@@ -119,29 +120,18 @@ export default class PageListSearch extends React.Component {
     this.setState({
       searchingKeyword: keyword,
     });
-    axios.get('/_api/search', {params: {q: keyword, tree: tree}})
-    .then((res) => {
-      if (res.data.ok) {
-
-        this.setState({
-          searchedKeyword: keyword,
-          searchedPages: res.data.data,
-          searchResultMeta: res.data.meta,
-        });
-      } else {
-        this.setState({
-          searchError: res.data,
-        });
-      }
-
 
-      // TODO error
-    })
-    .catch((res) => {
+    this.props.crowi.apiGet('/search', {q: keyword, tree: tree})
+    .then((res) => {
+      this.setState({
+        searchedKeyword: keyword,
+        searchedPages: res.data,
+        searchResultMeta: res.meta,
+      });
+    }).catch(err => {
       this.setState({
-        searchError: res.data,
+        searchError: err,
       });
-      // TODO error
     });
   };
 
@@ -168,7 +158,7 @@ export default class PageListSearch extends React.Component {
 }
 
 PageListSearch.propTypes = {
-  query: React.PropTypes.object,
+  query: PropTypes.object,
 };
 PageListSearch.defaultProps = {
   //pollInterval: 1000,

resource/js/components/SearchPage.js

@@ -1,7 +1,8 @@
 // This is the root component for #search-page
 
 import React from 'react';
-import Crowi from '../util/Crowi';
+import PropTypes from 'prop-types';
+
 import SearchForm from './SearchPage/SearchForm';
 import SearchResult from './SearchPage/SearchResult';
 
@@ -10,8 +11,6 @@ export default class SearchPage extends React.Component {
   constructor(props) {
     super(props);
 
-    this.crowi = window.crowi; // FIXME
-
     this.state = {
       location: location,
       searchingKeyword: this.props.query.q || '',
@@ -72,7 +71,7 @@ export default class SearchPage extends React.Component {
       searchingKeyword: keyword,
     });
 
-    this.crowi.apiGet('/search', {q: keyword})
+    this.props.crowi.apiGet('/search', {q: keyword})
     .then(res => {
       this.changeURL(keyword);
 
@@ -112,7 +111,7 @@ export default class SearchPage extends React.Component {
 }
 
 SearchPage.propTypes = {
-  query: React.PropTypes.object,
+  query: PropTypes.object,
 };
 SearchPage.defaultProps = {
   //pollInterval: 1000,

resource/js/components/SearchPage/SearchForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 // Search.SearchForm
 export default class SearchForm extends React.Component {
@@ -53,7 +54,7 @@ export default class SearchForm extends React.Component {
 }
 
 SearchForm.propTypes = {
-  onSearchFormChanged: React.PropTypes.func.isRequired,
+  onSearchFormChanged: PropTypes.func.isRequired,
 };
 SearchForm.defaultProps = {
 };

resource/js/components/SearchPage/SearchResult.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Page from '../PageList/Page';
 import SearchResultList from './SearchResultList';
@@ -99,10 +100,10 @@ export default class SearchResult extends React.Component {
 }
 
 SearchResult.propTypes = {
-  tree: React.PropTypes.string.isRequired,
-  pages: React.PropTypes.array.isRequired,
-  searchingKeyword: React.PropTypes.string.isRequired,
-  searchResultMeta: React.PropTypes.object.isRequired,
+  tree: PropTypes.string.isRequired,
+  pages: PropTypes.array.isRequired,
+  searchingKeyword: PropTypes.string.isRequired,
+  searchResultMeta: PropTypes.object.isRequired,
 };
 SearchResult.defaultProps = {
   tree: '',

resource/js/components/SearchPage/SearchResultList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import PageBody from '../Page/PageBody.js';
 
@@ -50,8 +51,8 @@ export default class SearchResultList extends React.Component {
 }
 
 SearchResultList.propTypes = {
-  pages: React.PropTypes.array.isRequired,
-  searchingKeyword: React.PropTypes.string.isRequired,
+  pages: PropTypes.array.isRequired,
+  searchingKeyword: PropTypes.string.isRequired,
 };
 
 SearchResultList.defaultProps = {

resource/js/components/SeenUserList/UserList.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import UserPicture from '../User/UserPicture';
 
 export default class UserList extends React.Component {
@@ -34,7 +36,7 @@ export default class UserList extends React.Component {
 }
 
 UserList.propTypes = {
-  users: React.PropTypes.array,
+  users: PropTypes.array,
 };
 
 UserList.defaultProps = {

resource/js/components/User/User.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import UserPicture from './UserPicture';
 
@@ -19,7 +20,7 @@ export default class User extends React.Component {
 }
 
 User.propTypes = {
-  user: React.PropTypes.object.isRequired,
+  user: PropTypes.object.isRequired,
 };
 
 User.defaultProps = {

resource/js/components/User/UserPicture.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 // TODO UserComponent?
 export default class UserPicture extends React.Component {
@@ -36,8 +37,8 @@ export default class UserPicture extends React.Component {
 }
 
 UserPicture.propTypes = {
-  user: React.PropTypes.object.isRequired,
-  size: React.PropTypes.string,
+  user: PropTypes.object.isRequired,
+  size: PropTypes.string,
 };
 
 UserPicture.defaultProps = {