Merge pull request #471 from sidthesloth92/refactor/remove-routing-dependencies

Refactor remove routing dependencies

desktop-app/app/AppContent.js

@@ -1,5 +1,4 @@
 import React, {Fragment} from 'react';
-import {Switch, Route} from 'react-router';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 import {makeStyles} from '@material-ui/core/styles';
@@ -9,15 +8,13 @@ import LeftIconsPaneContainer from './containers/LeftIconsPaneContainer';
 import StatusBarContainer from './containers/StatusBarContainer';
 import DevToolResizerContainer from './containers/DevToolResizerContainer';
 
-const Routes = () => {
+const AppContent = () => {
   const classes = useStyles();
   return (
     <Fragment>
       <Paper elevation={0} className={classes.root}>
         <div className={classes.contentColumn}>
-          <Switch>
-            <Route path={routes.HOME} component={Browser} />
-          </Switch>
+          <Browser />
         </div>
       </Paper>
       <StatusBarContainer />
@@ -69,4 +66,4 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default Routes;
+export default AppContent;

desktop-app/app/containers/Root.js

@@ -1,11 +1,10 @@
 import React, {Component} from 'react';
 import {Provider} from 'react-redux';
-import {ConnectedRouter} from 'connected-react-router';
 import log from 'electron-log';
 import {makeStyles} from '@material-ui/core/styles';
 import {ThemeProvider} from '@material-ui/styles';
 import {remote} from 'electron';
-import Routes from '../Routes';
+import AppContent from '../AppContent';
 import ErrorBoundary from '../components/ErrorBoundary';
 import {
   registerShortcut,
@@ -30,21 +29,17 @@ import pubsub from 'pubsub.js';
 import {PROXY_AUTH_ERROR} from '../constants/pubsubEvents';
 import useCreateTheme from '../components/useCreateTheme';
 
-function App({history}) {
+function App() {
   const theme = useCreateTheme();
 
   return (
     <ThemeProvider theme={theme}>
       {process.env.NODE_ENV !== 'development' ? (
         <ErrorBoundary>
-          <ConnectedRouter history={history}>
-            <Routes />
-          </ConnectedRouter>
+          <AppContent />
         </ErrorBoundary>
       ) : (
-        <ConnectedRouter history={history}>
-          <Routes />
-        </ConnectedRouter>
+        <AppContent />
       )}
     </ThemeProvider>
   );
@@ -226,10 +221,10 @@ export default class Root extends Component {
   };
 
   render() {
-    const {store, history} = this.props;
+    const {store} = this.props;
     return (
       <Provider store={store}>
-        <App history={history} />
+        <App />
       </Provider>
     );
   }

desktop-app/app/index.js

@@ -6,7 +6,7 @@ import {remote} from 'electron';
 import {render} from 'react-dom';
 import {AppContainer} from 'react-hot-loader';
 import Root from './containers/Root';
-import {configureStore, history} from './store/configureStore';
+import {configureStore} from './store/configureStore';
 import './app.global.css';
 import * as Sentry from '@sentry/electron';
 import appMetadata from './services/db/appMetadata';
@@ -40,7 +40,7 @@ const store = configureStore();
 
 render(
   <AppContainer>
-    <Root store={store} history={history} />
+    <Root store={store} />
   </AppContainer>,
   document.getElementById('root')
 );
@@ -51,7 +51,7 @@ if (module.hot) {
     const NextRoot = require('./containers/Root').default;
     render(
       <AppContainer>
-        <NextRoot store={store} history={history} />
+        <NextRoot store={store} />
       </AppContainer>,
       document.getElementById('root')
     );

desktop-app/app/reducers/index.js

@@ -1,13 +1,11 @@
 // @flow
 import {combineReducers} from 'redux';
-import {connectRouter} from 'connected-react-router';
 import browser from './browser';
 import bookmarks from './bookmarks';
 import statusBar from './statusBar';
 
-export default function createRootReducer(history: History) {
+export default function createRootReducer() {
   return combineReducers({
-    router: connectRouter(history),
     browser,
     bookmarks,
     statusBar,

desktop-app/app/store/configureStore.dev.js

@@ -1,13 +1,9 @@
 import {createStore, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
-import {createHashHistory} from 'history';
-import {routerMiddleware, routerActions} from 'connected-react-router';
 import {createLogger} from 'redux-logger';
 import createRootReducer from '../reducers';
 
-const history = createHashHistory();
-
-const rootReducer = createRootReducer(history);
+const rootReducer = createRootReducer();
 
 const configureStore = initialState => {
   // Redux Configuration
@@ -28,14 +24,9 @@ const configureStore = initialState => {
     middleware.push(logger);
   }
 
-  // Router Middleware
-  const router = routerMiddleware(history);
-  middleware.push(router);
-
   // Redux DevTools Configuration
-  const actionCreators = {
-    ...routerActions,
-  };
+  const actionCreators = {};
+
   // If Redux DevTools Extension is installed use it, otherwise use Redux compose
   /* eslint-disable no-underscore-dangle */
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -64,4 +55,4 @@ const configureStore = initialState => {
   return store;
 };
 
-export default {configureStore, history};
+export default {configureStore};

desktop-app/app/store/configureStore.js

@@ -8,5 +8,3 @@ const selectedConfigureStore =
     : configureStoreDev;
 
 export const {configureStore} = selectedConfigureStore;
-
-export const {history} = selectedConfigureStore;

desktop-app/app/store/configureStore.prod.js

@@ -1,13 +1,9 @@
 // @flow
 import {createStore, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
-import {createHashHistory} from 'history';
-import {routerMiddleware} from 'connected-react-router';
 import createRootReducer from '../reducers';
 
-const history = createHashHistory();
-const rootReducer = createRootReducer(history);
-const router = routerMiddleware(history);
+const rootReducer = createRootReducer();
 const heap = () => next => action => {
   window.requestIdleCallback(() => {
     if (window.heap) {
@@ -19,10 +15,10 @@ const heap = () => next => action => {
   });
   return next(action);
 };
-const enhancer = applyMiddleware(thunk, router, heap);
+const enhancer = applyMiddleware(thunk, heap);
 
 function configureStore(initialState) {
   return createStore(rootReducer, initialState, enhancer);
 }
 
-export default {configureStore, history};
+export default {configureStore};

desktop-app/package.json

@@ -225,7 +225,6 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.20",
     "chalk": "^2.4.1",
     "concurrently": "^5.2.0",
-    "connected-react-router": "^6.5.2",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
     "css-loader": "^1.0.1",
@@ -306,7 +305,6 @@
     "electron-updater": "^4.3.1",
     "electron-util": "^0.14.2",
     "framer-motion": "^2.2.0",
-    "history": "^4.7.2",
     "jimp": "^0.12.1",
     "lodash": "^4.17.19",
     "merge-img": "^2.1.3",
@@ -322,8 +320,6 @@
     "react-number-format": "^4.4.1",
     "react-redux": "^7.1.0",
     "react-resizable": "^1.10.1",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
     "react-select": "^3.1.0",
     "react-switch": "^5.0.1",
     "react-tabs": "^3.0.0",