feat: Fix axios interceptors.

client/src/components/App.js

@@ -1,29 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { IntlProvider } from 'react-intl';
-import { connect } from 'react-redux';
-import { Router, Switch, Redirect } from 'react-router';
+import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
+import { ReactQueryConfigProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query-devtools';
+
 import PrivateRoute from 'components/PrivateRoute';
 import Authentication from 'components/Authentication';
 import Dashboard from 'components/Dashboard/Dashboard';
-import { isAuthenticated } from 'store/authentication/authentication.reducer'
-import { ReactQueryConfigProvider } from 'react-query';
-import { ReactQueryDevtools } from "react-query-devtools";
+import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
 
 import messages from 'lang/en';
 import 'style/App.scss';
 
-function App({
-  isAuthorized,
-  locale,
-}) {
+function App({ locale }) {
   const history = createBrowserHistory();
 
-  history.listen((location, action) => {
-    console.log(`new location via ${action}`, location);
-  });
-
   const queryConfig = {
     refetchAllOnWindowFocus: false,
     cacheTime: 10000,
@@ -34,10 +26,18 @@ function App({
       <div className="App">
         <ReactQueryConfigProvider config={queryConfig}>
           <Router history={history}>
-            <Authentication isAuthenticated={isAuthorized} />
-            <PrivateRoute isAuthenticated={isAuthorized} component={Dashboard} />
+            <Switch>
+              <Route path={'/auth'}>
+                <Authentication />
+              </Route>
+
+              <Route path={'/'}>
+                <PrivateRoute component={Dashboard} />
+              </Route>
+            </Switch>
           </Router>
 
+          <GlobalErrors />
           <ReactQueryDevtools />
         </ReactQueryConfigProvider>
       </div>
@@ -49,10 +49,4 @@ App.defaultProps = {
   locale: 'en',
 };
 
-const mapStateToProps = (state) => {
-  return {
-    isAuthorized: isAuthenticated(state),
-  };
-};
-
-export default connect(mapStateToProps)(App);
+export default App;

client/src/components/Authentication.js

@@ -2,22 +2,22 @@ import React from 'react';
 import { Redirect, Route, Switch, Link } from 'react-router-dom';
 import BodyClassName from 'react-body-classname';
 import authenticationRoutes from 'routes/authentication';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'react-intl';
+import withAuthentication from 'containers/Authentication/withAuthentication';
+import { compose } from 'utils';
 
-export default function AuthenticationWrapper({
-  isAuthenticated = false,
-  ...rest
-}) {
+
+function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
   const to = { pathname: '/homepage' };
 
   return (
-    <Route path='/auth'>
-      {isAuthenticated ? (
+    <>
+      {isAuthorized ? (
         <Redirect to={to} />
       ) : (
         <BodyClassName className={'authentication'}>
           <Switch>
-            <div class='authentication-page'>
+            <div class="authentication-page">
               <Link
                 to={'bigcapital.io'}
                 className={'authentication-page__goto-bigcapital'}
@@ -25,7 +25,7 @@ export default function AuthenticationWrapper({
                 <T id={'go_to_bigcapital_com'} />
               </Link>
 
-              <div class='authentication-page__form-wrapper'>
+              <div class="authentication-page__form-wrapper">
                 {authenticationRoutes.map((route, index) => (
                   <Route
                     key={index}
@@ -39,6 +39,8 @@ export default function AuthenticationWrapper({
           </Switch>
         </BodyClassName>
       )}
-    </Route>
+    </>
   );
 }
+
+export default compose(withAuthentication)(AuthenticationWrapper);

client/src/components/Dashboard/TopbarUser.js

@@ -9,14 +9,13 @@ import {
   Popover
 } from '@blueprintjs/core';
 import t from 'store/types';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'react-intl';
 
 function DashboardTopbarUser({ logout }) {
   const history = useHistory();
   
   const onClickLogout = useCallback(() => {
     logout();
-    history.go('/auth/login');
   }, [logout, history]);
 
   const userAvatarDropMenu = useMemo(() => (

client/src/components/PrivateRoute.js

@@ -1,37 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import BodyClassName from 'react-body-classname'; 
-import { Route, Redirect } from 'react-router-dom';
+import BodyClassName from 'react-body-classname';
+import { Redirect } from 'react-router-dom';
+import withAuthentication from 'containers/Authentication/withAuthentication';
+import { compose } from 'utils';
 
-const propTypes = {
-  isAuthenticated: PropTypes.bool,
-  component: PropTypes.func.isRequired
-};
 
 function PrivateRoute({
   component: Component,
-  isAuthenticated = false,
+  isAuthorized = false,
   ...rest
 }) {
   return (
     <BodyClassName className={''}>
-      <Route
-        {...rest}
-        path="/"
-        render={_props =>
-          isAuthenticated ? (<Component {..._props} />) :
-          (
-            <Redirect
-              to={{
-                pathname: '/auth/login',
-              }}
-            />
-          )}
-      />
+      {(isAuthorized) ? (
+        <Component />
+      ) : (
+        <Redirect
+          to={{
+            pathname: '/auth/login',
+          }}
+        />
+      )}
     </BodyClassName>
   );
 }
 
-PrivateRoute.propTypes = propTypes;
-
-export default PrivateRoute;
+export default compose(withAuthentication)(PrivateRoute);