diff --git a/client/package-lock.json b/client/package-lock.json
index f206a645..0b0510f7 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -32,13 +32,11 @@
"react-markdown": "^8.0.3",
"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.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.2.1",
@@ -19949,15 +19947,6 @@
"@babel/runtime": "^7.9.2"
}
},
- "node_modules/redux-first-history": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/redux-first-history/-/redux-first-history-5.1.1.tgz",
- "integrity": "sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw==",
- "peerDependencies": {
- "history": "^4.7.2 || ^5.0",
- "redux": "^3.6.0 || ^4.0.0"
- }
- },
"node_modules/redux-logger": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
@@ -37850,12 +37839,6 @@
"@babel/runtime": "^7.9.2"
}
},
- "redux-first-history": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/redux-first-history/-/redux-first-history-5.1.1.tgz",
- "integrity": "sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw==",
- "requires": {}
- },
"redux-logger": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
diff --git a/client/package.json b/client/package.json
index 82d94e12..d1dd8d6b 100755
--- a/client/package.json
+++ b/client/package.json
@@ -79,13 +79,11 @@
"react-markdown": "^8.0.3",
"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.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.2.1",
diff --git a/client/src/components/Root.jsx b/client/src/components/Root.jsx
index a6fd6510..7e7abcf3 100755
--- a/client/src/components/Root.jsx
+++ b/client/src/components/Root.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { Route, Routes } from 'react-router-dom';
-import { HistoryRouter as Router } from 'redux-first-history/rr6';
+import { ReduxRouter } from '../lib/redux-router';
import Paths from '../constants/Paths';
import LoginContainer from '../containers/LoginContainer';
@@ -19,7 +19,7 @@ import '../styles.module.scss';
function Root({ store, history }) {
return (
-
+
} />
} />
@@ -28,7 +28,7 @@ function Root({ store, history }) {
} />
} />
-
+
);
}
diff --git a/client/src/containers/CardModalContainer.js b/client/src/containers/CardModalContainer.js
index 836d5835..49b993d3 100755
--- a/client/src/containers/CardModalContainer.js
+++ b/client/src/containers/CardModalContainer.js
@@ -1,7 +1,7 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
-import { push } from 'redux-first-history';
import omit from 'lodash/omit';
+import { push } from '../lib/redux-router';
import selectors from '../selectors';
import entryActions from '../entry-actions';
diff --git a/client/src/history.js b/client/src/history.js
new file mode 100755
index 00000000..9937105a
--- /dev/null
+++ b/client/src/history.js
@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory();
diff --git a/client/src/index.js b/client/src/index.js
index 4c7a533b..574cafee 100755
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,7 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import store, { history } from './store';
+import store from './store';
+import history from './history';
import Root from './components/Root';
import './i18n';
diff --git a/client/src/lib/redux-router/ReduxRouter.jsx b/client/src/lib/redux-router/ReduxRouter.jsx
new file mode 100644
index 00000000..1635b331
--- /dev/null
+++ b/client/src/lib/redux-router/ReduxRouter.jsx
@@ -0,0 +1,46 @@
+import React, { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Router } from 'react-router-dom';
+
+import { handleLocationChange } from './actions';
+
+function ReduxRouter({ children, history, selector, basename }) {
+ const state = useSelector(selector);
+ const dispatch = useDispatch();
+
+ useLayoutEffect(() => {
+ const unlisten = history.listen((nextState) => {
+ dispatch(handleLocationChange(nextState.location, nextState.action));
+ });
+
+ dispatch(handleLocationChange(history.location, history.action, true));
+
+ return unlisten;
+ }, [history, dispatch]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+ReduxRouter.propTypes = {
+ children: PropTypes.element.isRequired,
+ history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ selector: PropTypes.func,
+ basename: PropTypes.string,
+};
+
+ReduxRouter.defaultProps = {
+ selector: ({ router }) => router,
+ basename: undefined,
+};
+
+export default ReduxRouter;
diff --git a/client/src/lib/redux-router/actions.js b/client/src/lib/redux-router/actions.js
new file mode 100644
index 00000000..ec377cb8
--- /dev/null
+++ b/client/src/lib/redux-router/actions.js
@@ -0,0 +1,28 @@
+export const LOCATION_CHANGE_HANDLE = '@@router/LOCATION_CHANGE_HANDLE';
+
+export const handleLocationChange = (location, action, isFirstRendering = false) => ({
+ type: LOCATION_CHANGE_HANDLE,
+ payload: {
+ location,
+ action,
+ isFirstRendering,
+ },
+});
+
+export const HISTORY_METHOD_CALL = '@@router/HISTORY_METHOD_CALL';
+
+const createHistoryMethodCaller = (method) => {
+ return (...args) => ({
+ type: HISTORY_METHOD_CALL,
+ payload: {
+ method,
+ args,
+ },
+ });
+};
+
+export const push = createHistoryMethodCaller('push');
+export const replace = createHistoryMethodCaller('replace');
+export const go = createHistoryMethodCaller('go');
+export const back = createHistoryMethodCaller('back');
+export const forward = createHistoryMethodCaller('forward');
diff --git a/client/src/lib/redux-router/create-router-middleware.js b/client/src/lib/redux-router/create-router-middleware.js
new file mode 100644
index 00000000..0c75c5e8
--- /dev/null
+++ b/client/src/lib/redux-router/create-router-middleware.js
@@ -0,0 +1,18 @@
+import { HISTORY_METHOD_CALL } from './actions';
+
+const createRouterMiddleware = (history) => {
+ // eslint-disable-next-line consistent-return
+ return () => (next) => (action) => {
+ if (action.type !== HISTORY_METHOD_CALL) {
+ return next(action);
+ }
+
+ const {
+ payload: { method, args },
+ } = action;
+
+ history[method](...args);
+ };
+};
+
+export default createRouterMiddleware;
diff --git a/client/src/lib/redux-router/create-router-reducer.js b/client/src/lib/redux-router/create-router-reducer.js
new file mode 100644
index 00000000..5e47ae84
--- /dev/null
+++ b/client/src/lib/redux-router/create-router-reducer.js
@@ -0,0 +1,28 @@
+import { LOCATION_CHANGE_HANDLE } from './actions';
+
+const createRouterReducer = (history) => {
+ const initialState = {
+ location: history.location,
+ action: history.action,
+ };
+
+ return (state = initialState, { type, payload } = {}) => {
+ if (type === LOCATION_CHANGE_HANDLE) {
+ const { location, action, isFirstRendering } = payload;
+
+ if (isFirstRendering) {
+ return state;
+ }
+
+ return {
+ ...state,
+ location,
+ action,
+ };
+ }
+
+ return state;
+ };
+};
+
+export default createRouterReducer;
diff --git a/client/src/lib/redux-router/index.js b/client/src/lib/redux-router/index.js
new file mode 100644
index 00000000..4f05e444
--- /dev/null
+++ b/client/src/lib/redux-router/index.js
@@ -0,0 +1,12 @@
+export {
+ LOCATION_CHANGE_HANDLE,
+ HISTORY_METHOD_CALL,
+ push,
+ replace,
+ go,
+ back,
+ forward,
+} from './actions';
+export { default as createRouterReducer } from './create-router-reducer';
+export { default as createRouterMiddleware } from './create-router-middleware';
+export { default as ReduxRouter } from './ReduxRouter';
diff --git a/client/src/reducers/core.js b/client/src/reducers/core.js
index 5fdd9256..af67a3f1 100755
--- a/client/src/reducers/core.js
+++ b/client/src/reducers/core.js
@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE } from 'redux-first-history';
+import { LOCATION_CHANGE_HANDLE } from '../lib/redux-router';
import ActionTypes from '../constants/ActionTypes';
import ModalTypes from '../constants/ModalTypes';
@@ -12,7 +12,7 @@ const initialState = {
// eslint-disable-next-line default-param-last
export default (state = initialState, { type, payload }) => {
switch (type) {
- case LOCATION_CHANGE:
+ case LOCATION_CHANGE_HANDLE:
case ActionTypes.MODAL_CLOSE:
return {
...state,
diff --git a/client/src/reducers/router.js b/client/src/reducers/router.js
index 83d93261..2f31791a 100755
--- a/client/src/reducers/router.js
+++ b/client/src/reducers/router.js
@@ -1,3 +1,5 @@
-import { routerReducer } from '../redux-history-context';
+import { createRouterReducer } from '../lib/redux-router';
-export default routerReducer;
+import history from '../history';
+
+export default createRouterReducer(history);
diff --git a/client/src/redux-history-context.js b/client/src/redux-history-context.js
deleted file mode 100755
index 54b64e47..00000000
--- a/client/src/redux-history-context.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createBrowserHistory } from 'history';
-import { createReduxHistoryContext } from 'redux-first-history';
-
-export const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
- history: createBrowserHistory(),
-});
diff --git a/client/src/sagas/core/services/router.js b/client/src/sagas/core/services/router.js
index a3090dc9..f47cd9bb 100644
--- a/client/src/sagas/core/services/router.js
+++ b/client/src/sagas/core/services/router.js
@@ -1,5 +1,5 @@
import { call, put, select, take } from 'redux-saga/effects';
-import { push } from 'redux-first-history';
+import { push } from '../../../lib/redux-router';
import request from '../request';
import selectors from '../../../selectors';
diff --git a/client/src/sagas/core/watchers/router.js b/client/src/sagas/core/watchers/router.js
index b9b5bb93..97ba1fef 100755
--- a/client/src/sagas/core/watchers/router.js
+++ b/client/src/sagas/core/watchers/router.js
@@ -1,8 +1,8 @@
import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'redux-first-history';
+import { LOCATION_CHANGE_HANDLE } from '../../../lib/redux-router';
import services from '../services';
export default function* routerWatchers() {
- yield takeEvery(LOCATION_CHANGE, () => services.handleLocationChange());
+ yield takeEvery(LOCATION_CHANGE_HANDLE, () => services.handleLocationChange());
}
diff --git a/client/src/sagas/login/services/router.js b/client/src/sagas/login/services/router.js
index 8c9e9a0c..18ecd813 100644
--- a/client/src/sagas/login/services/router.js
+++ b/client/src/sagas/login/services/router.js
@@ -1,5 +1,5 @@
import { call, put, select } from 'redux-saga/effects';
-import { push } from 'redux-first-history';
+import { push } from '../../../lib/redux-router';
import selectors from '../../../selectors';
import Paths from '../../../constants/Paths';
diff --git a/client/src/sagas/login/watchers/router.js b/client/src/sagas/login/watchers/router.js
index b9b5bb93..97ba1fef 100755
--- a/client/src/sagas/login/watchers/router.js
+++ b/client/src/sagas/login/watchers/router.js
@@ -1,8 +1,8 @@
import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'redux-first-history';
+import { LOCATION_CHANGE_HANDLE } from '../../../lib/redux-router';
import services from '../services';
export default function* routerWatchers() {
- yield takeEvery(LOCATION_CHANGE, () => services.handleLocationChange());
+ yield takeEvery(LOCATION_CHANGE_HANDLE, () => services.handleLocationChange());
}
diff --git a/client/src/store.js b/client/src/store.js
index 31888004..ba84b5ad 100755
--- a/client/src/store.js
+++ b/client/src/store.js
@@ -1,13 +1,14 @@
import { applyMiddleware, legacy_createStore as createStore, compose as reduxCompose } from 'redux';
import createSagaMiddleware from 'redux-saga';
+import { createRouterMiddleware } from './lib/redux-router';
import rootReducer from './reducers';
import rootSaga from './sagas';
-import { createReduxHistory, routerMiddleware } from './redux-history-context';
+import history from './history';
const sagaMiddleware = createSagaMiddleware();
-const middlewares = [sagaMiddleware, routerMiddleware];
+const middlewares = [sagaMiddleware, createRouterMiddleware(history)];
let compose = reduxCompose;
@@ -22,10 +23,6 @@ if (process.env.NODE_ENV !== 'production') {
}
}
-const store = createStore(rootReducer, compose(applyMiddleware(...middlewares)));
+export default createStore(rootReducer, compose(applyMiddleware(...middlewares)));
sagaMiddleware.run(rootSaga);
-
-export default store;
-
-export const history = createReduxHistory(store);