Replaced React.PropTypes (deprecated) with prop-types package

README.md

@@ -21,9 +21,9 @@ A free, user-friendly, extendable application and [API](http://docs.webodm.org)
 
 ![Alt text](/screenshots/pointcloud.png?raw=true "3D Display")
 
-![Alt text](/screenshots/dashboard.png?raw=true "Dashboard")
+![Alt text](https://user-images.githubusercontent.com/1951843/28586405-af18e8cc-7141-11e7-9853-a7feca7c9c6b.gif)
 
-[![WebODM - An Introduction to a Web Interface for OpenDroneMap to Make Drone Mapping Even Easier](https://img.youtube.com/vi/UnN-NzL96T8/0.jpg)](https://www.youtube.com/watch?v=UnN-NzL96T8 "WebODM - An Introduction to a Web Interface for OpenDroneMap to Make Drone Mapping Even Easier")
+![Alt text](/screenshots/dashboard.png?raw=true "Dashboard")
 
 If you know Python, web technologies (JS, HTML, CSS, etc.) or both, it's easy to make a change to WebODM! Make a fork, clone the repository and run `./devenv.sh start`. That's it! See the [Development Quickstart](http://docs.webodm.org/#development-quickstart) and [Contributing](/CONTRIBUTING.md) documents for more information. All ideas are considered and people of all skill levels are welcome to contribute.
 

app/static/app/js/MapView.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import './css/MapView.scss';
 import Map from './components/Map';
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 
 class MapView extends React.Component {
   static defaultProps = {
@@ -11,9 +12,9 @@ class MapView extends React.Component {
   };
 
   static propTypes = {
-      mapItems: React.PropTypes.array.isRequired, // list of dictionaries where each dict is a {mapType: 'orthophoto', url: <tiles.json>},
-      selectedMapType: React.PropTypes.oneOf(['orthophoto', 'dsm', 'dtm']),
-      title: React.PropTypes.string,
+      mapItems: PropTypes.array.isRequired, // list of dictionaries where each dict is a {mapType: 'orthophoto', url: <tiles.json>},
+      selectedMapType: PropTypes.oneOf(['orthophoto', 'dsm', 'dtm']),
+      title: PropTypes.string,
   };
 
   constructor(props){

app/static/app/js/ModelView.jsx

@@ -4,6 +4,7 @@ import ErrorMessage from './components/ErrorMessage';
 import SwitchModeButton from './components/SwitchModeButton';
 import AssetDownloadButtons from './components/AssetDownloadButtons';
 import Standby from './components/Standby';
+import PropTypes from 'prop-types';
 import $ from 'jquery';
 
 const THREE = require('./vendor/potree/js/three'); // import does not work :/
@@ -18,7 +19,7 @@ class ModelView extends React.Component {
   };
 
   static propTypes = {
-      task: React.PropTypes.object.isRequired, // The object should contain two keys: {id: <taskId>, project: <projectId>}
+      task: PropTypes.object.isRequired, // The object should contain two keys: {id: <taskId>, project: <projectId>}
   };
 
   constructor(props){

app/static/app/js/components/AssetDownloadButtons.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import '../css/AssetDownloadButtons.scss';
 import AssetDownloads from '../classes/AssetDownloads';
+import PropTypes from 'prop-types';
 
 class AssetDownloadButtons extends React.Component {
     static defaultProps = {
@@ -10,9 +11,9 @@ class AssetDownloadButtons extends React.Component {
     };
 
     static propTypes = {
-        disabled: React.PropTypes.bool,
-        task: React.PropTypes.object.isRequired,
-        direction: React.PropTypes.string
+        disabled: PropTypes.bool,
+        task: PropTypes.object.isRequired,
+        direction: PropTypes.string
     };
 
     constructor(props){

app/static/app/js/components/EditPresetDialog.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import FormDialog from './FormDialog';
 import ProcessingNodeOption from './ProcessingNodeOption';
 import PresetUtils from '../classes/PresetUtils';
+import PropTypes from 'prop-types';
 import $ from 'jquery';
 
 class EditPresetDialog extends React.Component {
@@ -10,11 +11,11 @@ class EditPresetDialog extends React.Component {
     };
 
     static propTypes = {
-        preset: React.PropTypes.object.isRequired,
-        availableOptions: React.PropTypes.array.isRequired,
-        saveAction: React.PropTypes.func.isRequired,
-        deleteAction: React.PropTypes.func.isRequired,
-        onHide: React.PropTypes.func
+        preset: PropTypes.object.isRequired,
+        availableOptions: PropTypes.array.isRequired,
+        saveAction: PropTypes.func.isRequired,
+        deleteAction: PropTypes.func.isRequired,
+        onHide: PropTypes.func
     };
 
     constructor(props){

app/static/app/js/components/EditProjectDialog.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ErrorMessage from './ErrorMessage';
 import FormDialog from './FormDialog';
+import PropTypes from 'prop-types';
 import $ from 'jquery';
 
 class EditProjectDialog extends React.Component {
@@ -16,17 +17,17 @@ class EditProjectDialog extends React.Component {
     };
 
     static propTypes = {
-        projectName: React.PropTypes.string,
-        projectDescr: React.PropTypes.string,
-        saveAction: React.PropTypes.func.isRequired,
-        onShow: React.PropTypes.func,
-        deleteAction: React.PropTypes.func,
-        title: React.PropTypes.string,
-        saveLabel: React.PropTypes.string,
-        savingLabel: React.PropTypes.string,
-        saveIcon: React.PropTypes.string,
-        deleteWarning: React.PropTypes.string,
-        show: React.PropTypes.bool
+        projectName: PropTypes.string,
+        projectDescr: PropTypes.string,
+        saveAction: PropTypes.func.isRequired,
+        onShow: PropTypes.func,
+        deleteAction: PropTypes.func,
+        title: PropTypes.string,
+        saveLabel: PropTypes.string,
+        savingLabel: PropTypes.string,
+        saveIcon: PropTypes.string,
+        deleteWarning: PropTypes.string,
+        show: PropTypes.bool
     };
 
     constructor(props){

app/static/app/js/components/EditTaskForm.jsx

@@ -4,6 +4,7 @@ import values from 'object.values';
 import Utils from '../classes/Utils';
 import EditPresetDialog from './EditPresetDialog';
 import ErrorMessage from './ErrorMessage';
+import PropTypes from 'prop-types';
 import $ from 'jquery';
 
 if (!Object.values) {
@@ -17,12 +18,12 @@ class EditTaskForm extends React.Component {
   };
 
   static propTypes = {
-      selectedNode: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.number
+      selectedNode: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
       ]),
-      onFormLoaded: React.PropTypes.func,
-      task: React.PropTypes.object
+      onFormLoaded: PropTypes.func,
+      task: PropTypes.object
   };
 
   constructor(props){

app/static/app/js/components/EditTaskPanel.jsx

@@ -2,6 +2,7 @@ import '../css/EditTaskPanel.scss';
 import React from 'react';
 import ErrorMessage from './ErrorMessage';
 import EditTaskForm from './EditTaskForm';
+import PropTypes from 'prop-types';
 import $ from 'jquery';
 
 class EditTaskPanel extends React.Component {
@@ -9,9 +10,9 @@ class EditTaskPanel extends React.Component {
     };
 
     static propTypes = {
-        task: React.PropTypes.object.isRequired,
-        onSave: React.PropTypes.func.isRequired,
-        onCancel: React.PropTypes.func.isRequired
+        task: PropTypes.object.isRequired,
+        onSave: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
     };
 
     constructor(props){

app/static/app/js/components/ErrorMessage.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class ErrorMessage extends React.Component {
     static propTypes = {
-        bind: React.PropTypes.array.isRequired // two element array, 
+        bind: PropTypes.array.isRequired // two element array, 
                                                // with first element being the parent element 
                                                // and the second the error property to display
                                                // ex. [this, 'error']

app/static/app/js/components/FormDialog.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ErrorMessage from './ErrorMessage';
 import '../css/FormDialog.scss';
+import PropTypes from 'prop-types';
 import $ from 'jquery';
 
 class FormDialog extends React.Component {
@@ -14,21 +15,21 @@ class FormDialog extends React.Component {
     };
 
     static propTypes = {
-        getFormData: React.PropTypes.func.isRequired,
-        reset: React.PropTypes.func.isRequired,
-        saveAction: React.PropTypes.func.isRequired,
-        onShow: React.PropTypes.func,
-        onHide: React.PropTypes.func,
-        deleteAction: React.PropTypes.func,
-        title: React.PropTypes.string,
-        saveLabel: React.PropTypes.string,
-        savingLabel: React.PropTypes.string,
-        saveIcon: React.PropTypes.string,
-        deleteWarning: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.bool
+        getFormData: PropTypes.func.isRequired,
+        reset: PropTypes.func.isRequired,
+        saveAction: PropTypes.func.isRequired,
+        onShow: PropTypes.func,
+        onHide: PropTypes.func,
+        deleteAction: PropTypes.func,
+        title: PropTypes.string,
+        saveLabel: PropTypes.string,
+        savingLabel: PropTypes.string,
+        saveIcon: PropTypes.string,
+        deleteWarning: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.bool
         ]),
-        show: React.PropTypes.bool
+        show: PropTypes.bool
     };
 
     constructor(props){

app/static/app/js/components/Map.jsx

@@ -15,6 +15,7 @@ import $ from 'jquery';
 import ErrorMessage from './ErrorMessage';
 import SwitchModeButton from './SwitchModeButton';
 import AssetDownloads from '../classes/AssetDownloads';
+import PropTypes from 'prop-types';
 
 class Map extends React.Component {
   static defaultProps = {
@@ -26,12 +27,12 @@ class Map extends React.Component {
   };
 
   static propTypes = {
-    maxzoom: React.PropTypes.number,
-    minzoom: React.PropTypes.number,
-    showBackground: React.PropTypes.bool,
-    tiles: React.PropTypes.array.isRequired,
-    opacity: React.PropTypes.number,
-    mapType: React.PropTypes.oneOf(['orthophoto', 'dsm', 'dtm'])
+    maxzoom: PropTypes.number,
+    minzoom: PropTypes.number,
+    showBackground: PropTypes.bool,
+    tiles: PropTypes.array.isRequired,
+    opacity: PropTypes.number,
+    mapType: PropTypes.oneOf(['orthophoto', 'dsm', 'dtm'])
   };
 
   constructor(props) {

app/static/app/js/components/NewTaskPanel.jsx

@@ -1,6 +1,7 @@
 import '../css/NewTaskPanel.scss';
 import React from 'react';
 import EditTaskForm from './EditTaskForm';
+import PropTypes from 'prop-types';
 
 class NewTaskPanel extends React.Component {
   static defaultProps = {
@@ -9,9 +10,9 @@ class NewTaskPanel extends React.Component {
   };
 
   static propTypes = {
-      onSave: React.PropTypes.func.isRequired,
-      name: React.PropTypes.string,
-      uploading: React.PropTypes.bool
+      onSave: PropTypes.func.isRequired,
+      name: PropTypes.string,
+      uploading: PropTypes.bool
   };
 
   constructor(props){

app/static/app/js/components/Paginated.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import update from 'immutability-helper';
 import HistoryNav from '../classes/HistoryNav';
+import PropTypes from 'prop-types';
 
 class Paginated extends React.Component{
   static defaultProps = {
@@ -8,8 +9,8 @@ class Paginated extends React.Component{
   };
 
   static propTypes = {
-      history: React.PropTypes.object.isRequired, // reference to the history object coming from the route this component is bound to
-      currentPage: React.PropTypes.number
+      history: PropTypes.object.isRequired, // reference to the history object coming from the route this component is bound to
+      currentPage: PropTypes.number
   };
 
   constructor(props){

app/static/app/js/components/ProcessingNodeOption.jsx

@@ -1,26 +1,27 @@
 import React from 'react';
 import '../css/ProcessingNodeOption.scss';
+import PropTypes from 'prop-types';
 import $ from 'jquery';
 
 class ProcessingNodeOption extends React.Component {
   static defaultProps = {};
 
   static propTypes = {
-    name: React.PropTypes.string.isRequired,
-    defaultValue: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.bool
+    name: PropTypes.string.isRequired,
+    defaultValue: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.bool
     ]).isRequired,
-    value: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.bool
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.bool
     ]),
-    type: React.PropTypes.string,
-    domain: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.array
+    type: PropTypes.string,
+    domain: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.array
     ]),
-    help: React.PropTypes.string,
+    help: PropTypes.string,
   };
 
   constructor(props){

app/static/app/js/components/Standby.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../css/Standby.scss';
+import PropTypes from 'prop-types';
 
 class Standby extends React.Component {
   static defaultProps = {
@@ -8,8 +9,8 @@ class Standby extends React.Component {
   };
 
   static propTypes = {
-    message: React.PropTypes.string,
-    show: React.PropTypes.bool
+    message: PropTypes.string,
+    show: PropTypes.bool
   };
 
   constructor(props){

app/static/app/js/components/SwitchModeButton.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../css/SwitchModeButton.scss';
+import PropTypes from 'prop-types';
 
 class SwitchModeButton extends React.Component {
   static defaultProps = {
@@ -8,8 +9,8 @@ class SwitchModeButton extends React.Component {
   };
 
   static propTypes = {
-    task: React.PropTypes.object, // The object should contain two keys: {id: <taskId>, project: <projectId>}
-    type: React.PropTypes.string // Either "mapToModel" or "modelToMap"
+    task: PropTypes.object, // The object should contain two keys: {id: <taskId>, project: <projectId>}
+    type: PropTypes.string // Either "mapToModel" or "modelToMap"
   };
 
   constructor(props){

package.json

@@ -46,6 +46,7 @@
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "sass-loader": "^4.0.2",
+    "statuses": "^1.3.1",
     "style-loader": "^0.13.1",
     "tween.js": "^16.6.0",
     "url-loader": "^0.5.7",