Replace deprecated modules in playground (piotrwitek#176)

Replace 'react-router-redux' with 'connected-react-router'

Also I noticed a lot of vulnerability warnings related to react-scripts, so I had update it and also react-redux, axios. For now we don't have vulnerability complains after npm i.

@babel/polyfill is deprecated for the new react-scripts environment, so I remove this dependency and adjust src/index.tsx

Author: incerta

README.md

@@ -1079,7 +1079,7 @@ import { StateType, ActionType } from 'typesafe-actions';
 declare module 'MyTypes' {
   export type Store = StateType<typeof import('./index').default>;
   export type RootAction = ActionType<typeof import('./root-action').default>;
-  export type RootState = StateType<typeof import('./root-reducer').default>;
+  export type RootState = StateType<ReturnType<typeof import('./root-reducer').default>>;
 }
 
 declare module 'typesafe-actions' {
@@ -1101,6 +1101,7 @@ When creating a store instance we don't need to provide any additional types. It
 import { RootAction, RootState, Services } from 'MyTypes';
 import { createStore, applyMiddleware } from 'redux';
 import { createEpicMiddleware } from 'redux-observable';
+import { createBrowserHistory } from 'history';
 
 import { composeEnhancers } from './utils';
 import rootReducer from './root-reducer';
@@ -1124,8 +1125,11 @@ const enhancer = composeEnhancers(applyMiddleware(...middlewares));
 // rehydrate state on app start
 const initialState = {};
 
+// browser history
+const history = createBrowserHistory();
+
 // create store
-const store = createStore(rootReducer, initialState, enhancer);
+const store = createStore(rootReducer(history), initialState, enhancer);
 
 epicMiddleware.run(rootEpic);
 

playground/package-lock.json

@@ -19,25 +19,23 @@
     "tsc:watch": "tsc -p ./ --noEmit -w"
   },
   "dependencies": {
-    "@babel/polyfill": "7.4.4",
     "@types/jest": "24.0.11",
     "@types/node": "11.13.8",
     "@types/prop-types": "15.7.1",
     "@types/react": "16.8.14",
     "@types/react-dom": "16.8.4",
     "@types/react-redux": "7.0.8",
     "@types/react-router-dom": "4.3.2",
-    "@types/react-router-redux": "5.0.18",
-    "axios": "0.18.0",
+    "axios": "^0.19.0",
+    "connected-react-router": "6.5.0",
     "cuid": "2.1.6",
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-redux": "7.0.2",
+    "react-redux": "7.1.0",
     "react-redux-typescript-scripts": "1.5.0",
     "react-router-dom": "4.3.1",
-    "react-router-redux": "5.0.0-alpha.8",
-    "react-scripts": "2.1.8",
+    "react-scripts": "3.0.1",
     "react-testing-library": "7.0.0",
     "redux": "4.0.1",
     "redux-observable": "1.1.0",

playground/package.json

@@ -8,6 +8,7 @@ export const ErrorMessage: React.FC<{ onReset: () => void }> = ({
       <h2>{`Sorry there was an unexpected error`}</h2>
       {`To continue: `}
       <a
+        href="/"
         onClick={() => {
           onReset();
         }}

playground/src/components/error-message.tsx

@@ -1,6 +1,4 @@
 // tslint:disable-next-line:no-import-side-effect
-import '@babel/polyfill';
-// tslint:disable-next-line:no-import-side-effect
 import 'tslib';
 // tslint:disable-next-line:no-import-side-effect
 import './index.css';

playground/src/index.tsx

@@ -1,6 +1,7 @@
 import { RootAction, RootState, Services } from 'MyTypes';
 import { createStore, applyMiddleware } from 'redux';
 import { createEpicMiddleware } from 'redux-observable';
+import { createBrowserHistory } from 'history';
 
 import { composeEnhancers } from './utils';
 import rootReducer from './root-reducer';
@@ -24,8 +25,11 @@ const enhancer = composeEnhancers(applyMiddleware(...middlewares));
 // rehydrate state on app start
 const initialState = {};
 
+// browser history
+const history = createBrowserHistory();
+
 // create store
-const store = createStore(rootReducer, initialState, enhancer);
+const store = createStore(rootReducer(history), initialState, enhancer);
 
 epicMiddleware.run(rootEpic);
 

playground/src/store/index.ts

@@ -1,4 +1,4 @@
-import { routerActions } from 'react-router-redux';
+import { routerActions } from 'connected-react-router';
 import * as todosActions from '../features/todos/actions';
 import * as countersActions from '../features/counters/actions';
 

playground/src/store/root-action.ts

@@ -1,11 +1,12 @@
 import { combineReducers } from 'redux';
+import { History } from 'history';
 
-import { routerReducer } from 'react-router-redux';
+import { connectRouter } from 'connected-react-router';
 import todosReducer from '../features/todos/reducer';
 import countersReducer from '../features/counters/reducer';
 
-const rootReducer = combineReducers({
-  router: routerReducer,
+const rootReducer = (history: History) => combineReducers({
+  router: connectRouter(history),
   todos: todosReducer,
   counters: countersReducer,
 });

playground/src/store/root-reducer.ts

@@ -3,7 +3,7 @@ import { StateType, ActionType } from 'typesafe-actions';
 declare module 'MyTypes' {
   export type Store = StateType<typeof import('./index').default>;
   export type RootAction = ActionType<typeof import('./root-action').default>;
-  export type RootState = StateType<typeof import('./root-reducer').default>;
+  export type RootState = StateType<ReturnType<typeof import('./root-reducer').default>>;
 }
 
 declare module 'typesafe-actions' {