updated dependencies #556

app/app.js

@@ -6,11 +6,12 @@
  */
 
 // Needed for redux-saga es6 generator support
-import '@babel/polyfill';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 
 // Import all the third party stuff
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
@@ -70,9 +71,10 @@ const rootRoute = {
   childRoutes: createRoutes(store),
 };
 
-// console.log(this.props.location)
+const container = document.getElementById('app');
+const root = createRoot(container);
 const render = (messages) => {
-  ReactDOM.render(
+  root.render(
     <Provider store={store}>
       <LanguageProvider messages={messages}>
         <Grommet theme={theme}>
@@ -82,8 +84,7 @@ const render = (messages) => {
           />
         </Grommet>
       </LanguageProvider>
-    </Provider>,
-    document.getElementById('app'),
+    </Provider>
   );
 };
 
@@ -97,6 +98,7 @@ if (module.hot) {
 }
 
 // Chunked polyfill for browsers without Intl support
+/* eslint-disable import/extensions */
 if (!window.Intl) {
   new Promise((resolve) => {
     resolve(import('intl'));

app/components/ContentNarrow/index.js

@@ -2,48 +2,66 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Grid from 'grid-styled';
+import { Box } from 'grommet';
 
 import Content from 'components/Content';
 import Row from 'components/styled/Row';
 
 
 const RowStyled = styled(Row)`
   margin: 0;
+  display: flex;
   @media (min-width: ${(props) => props.theme.breakpoints.small}) {
     margin-right: -${(props) => props.theme.gutter}px;
     margin-left: -${(props) => props.theme.gutter}px;
   }
 `;
-const GridSpace = styled(Grid)`
-  display: none !important;
-  @media (min-width: ${(props) => props.theme.breakpoints.small}) {
+const GridSpace = styled((p) => <Box {...p} />)`
+  @media (min-width: 0px) {
+    display: none !important;
+  }
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    display: inline-block !important;
+    flex-basis: 25%;
+  }
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    display: inline-block !important;
+    flex-basis: 33%;
+  }
+  @media (min-width: ${({ theme }) => theme.breakpoints.large}) {
     display: inline-block !important;
+    flex-basis: 33%;
   }
 `;
-const GridMain = styled(Grid)`
+const GridMain = styled((p) => <Box {...p} />)`
   padding-right: 0 !important;
   padding-left: 0 !important;
-  @media (min-width: ${(props) => props.theme.breakpoints.small}) {
-    padding-right: ${(props) => props.theme.gutter}px !important;
-    padding-left: ${(props) => props.theme.gutter}px !important;
+  @media (min-width: 0px) {
+    flex-basis: 100%;
+  }
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    padding-right: ${({ theme }) => theme.gutter}px !important;
+    padding-left: ${({ theme }) => theme.gutter}px !important;
+    flex-basis: 50%;
+  }
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    flex-basis: 40%;
+  }
+  @media (min-width: ${({ theme }) => theme.breakpoints.large}) {
+    flex-basis: 33%;
   }
 `;
 
-class ContentNarrow extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <Content>
-        <RowStyled>
-          <GridSpace lg={1 / 3} md={3 / 10} sm={1 / 4} />
-          <GridMain lg={1 / 3} md={2 / 5} sm={1 / 2} xs={1}>
-            {this.props.children}
-          </GridMain>
-        </RowStyled>
-      </Content>
-    );
-  }
-}
+const ContentNarrow = ({ children }) => (
+  <Content>
+    <RowStyled>
+      <GridSpace />
+      <GridMain>
+        {children}
+      </GridMain>
+    </RowStyled>
+  </Content>
+);
 
 ContentNarrow.propTypes = {
   children: PropTypes.node,

app/components/EntityListDownload/OptionGroupToggle.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
 import { Button, Box, Text } from 'grommet';
@@ -35,8 +35,9 @@ const Count = styled((p) => <Box {...p} />)`
 `;
 
 export function OptionGroupToggle({
-  label, onToggle, expanded, activeCount, optionCount, intl,
+  label, onToggle, expanded, activeCount, optionCount,
 }) {
+  const intl = useIntl();
   return (
     <Box>
       <Styled
@@ -73,7 +74,6 @@ OptionGroupToggle.propTypes = {
   expanded: PropTypes.bool,
   activeCount: PropTypes.number,
   optionCount: PropTypes.number,
-  intl: intlShape,
 };
 
-export default injectIntl(OptionGroupToggle);
+export default OptionGroupToggle;

app/components/EntityListDownload/index.js

@@ -6,7 +6,7 @@
 
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { palette } from 'styled-theme';
 import DebounceInput from 'react-debounce-input';
 import { snakeCase } from 'lodash/string';
@@ -107,12 +107,12 @@ export function EntityListDownload({
   taxonomies,
   connections,
   onClose,
-  intl,
   hasUserRole,
   searchQuery,
   entityIdsSelected,
   entityTitle,
 }) {
+  const intl = useIntl();
   const [typeTitle, setTypeTitle] = useState('entities');
   const [csvFilename, setCSVFilename] = useState('csv');
   const [csvSuffix, setCSVSuffix] = useState(true);
@@ -480,7 +480,6 @@ EntityListDownload.propTypes = {
   entityIdsSelected: PropTypes.object,
   hasUserRole: PropTypes.object,
   entityTitle: PropTypes.object,
-  intl: intlShape,
 };
 
-export default injectIntl(EntityListDownload);
+export default EntityListDownload;

app/components/EntityListItem/EntityListItemExpandable.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
+import { injectIntl } from 'react-intl';
 
 import Component from 'components/styled/Component';
 import Icon from 'components/Icon';
@@ -57,9 +58,9 @@ class EntityListItemExpandable extends React.PureComponent { // eslint-disable-l
       dates,
       colWidth,
       column,
+      intl,
     } = this.props;
     const { type, icon } = column;
-    const { intl } = this.context;
     const info = [];
     if (dates) {
       if (dates.due) {
@@ -94,13 +95,11 @@ EntityListItemExpandable.propTypes = {
   onClick: PropTypes.func,
   colWidth: PropTypes.number,
   dates: PropTypes.object,
+  intl: PropTypes.object.isRequired,
 };
 
 EntityListItemExpandable.defaultProps = {
   count: 0,
 };
-EntityListItemExpandable.contextTypes = {
-  intl: PropTypes.object,
-};
 
-export default EntityListItemExpandable;
+export default injectIntl(EntityListItemExpandable);

app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/ConnectionPopup.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
+import { injectIntl } from 'react-intl';
 // import Link from 'containers/Link';
 
 import { TEXT_TRUNCATE } from 'themes/config';
@@ -186,9 +187,8 @@ export class ConnectionPopup extends React.PureComponent { // eslint-disable-lin
 
   render() {
     const {
-      entities, option, wrapper, draft,
+      entities, option, wrapper, draft, intl,
     } = this.props;
-    const { intl } = this.context;
     const entitiesTotal = entities ? entities.size : 0;
     return (
       <PopupWrapper
@@ -272,10 +272,7 @@ ConnectionPopup.propTypes = {
   option: PropTypes.object,
   wrapper: PropTypes.object,
   draft: PropTypes.bool,
+  intl: PropTypes.object.isRequired,
 };
-ConnectionPopup.contextTypes = {
-  intl: PropTypes.object,
-};
-
 
-export default ConnectionPopup;
+export default injectIntl(ConnectionPopup);

app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/EntityListItemMainTaxonomies.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Map } from 'immutable';
+import { injectIntl } from 'react-intl';
+
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
 
@@ -62,7 +64,7 @@ class EntityListItemMainTaxonomies extends React.PureComponent { // eslint-disab
   };
 
   getSmartTitle = (title, isSmart) => {
-    const { intl } = this.context;
+    const { intl } = this.props;
     return intl
       ? `${title}: ${intl.formatMessage(isSmart ? appMessages.labels.smart.met : appMessages.labels.smart.notMet)}`
       : title;
@@ -144,10 +146,7 @@ EntityListItemMainTaxonomies.propTypes = {
   categories: PropTypes.instanceOf(Map), // eslint-disable-line react/no-unused-prop-types
   taxonomies: PropTypes.instanceOf(Map), // eslint-disable-line react/no-unused-prop-types
   onEntityClick: PropTypes.func,
+  intl: PropTypes.object.isRequired,
 };
 
-EntityListItemMainTaxonomies.contextTypes = {
-  intl: PropTypes.object,
-};
-
-export default EntityListItemMainTaxonomies;
+export default injectIntl(EntityListItemMainTaxonomies);