Fix: Compatibility with translate() and withStyles()

package-lock.json

@@ -7502,6 +7502,12 @@
         "number-is-nan": "^1.0.0"
       }
     },
+    "is-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=",
+      "dev": true
+    },
     "is-glob": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
@@ -7879,11 +7885,35 @@
         "hyphenate-style-name": "^1.0.2"
       }
     },
+    "jss-compose": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
+      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
+      "dev": true,
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
     "jss-default-unit": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
       "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
     },
+    "jss-expand": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz",
+      "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg==",
+      "dev": true
+    },
+    "jss-extend": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
+      "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
+      "dev": true,
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
     "jss-global": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
@@ -7897,11 +7927,38 @@
         "warning": "^3.0.0"
       }
     },
+    "jss-preset-default": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
+      "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==",
+      "dev": true,
+      "requires": {
+        "jss-camel-case": "^6.1.0",
+        "jss-compose": "^5.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-expand": "^5.3.0",
+        "jss-extend": "^6.2.0",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-template": "^1.0.1",
+        "jss-vendor-prefixer": "^7.0.0"
+      }
+    },
     "jss-props-sort": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
       "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
     },
+    "jss-template": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
+      "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
+      "dev": true,
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
     "jss-vendor-prefixer": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
@@ -14023,6 +14080,27 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
       "integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg=="
     },
+    "react-jss": {
+      "version": "8.6.1",
+      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
+      "integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==",
+      "dev": true,
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "jss": "^9.7.0",
+        "jss-preset-default": "^4.3.0",
+        "prop-types": "^15.6.0",
+        "theming": "^1.3.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
+          "dev": true
+        }
+      }
+    },
     "react-leaflet": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-2.0.1.tgz",
@@ -16895,6 +16973,18 @@
       "integrity": "sha512-XWdJW7F/M3YzXhDEUP8ycmNWoYymBtsHwCHoda0YF44RthJsls95TqDrmpAlC1sB/KXaCvkdBlcNRq+AaV6klA==",
       "dev": true
     },
+    "theming": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
+      "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
+      "dev": true,
+      "requires": {
+        "brcast": "^3.0.1",
+        "is-function": "^1.0.1",
+        "is-plain-object": "^2.0.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

package.json

@@ -33,9 +33,9 @@
     "i18nscan": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.tsx'"
   },
   "dependencies": {
-    "@material-ui/core": "^3.4.0",
-    "@material-ui/icons": "^3.0.1",
+    "@material-ui/core": "^3.0.0",
     "@material-ui/lab": "^3.0.0-alpha.23",
+    "@material-ui/icons": "^3.0.0",
     "autosuggest-highlight": "^3.1.0",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
@@ -126,6 +126,7 @@
     "postcss-mixins": "^6.0.0",
     "precss": "^3.1.2",
     "react-hot-loader": "^4.3.3",
+    "react-jss": "^8.6.1",
     "resolve-url-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "^2.0.1",

src/accessions/ui/DisplayPage.tsx

@@ -41,9 +41,9 @@ const styles = (theme) => ({
 });
 
 
-interface IBrowsePageProps extends React.ClassAttributes<any> {
-  t: any;
-  classes: any;
+interface IBrowsePageProps {
+  t?: any;
+  classes?: any;
 
   uuid: string;
   doi: string; // DOI comes from the route without the '10.'
@@ -307,4 +307,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(translate()(withStyles(styles)(BrowsePage)));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(BrowsePage)));

src/accessions/ui/MapPage.tsx

 import * as React from 'react';
-import {connect} from 'react-redux';
-import {translate} from 'react-i18next';
-import {withStyles} from '@material-ui/core/styles';
-import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
 import { loadAccessionsMapInfo } from 'accessions/actions/public';
 import AccessionFilter from 'model/accession/AccessionFilter';
 import Loading from 'ui/common/Loading';
@@ -10,21 +10,22 @@ import AccessionMapInfo from 'model/accession/AccessionMapInfo';
 import PageLayout from 'ui/layout/PageLayout';
 import ContentHeader from 'ui/common/heading/ContentHeader';
 import Button from '@material-ui/core/Button';
-import Tabs, {Tab} from 'ui/common/Tabs';
+import Tabs, { Tab } from 'ui/common/Tabs';
 import PrettyFilters from 'ui/common/filter/PrettyFilters';
 
 
 let Map;
 let TileLayer;
 
-interface IMapPageProps extends React.ClassAttributes<any> {
+interface IMapPageProps {
+    classes?: any;
+    t?: any;
+
     apiUrl: string;
     mapInfo: AccessionMapInfo;
     currentTab: string;
-    classes: any;
     filterCode: string;
     loadAccessionsMapInfo: any;
-    t: any;
 }
 
 const styles = (theme) => ({
@@ -140,4 +141,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
     loadAccessionsMapInfo,
 }, dispatch);
 
-export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(BrowsePage)));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(BrowsePage)));

src/cms/ui/ContentPage.tsx

@@ -16,7 +16,7 @@ import ArticleSection from './c/ArticleSection';
 import MenuStepper from './c/MenuStepper';
 import Grid from '@material-ui/core/Grid';
 
-interface IContentPageProps extends React.ClassAttributes<any> {
+interface IContentPageProps {
   menuKey: string;
   slug: string;
   t: any;

src/model/common.model.ts

@@ -106,3 +106,9 @@ export enum PublishState {
   PUBLISHED = 'PUBLISHED',
   REVIEWING = 'REVIEWING',
 }
+
+export interface IGeoPoint {
+  id?: any;
+  lat: number;
+  lng: number;
+}

src/ui/catalog/accession/AccessionRefsTable.tsx

@@ -31,15 +31,15 @@ const styles = (theme) => ({
     },
 });
 
-interface IAccessionRefsTableProps extends React.ClassAttributes<any> {
-    classes: any;
+interface IAccessionRefsTableProps {
+    classes?: any;
+    t?: any;
     accessionRefs: AccessionRef[];
-    t: any;
 }
 
 class AccessionRefsTable extends React.Component<IAccessionRefsTableProps, any> {
 
-    constructor(props, context) {
+    constructor(props?, context?) {
         super(props, context);
     }
 

src/ui/common/LocationMap.tsx

 import * as React from 'react';
 import {withStyles} from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import { IGeoPoint } from 'model/common.model';
 
 let Map;
 let Marker;
 let TileLayer;
 
 interface ILocationMapProps extends React.ClassAttributes<any> {
-    classes: any;
-    locations: [{id: number, lat: number, lng: number}];
+    classes?: any;
+    locations: IGeoPoint[];
 }
 
 const styles = (theme) => ({
@@ -36,7 +37,7 @@ const styles = (theme) => ({
 
 class LocationMap extends React.Component<ILocationMapProps, any> {
 
-    constructor(props, context) {
+    constructor(props?, context?) {
         super(props, context);
         if (typeof window !== 'undefined') {
             Map = require('react-leaflet').Map;

src/ui/common/TableInfiniteLoader.tsx

@@ -12,7 +12,7 @@ interface IProps<T> extends React.Props<any> {
     roughItemHeight?: number; // px of height of element, defaults to 50px, determines when loadNextPage is called
     itemRenderer: (item: T, index?: number) => any;
     loadingIndicator?: any;
-    loadMore: (page: Page<T>) => void;
+    loadMore: (page: Page<T>) => any;
 }
 
 export default class TableInfiniteLoader<T> extends React.Component<IProps<T>, any> {

src/ui/common/filter/PrettyFilters.tsx

@@ -29,14 +29,15 @@ import PrettyDate from 'ui/common/time/PrettyDate';
  *    ...
  *  }
  */
-interface IPrettyFiltersProps extends React.ClassAttributes<any> {
-  classes: any;
+interface IPrettyFiltersProps {
+  classes?: any;
+  t?: any;
+
   onSubmit: (newFilter) => any;
-  showSnackbar: (snack: string) => void;
+  showSnackbar: (snack: string) => any;
   filterObj: object;
   lookups: object;
   prefix: string;
-  t: any;
 }
 
 const styles = (theme) => ({
@@ -175,8 +176,6 @@ class PrettyFilters extends React.Component<IPrettyFiltersProps, any> {
   }
 }
 
-const styled = withStyles(styles)(PrettyFilters);
-
 const mapStateToProps = (state, ownProps) => ({
   lookups: {
     crop: [],
@@ -195,4 +194,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   showSnackbar,
 }, dispatch);
 
-export default translate()(connect(mapStateToProps, mapDispatchToProps)(styled));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(PrettyFilters)));

src/ui/common/stepper/BottomSection.tsx

@@ -4,10 +4,10 @@ import {withStyles} from '@material-ui/core/styles';
 
 const styleSheet = {};
 
-const BottomSection = ({classes}) => (
+const BottomSection = ({ classes }) => (
     <Grid container spacing={ 0 } className="back-gray-yellow p-20">
         * All fields marked with * are required.
     </Grid>
 );
 
-export default withStyles(styleSheet)<{}>(BottomSection);
+export default withStyles(styleSheet)(BottomSection);

src/ui/common/stepper/StepNavigation.tsx

@@ -8,24 +8,23 @@ import {withStyles} from '@material-ui/core/styles';
 import {PublishState} from 'model/common.model';
 import Authorize from 'ui/common/authorized/Authorize';
 
-interface IStepNavigationProps extends React.ClassAttributes<any> {
-    classes: any;
+interface IStepNavigationProps {
+    classes?: any;
+    t?: any;
     steps: any;
-
     itemState: PublishState;
     uuid: string;
     location: any;
     disabled: boolean;
     disabledNext: boolean;
-    onPublish: () => void;
-    onApprove: () => void;
-    onUnpublish: () => void;
-    onGotoStep: (i: number) => () => void;
-    onDelete: () => void;
+    onPublish: any;
+    onApprove: any;
+    onUnpublish: any;
+    onGotoStep: any;
+    onDelete: any;
     showStepName: boolean;
     topDivider: boolean;
     bottomDivider: boolean;
-    t: any;
 }
 
 const styles = (theme) => ({
@@ -63,7 +62,7 @@ const styles = (theme) => ({
 
 class StepNavigation extends React.Component<IStepNavigationProps, any> {
 
-    constructor(props: any, context: any) {
+    constructor(props?: any, context?: any) {
         super(props, context);
 
         this.state = {

src/ui/common/stepper/progress-menu/StepProgress.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {withStyles} from '@material-ui/core/styles';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 
-interface IStepProgressProps extends React.ClassAttributes<any> {
+interface IStepProgressProps {
     classes?: any;
 
     value: number;
@@ -69,4 +69,4 @@ class StepProgress extends React.Component<IStepProgressProps, any> {
 
 }
 
-export default withStyles(styleSheet)<any>(StepProgress);
+export default withStyles(styleSheet)(StepProgress);

src/ui/common/stepper/progress-menu/StepsListItem.tsx

@@ -6,15 +6,14 @@ import ListItemText from '@material-ui/core/ListItemText';
 
 import StepProgress from './StepProgress';
 
-interface ICustomListItemProps extends React.ClassAttributes<any> {
+interface ICustomListItemProps {
     classes?: any;
 
     disabled: boolean;
     index: number;
     name: string;
-    completed: boolean;
     active: boolean;
-    onClick: (event) => void;
+    onClick: (event) => any;
 }
 
 const styles = {
@@ -55,4 +54,4 @@ class CustomListItem extends React.Component<ICustomListItemProps, any> {
     }
 }
 
-export default withStyles(styles)<any>(CustomListItem);
+export default withStyles(styles)(CustomListItem);

src/ui/pages/_base/BrowsePage.tsx

@@ -4,15 +4,16 @@ import * as React from 'react';
 import FilteredPage from 'model/FilteredPage';
 import { SortDirection } from 'model/Page';
 
-interface IBrowsePageProps<T> extends React.ClassAttributes<any> {
+interface IBrowsePageProps<T> {
+  t?: any;
+
   paged: FilteredPage<T>;
   renderItem: (s: T, index: number) => any;
   filterCode: string;
   applyFilters: any;
-  loadMoreData: (paged?: FilteredPage<any>) => void;
+  loadMoreData: (paged?: FilteredPage<any>) => any;
   updateRoute: any;
   currentTab: any;
-  t?: any;
 }
 
 class BrowsePage<T> extends React.Component<IBrowsePageProps<T> & any, any> {

src/ui/pages/welcome/index.tsx

@@ -4,7 +4,7 @@ import {bindActionCreators} from 'redux';
 import {withStyles} from '@material-ui/core/styles';
 import { translate } from 'react-i18next';
 
-import { navigateTo } from 'actions/navigation';
+// import { navigateTo } from 'actions/navigation';
 
 import ContentHeader from 'ui/common/heading/ContentHeader';
 import Grid from '@material-ui/core/Grid';
@@ -228,7 +228,15 @@ const styles = (theme) => ({
 
 const SEARCH_SUGGESTIONS_COUNT = 7;
 
-class WelcomePage extends React.Component<any, any> {
+interface IWelcomeProps {
+    t?: any;
+    classes?: any;
+    serverInfo: any;
+    crops: any;
+
+}
+
+class WelcomePage extends React.Component<IWelcomeProps, any> {
 
     constructor(props: any, context: any) {
         super(props, context);
@@ -453,7 +461,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
-    navigateTo,
+    // navigateTo,
 }, dispatch);
 
-export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(WelcomePage)));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(WelcomePage)));