chore: Update dependencies

client/package.json

@@ -54,62 +54,63 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "classnames": "^2.3.1",
-    "connected-react-router": "^6.9.3",
-    "date-fns": "^2.29.1",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
     "dequal": "^2.0.3",
     "easymde": "^2.18.0",
-    "history": "^4.10.1",
-    "i18next": "^21.8.14",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "history": "^5.3.0",
+    "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
     "initials": "^3.1.2",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "node-sass": "^7.0.1",
-    "photoswipe": "^5.3.0",
+    "node-sass": "^8.0.0",
+    "photoswipe": "^5.3.3",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.0",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^17.0.2",
-    "react-dropzone": "^14.2.2",
-    "react-i18next": "^11.18.1",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-i18next": "^12.0.0",
     "react-input-mask": "^2.0.4",
     "react-markdown": "^8.0.3",
-    "react-photoswipe-gallery": "^2.2.1",
-    "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.1",
+    "react-photoswipe-gallery": "^2.2.2",
+    "react-redux": "^8.0.5",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "react-simplemde-editor": "^5.2.0",
-    "react-textarea-autosize": "^8.3.4",
+    "react-textarea-autosize": "^8.4.0",
     "redux": "^4.2.0",
+    "redux-first-history": "^5.1.1",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",
-    "redux-saga": "^1.1.3",
+    "redux-saga": "^1.2.1",
     "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
-    "reselect": "^4.1.6",
+    "reselect": "^4.1.7",
     "sails.io.js": "^1.2.1",
     "semantic-ui-react": "^2.1.3",
-    "socket.io-client": "^2.3.1",
+    "socket.io-client": "^2.5.0",
     "validator": "^13.7.0",
     "whatwg-fetch": "^3.6.2",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "babel-preset-airbnb": "^5.0.0",
-    "chai": "^4.3.6",
-    "enzyme": "^3.11.0",
-    "eslint": "^8.20.0",
+    "chai": "^4.3.7",
+    "eslint": "^8.28.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest-enzyme": "^7.1.2",
     "react-app-rewired": "^2.2.1",
-    "react-test-renderer": "^17.0.2"
+    "react-test-renderer": "^18.2.0"
   }
 }

client/src/components/Root.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { Route, Switch } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router';
+import { Route, Routes } from 'react-router-dom';
+import { HistoryRouter as Router } from 'redux-first-history/rr6';
 
 import Paths from '../constants/Paths';
 import LoginContainer from '../containers/LoginContainer';
@@ -19,16 +19,16 @@ import '../styles.module.scss';
 function Root({ store, history }) {
   return (
     <Provider store={store}>
-      <ConnectedRouter history={history}>
-        <Switch>
-          <Route exact path={Paths.LOGIN} component={LoginContainer} />
-          <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
-          <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
-          <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
-          <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
-          <Route path="*" component={NotFound} />
-        </Switch>
-      </ConnectedRouter>
+      <Router history={history}>
+        <Routes>
+          <Route path={Paths.LOGIN} element={<LoginContainer />} />
+          <Route path={Paths.ROOT} element={<CoreWrapperContainer />} />
+          <Route path={Paths.PROJECTS} element={<CoreWrapperContainer />} />
+          <Route path={Paths.BOARDS} element={<CoreWrapperContainer />} />
+          <Route path={Paths.CARDS} element={<CoreWrapperContainer />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </Router>
     </Provider>
   );
 }

client/src/containers/CardModalContainer.js

@@ -1,6 +1,6 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { push } from 'connected-react-router';
+import { push } from 'redux-first-history';
 import omit from 'lodash/omit';
 
 import selectors from '../selectors';

client/src/history.js

@@ -1,3 +0,0 @@
-import { createBrowserHistory } from 'history';
-
-export default createBrowserHistory();

client/src/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
-import store from './store';
-import history from './history';
+import store, { history } from './store';
 import Root from './components/Root';
 
 import './i18n';
 
-ReactDOM.render(React.createElement(Root, { store, history }), document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(React.createElement(Root, { store, history }));

client/src/reducers/core.js

@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE } from 'redux-first-history';
 
 import ActionTypes from '../constants/ActionTypes';
 import ModalTypes from '../constants/ModalTypes';

client/src/reducers/router.js

@@ -1,5 +1,3 @@
-import { connectRouter } from 'connected-react-router';
+import { routerReducer } from '../redux-history-context';
 
-import history from '../history';
-
-export default connectRouter(history);
+export default routerReducer;

client/src/redux-history-context.js

@@ -0,0 +1,6 @@
+import { createBrowserHistory } from 'history';
+import { createReduxHistoryContext } from 'redux-first-history';
+
+export const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
+  history: createBrowserHistory(),
+});

client/src/sagas/core/requests/boards.js

@@ -23,9 +23,9 @@ export function* fetchBoardByCurrentPath() {
 
   if (pathsMatch) {
     let boardId;
-    if (pathsMatch.path === Paths.BOARDS) {
+    if (pathsMatch.pattern.path === Paths.BOARDS) {
       boardId = pathsMatch.params.id;
-    } else if (pathsMatch.path === Paths.CARDS) {
+    } else if (pathsMatch.pattern.path === Paths.CARDS) {
       ({
         item: card,
         item: { boardId },

client/src/sagas/core/services/router.js

@@ -1,5 +1,5 @@
 import { call, put, select, take } from 'redux-saga/effects';
-import { push } from 'connected-react-router';
+import { push } from 'redux-first-history';
 
 import request from '../request';
 import selectors from '../../../selectors';
@@ -31,7 +31,7 @@ export function* handleLocationChange() {
     return;
   }
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.LOGIN:
       yield call(goToRoot);
 
@@ -58,7 +58,7 @@ export function* handleLocationChange() {
   let attachments;
   let deletedNotifications;
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.BOARDS:
     case Paths.CARDS: {
       const currentBoard = yield select(selectors.selectCurrentBoard);
@@ -85,7 +85,7 @@ export function* handleLocationChange() {
         } catch (error) {} // eslint-disable-line no-empty
       }
 
-      if (pathsMatch.path === Paths.CARDS) {
+      if (pathsMatch.pattern.path === Paths.CARDS) {
         const notificationIds = yield select(selectors.selectNotificationIdsForCurrentCard);
 
         if (notificationIds && notificationIds.length > 0) {

client/src/sagas/core/watchers/router.js

@@ -1,5 +1,5 @@
 import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE } from 'redux-first-history';
 
 import services from '../services';
 

client/src/sagas/login/services/router.js

@@ -1,5 +1,5 @@
 import { call, put, select } from 'redux-saga/effects';
-import { push } from 'connected-react-router';
+import { push } from 'redux-first-history';
 
 import selectors from '../../../selectors';
 import Paths from '../../../constants/Paths';
@@ -19,7 +19,7 @@ export function* handleLocationChange() {
     return;
   }
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.ROOT:
     case Paths.PROJECTS:
     case Paths.BOARDS:

client/src/sagas/login/watchers/router.js

@@ -1,5 +1,5 @@
 import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE } from 'redux-first-history';
 
 import services from '../services';
 

client/src/selectors/router.js

@@ -22,7 +22,7 @@ export const selectPath = createReduxOrmSelector(
   (state) => selectCurrentUserId(state),
   ({ Project, Board, Card }, pathsMatch, currentUserId) => {
     if (pathsMatch) {
-      switch (pathsMatch.path) {
+      switch (pathsMatch.pattern.path) {
         case Paths.PROJECTS: {
           const projectModel = Project.withId(pathsMatch.params.id);
 

client/src/setupTests.js

@@ -1,6 +1,5 @@
-import { configure } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-
-import 'jest-enzyme';
-
-configure({ adapter: new Adapter() });
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

client/src/store.js

@@ -1,14 +1,13 @@
 import { applyMiddleware, legacy_createStore as createStore, compose as reduxCompose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
-import { routerMiddleware } from 'connected-react-router';
 
 import rootReducer from './reducers';
 import rootSaga from './sagas';
-import history from './history';
+import { createReduxHistory, routerMiddleware } from './redux-history-context';
 
 const sagaMiddleware = createSagaMiddleware();
 
-const middlewares = [sagaMiddleware, routerMiddleware(history)];
+const middlewares = [sagaMiddleware, routerMiddleware];
 
 let compose = reduxCompose;
 
@@ -23,6 +22,10 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
-export default createStore(rootReducer, compose(applyMiddleware(...middlewares)));
+const store = createStore(rootReducer, compose(applyMiddleware(...middlewares)));
 
 sagaMiddleware.run(rootSaga);
+
+export default store;
+
+export const history = createReduxHistory(store);

client/src/utils/match-paths.js

@@ -2,10 +2,13 @@ import { matchPath } from 'react-router-dom';
 
 export default (pathname, paths) => {
   for (let i = 0; i < paths.length; i += 1) {
-    const match = matchPath(pathname, {
-      path: paths[i],
-      exact: true,
-    });
+    const match = matchPath(
+      {
+        path: paths[i],
+        end: true,
+      },
+      pathname,
+    );
 
     if (match) {
       return match;