Merge pull request #4997 from kobotoolbox/remove-context-types

Remove legacy contextTypes

.eslintrc.js

@@ -171,7 +171,11 @@ const tsRules = Object.assign({}, jsRules, {
   'comma-dangle': 'off',
   'comma-spacing': 'off',
   'func-call-spacing': 'off',
-  'no-duplicate-imports': [1, {includeExports: true}],
+   // The 'import' plugin supports separately importing types
+   //   (@typescript-eslint/no-duplicate-imports is deprecated)
+  'import/no-duplicates': 1,
+  // Turn off ESLint's version of this rule when in TypeScript
+  'no-duplicate-imports': 'off',
   'no-nonoctal-decimal-escape': 'off',
   // It is recommended that this check is disabled for TS files, see:
   // https://typescript-eslint.io/docs/linting/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
@@ -213,7 +217,18 @@ module.exports = {
     {
       files: ['**/*.ts', '**/*.tsx'],
       parser: '@typescript-eslint/parser',
-      plugins: ['react', '@typescript-eslint'],
+      plugins: [
+        'react',
+        '@typescript-eslint',
+        // For import/no-duplicates
+        // Could do more with it.
+        'import',
+      ],
+      settings: {
+        'import/resolver': {
+          typescript: true,
+        },
+      },
       extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
       parserOptions: {
         project: ['./tsconfig.json'],

jsapp/js/app.jsx

@@ -3,12 +3,10 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import DocumentTitle from 'react-document-title';
 import {Outlet} from 'react-router-dom';
 import reactMixin from 'react-mixin';
 import Reflux from 'reflux';
-import {stores} from 'js/stores';
 import 'js/surveyCompanionStore'; // importing it so it exists
 import {} from 'js/bemComponents'; // importing it so it exists
 import bem from 'js/bem';
@@ -147,7 +145,6 @@ class App extends React.Component {
   }
 }
 
-App.contextTypes = {router: PropTypes.object};
 
 reactMixin(App.prototype, Reflux.connect(pageState, 'pageState'));
 reactMixin(App.prototype, mixins.contextRouter);

jsapp/js/components/RESTServices/RESTServiceLogs.es6

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import autoBind from 'react-autobind';
 import reactMixin from 'react-mixin';
 import Reflux from 'reflux';
@@ -368,7 +367,3 @@ export default class RESTServiceLogs extends React.Component {
 
 reactMixin(RESTServiceLogs.prototype, Reflux.ListenerMixin);
 reactMixin(RESTServiceLogs.prototype, mixins.contextRouter);
-
-RESTServiceLogs.contextTypes = {
-  router: PropTypes.object
-};

jsapp/js/components/drawer.es6

@@ -1,5 +1,4 @@
 import React, {lazy, Suspense} from 'react';
-import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import {observer} from 'mobx-react';
@@ -90,10 +89,6 @@ const FormSidebar = observer(
   }
 );
 
-FormSidebar.contextTypes = {
-  router: PropTypes.object,
-};
-
 reactMixin(FormSidebar.prototype, searches.common);
 reactMixin(FormSidebar.prototype, mixins.droppable);
 
@@ -217,8 +212,4 @@ reactMixin(Drawer.prototype, searches.common);
 reactMixin(Drawer.prototype, mixins.droppable);
 reactMixin(Drawer.prototype, mixins.contextRouter);
 
-Drawer.contextTypes = {
-  router: PropTypes.object,
-};
-
 export default withRouter(Drawer);

jsapp/js/components/formEditors.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
 import editableFormMixin from '../editorMixins/editableForm';
 import {update_states} from 'js/constants';
 import {ROUTES} from 'js/router/routerConstants';
-import mixins from '../mixins';
 import {withRouter} from 'js/router/legacy';
 
 /**
@@ -29,7 +27,6 @@ export class FormPage extends React.Component {
 }
 reactMixin(FormPage.prototype, Reflux.ListenerMixin);
 reactMixin(FormPage.prototype, editableFormMixin);
-FormPage.contextTypes = {router: PropTypes.object};
 
 class LibraryAssetEditorComponent extends React.Component {
   constructor(props) {
@@ -69,6 +66,5 @@ class LibraryAssetEditorComponent extends React.Component {
 }
 reactMixin(LibraryAssetEditorComponent.prototype, Reflux.ListenerMixin);
 reactMixin(LibraryAssetEditorComponent.prototype, editableFormMixin);
-LibraryAssetEditorComponent.contextTypes = {router: PropTypes.object};
 
 export const LibraryAssetEditor = withRouter(LibraryAssetEditorComponent);

jsapp/js/components/formLanding.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
@@ -813,8 +812,4 @@ class FormLanding extends React.Component {
 reactMixin(FormLanding.prototype, mixins.dmix);
 reactMixin(FormLanding.prototype, Reflux.ListenerMixin);
 
-FormLanding.contextTypes = {
-  router: PropTypes.object,
-};
-
 export default withRouter(FormLanding);

jsapp/js/components/formSubScreens.js

@@ -1,5 +1,4 @@
 import React, {Suspense} from 'react';
-import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import {actions} from '../actions';
@@ -15,7 +14,6 @@ import RESTServices from './RESTServices';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
 import {ROUTES} from 'js/router/routerConstants';
 import {withRouter} from 'js/router/legacy';
-import sessionStore from 'js/stores/session';
 import TransferProjects from 'js/components/permissions/transferProjects/transferProjects.component';
 
 const ConnectProjects = React.lazy(() =>
@@ -166,8 +164,4 @@ export class FormSubScreens extends React.Component {
 reactMixin(FormSubScreens.prototype, mixins.dmix);
 reactMixin(FormSubScreens.prototype, mixins.contextRouter);
 
-FormSubScreens.contextTypes = {
-  router: PropTypes.object,
-};
-
 export default withRouter(FormSubScreens);

jsapp/js/components/formViewSideTabs.es6

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
@@ -207,8 +206,4 @@ class FormViewSideTabs extends Reflux.Component {
 reactMixin(FormViewSideTabs.prototype, Reflux.ListenerMixin);
 reactMixin(FormViewSideTabs.prototype, mixins.contextRouter);
 
-FormViewSideTabs.contextTypes = {
-  router: PropTypes.object,
-};
-
 export default withRouter(FormViewSideTabs);

jsapp/js/components/modalForms/libraryAssetForm.es6

@@ -6,7 +6,6 @@ import Reflux from 'reflux';
 import clonedeep from 'lodash.clonedeep';
 import KoboTagsInput from 'js/components/common/koboTagsInput';
 import WrappedSelect from 'js/components/common/wrappedSelect';
-import PropTypes from 'prop-types';
 import TextBox from 'js/components/common/textBox';
 import bem from 'js/bem';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
@@ -294,5 +293,4 @@ export class LibraryAssetFormComponent extends React.Component {
 reactMixin(LibraryAssetFormComponent.prototype, Reflux.ListenerMixin);
 reactMixin(LibraryAssetFormComponent.prototype, mixins.contextRouter);
 
-LibraryAssetFormComponent.contextTypes = {router: PropTypes.object};
 export const LibraryAssetForm = withRouter(LibraryAssetFormComponent);

jsapp/js/components/modalForms/libraryNewItemForm.es6

@@ -2,7 +2,6 @@ import React from 'react';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
-import PropTypes from 'prop-types';
 import bem from 'js/bem';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
 import sessionStore from 'js/stores/session';
@@ -106,8 +105,4 @@ class LibraryNewItemForm extends React.Component {
 reactMixin(LibraryNewItemForm.prototype, Reflux.ListenerMixin);
 reactMixin(LibraryNewItemForm.prototype, mixins.contextRouter);
 
-LibraryNewItemForm.contextTypes = {
-  router: PropTypes.object
-};
-
 export default withRouter(LibraryNewItemForm);

jsapp/js/components/modalForms/projectSettings.es6

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import {when} from 'mobx';
@@ -355,10 +354,10 @@ class ProjectSettings extends React.Component {
     let targetUid;
     if (this.state.formAsset) {
       targetUid = this.state.formAsset.uid;
-    } else if (this.context.router && this.context.router.params.assetid) {
-      targetUid = this.context.router.params.assetid;
-    } else if (this.context.router && this.context.router.params.uid) {
-      targetUid = this.context.router.params.uid;
+    } else if (this.props.router.params.assetid) {
+      targetUid = this.props.router.params.assetid;
+    } else if (this.props.router.params.uid) {
+      targetUid = this.props.router.params.uid;
     }
 
     if (!targetUid) {
@@ -1131,6 +1130,4 @@ reactMixin(ProjectSettings.prototype, mixins.droppable);
 // NOTE: dmix mixin is causing a full asset load after component mounts
 reactMixin(ProjectSettings.prototype, mixins.dmix);
 
-ProjectSettings.contextTypes = {router: PropTypes.object};
-
 export default withRouter(ProjectSettings);

jsapp/js/formbuild/renderInBackbone.es6

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import KoboMatrix from './containers/KoboMatrix';
 import { fromJS } from 'immutable';
 
@@ -45,5 +45,6 @@ class KoboMatrixRow {
 
 export function renderKobomatrix (view, el) {
   let model = new KoboMatrixRow(view.model);
-  ReactDOM.render(<KoboMatrix model={model} />, el.get(0));
+  const root = createRoot(el.get(0));
+  root.render(<KoboMatrix model={model} />);
 }

jsapp/js/libs/reactBemComponents.es6 → jsapp/js/libs/reactBemComponents.tsx

@@ -37,10 +37,10 @@
 
 */
 import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import cx from 'classnames';
+import type { Argument as ClassnamesArgument } from 'classnames'
 
-const reactCreateBemElement = function(base, el='div'){
+const reactCreateBemElement = function(base: string, el='div'){
   let elUnwrap;
   if (el.match) {
     elUnwrap = el.match(/\<(\w+)\s?\/?\>/);
@@ -49,8 +49,15 @@ const reactCreateBemElement = function(base, el='div'){
     }
   }
 
-  let reduceModify = function (s, modifier){
-    if (Object.prototype.toString.call(modifier) === '[object Object]') {
+  const reduceModify = function (
+    s: {[key: string]: boolean},
+    modifier:
+      {[key: string]: boolean}
+      | string[]
+      | string
+      | undefined
+  ){
+    if (typeof modifier === 'object' && !Array.isArray(modifier)) {
       Object.keys(modifier).forEach(function(key){
         if (modifier[key]) {
           s[`${base}--${key}`] = true;
@@ -62,38 +69,41 @@ const reactCreateBemElement = function(base, el='div'){
     return s;
   };
 
-  class c extends React.Component {
-    render () {
+
+  class c extends React.Component<{
+    m?: string[] | string;
+    className: string;
+    classNames: ClassnamesArgument;
+  }> {
+    render() {
       const props = Object.assign({}, this.props);
 
       // allows modifiers to be a string, an array, or undefined (ignored)
-      let modifier = [].concat(props.m)
+      const modifier = ([] as Array<string | undefined>).concat(props.m)
                       .reduce(reduceModify, {});
-      delete props.m;
 
       // builds the bem classNames, and allows additional classNames
       // to be specified in an object (props.classNames) or normal string
-      props.className = classNames(base,
-                                    modifier,
-                                    props.classNames,
-                                    props.className);
-      delete props.classNames;
+      const className = cx(base,
+                         modifier,
+                         props.classNames,
+                         props.className);
 
-      return React.createElement(el, props);
+      // Omitting m and classNames from new Props
+      // via "Tricky Destructuring Assignment" (https://stackoverflow.com/a/33053362)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {m, classNames, ...newProps} = props;
+      return React.createElement(el, {...newProps, className});
     }
-  };
-  c.propTypes = {
-    m: PropTypes.any,
-    className: PropTypes.string,
-    classNames: PropTypes.any,
-  };
-  c.displayName = `BEM.${base}`;
+    static displayName = `BEM.${base}`;
+  }
+
   return c;
 };
 
-export function bemComponents (obj) {
+export function bemComponents (obj: {[key: string]: ([string, string?] | string)}) {
   let keys = Object.keys(obj);
-  return Object.freeze(keys.reduce(function(hsh, key){
+  return Object.freeze(keys.reduce(function(hsh: any, key){
     let val = obj[key];
     if (val instanceof Array) {
       hsh[key] = reactCreateBemElement.apply(null, val);

jsapp/js/lists/sidebarForms.es6

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import {Link} from 'react-router-dom';
@@ -149,10 +148,6 @@ class SidebarFormsList extends Reflux.Component {
   }
 }
 
-SidebarFormsList.contextTypes = {
-  router: PropTypes.object,
-};
-
 reactMixin(SidebarFormsList.prototype, searches.common);
 reactMixin(SidebarFormsList.prototype, Reflux.ListenerMixin);
 reactMixin(SidebarFormsList.prototype, mixins.contextRouter);