installation: upgrade and fix compat issues

Author: kpsherva

craco.config.js

@@ -1,12 +1,11 @@
-const { ESLINT_MODES } = require('@craco/craco');
 var path = require('path');
 
 module.exports = {
   plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
   eslint: {
     enable: true /* (default value) */,
     useEslintrc: true,
-    mode: ESLINT_MODES.file,
+    mode: 'file',
   },
   webpack: {
     alias: {

package.json

@@ -54,31 +54,31 @@
   "devDependencies": {
     "@artsy/fresnel": "^1.3.1",
     "@babel/runtime": "^7.15.4",
-    "@craco/craco": "^6.0.0",
+    "@craco/craco": "^7.1.0",
     "@rjsf/core": "^5.18.4",
     "@rjsf/semantic-ui": "^5.18.0",
     "@rollup/plugin-alias": "^3.1.8",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^12.0.0",
     "@rollup/plugin-node-resolve": "^8.0.1",
-    "@semantic-ui-react/craco-less": "^2.0.0",
+    "@semantic-ui-react/craco-less": "^3.0.0",
     "@types/jest": "^24.9.1",
-    "@typescript-eslint/eslint-plugin": "^5.5.0",
-    "axios": "^1.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.0",
+    "axios": "^0.21.2",
     "axios-mock-adapter": "^1.22.0",
     "classnames": "^2.2.6",
     "cypress": "^13.11.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
-    "eslint": "^8.0.0",
+    "eslint": "^7.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-config-react-app": "^7.0.0",
+    "eslint-config-react-app": "^6.0.0",
     "eslint-loader": "^4.0.0",
-    "eslint-plugin-flowtype": "^8.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "formik": "^2.2.6",
@@ -102,7 +102,7 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "^5.0.0",
     "react-scroll": "^1.8.4",
-    "react-searchkit": "^2.0.0",
+    "react-searchkit": "^2.2.6",
     "react-show-more": "^2.0.0",
     "react-tagcloud": "^2.0.0",
     "redux": "^4.0.5",

src/lib/forms/rjsf/RJSFCustomTemplates.js

@@ -1,9 +1,7 @@
 import { RJSFormWrapper } from '@forms/rjsf/RJSFormWrapper';
-import {
-  ArrayFieldTemplate,
-  FieldTemplate,
-  ObjectFieldTemplate,
-} from '@rjsf/semantic-ui';
+import ArrayFieldTemplate from '@rjsf/semantic-ui/lib/ArrayFieldTemplate';
+import FieldTemplate from '@rjsf/semantic-ui/lib/FieldTemplate';
+import ObjectFieldTemplate from '@rjsf/semantic-ui/lib/ObjectFieldTemplate';
 import _find from 'lodash/find';
 import PropTypes from 'prop-types';
 import React from 'react';

src/lib/forms/rjsf/fields/RJSFLabelField.js

@@ -1,4 +1,4 @@
-import HiddenWidget from '@rjsf/core/dist/cjs/components/widgets/HiddenWidget';
+import HiddenWidget from '@rjsf/core/lib/components/widgets/HiddenWidget';
 import _capitalize from 'lodash/capitalize';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';

src/lib/modules/Document/DocumentContent.js

@@ -13,15 +13,15 @@ export class DocumentContent extends Component {
   render() {
     const {
       metadata,
-      metadata: { abstract, table_of_content },
+      metadata: { abstract, table_of_content: toc },
     } = this.props;
 
     return (
       <>
         <Divider horizontal>Table of contents</Divider>
-        {!_isEmpty(table_of_content) ? (
+        {!_isEmpty(toc) ? (
           <List ordered>
-            {table_of_content.map((entry) => (
+            {toc.map((entry) => (
               <List.Item key={entry}>
                 <List.Content>{entry}</List.Content>
               </List.Item>

src/lib/pages/backoffice/Document/DocumentDetails/DocumentMetadata/DocumentPublishing.js

@@ -33,11 +33,11 @@ export class DocumentPublishing extends Component {
   renderConferenceInfo = () => {
     const {
       document: {
-        metadata: { conference_info },
+        metadata: { conference_info: conferenceInfo },
       },
     } = this.props;
     let rows = [];
-    conference_info.map((conf) => {
+    conferenceInfo.map((conf) => {
       for (const [key, val] of Object.entries(conf)) {
         if (Array.isArray(val)) {
           const arrayVals = (
@@ -57,7 +57,7 @@ export class DocumentPublishing extends Component {
           rows.push({ name: capitalize(key), value: val });
         }
       }
-      if (conference_info.length > 1) {
+      if (conferenceInfo.length > 1) {
         rows.push(<br />);
         rows.push(<br />);
       }

src/lib/pages/frontsite/Documents/DocumentDetails/DocumentPanel/DocumentTitle.js

@@ -11,10 +11,10 @@ import { Link } from 'react-router-dom';
 export class DocumentTitle extends Component {
   subtitle() {
     const {
-      metadata: { alternative_titles },
+      metadata: { alternative_titles: altTitles },
     } = this.props;
-    if (!_isEmpty(alternative_titles)) {
-      const subtitle = alternative_titles.find((e) => e.type === 'SUBTITLE');
+    if (!_isEmpty(altTitles)) {
+      const subtitle = altTitles.find((e) => e.type === 'SUBTITLE');
       if (!_isEmpty(subtitle)) {
         return <Header.Subheader>{subtitle.value}</Header.Subheader>;
       }