refactoring: authentication with react-query.

client/src/components/Authentication.js

@@ -4,9 +4,8 @@ import BodyClassName from 'react-body-classname';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import authenticationRoutes from 'routes/authentication';
 import { FormattedMessage as T } from 'react-intl';
-import withAuthentication from 'containers/Authentication/withAuthentication';
-import { compose } from 'utils';
 import Icon from 'components/Icon';
+import { useIsAuthenticated } from 'hooks/state';
 
 import 'style/pages/Authentication/Auth.scss'
 
@@ -14,14 +13,15 @@ function PageFade(props) {
   return <CSSTransition {...props} classNames="authTransition" timeout={500} />;
 }
 
-function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
+export default function AuthenticationWrapper({ ...rest }) {
   const to = { pathname: '/homepage' };
   const location = useLocation();
+  const isAuthenticated = useIsAuthenticated();
   const locationKey = location.pathname;
 
   return (
     <>
-      {isAuthorized ? (
+      {isAuthenticated ? (
         <Redirect to={to} />
       ) : (
         <BodyClassName className={'authentication'}>
@@ -61,7 +61,3 @@ function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
     </>
   );
 }
-
-export default compose(
-  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
-)(AuthenticationWrapper);

client/src/components/Dashboard/TopbarUser.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   Menu,
@@ -10,48 +10,46 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 
-import withAuthentication from 'containers/Authentication/withAuthentication';
-import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
+import { firstLettersArgs } from 'utils';
+import { useAuthActions, useAuthUser } from 'hooks/state';
 
-import { compose, firstLettersArgs } from 'utils';
-
-function DashboardTopbarUser({ requestLogout, user }) {
+export default function DashboardTopbarUser() {
   const history = useHistory();
+  const { setLogout } = useAuthActions();
+  const user = useAuthUser();
 
-  const onClickLogout = useCallback(() => {
-    requestLogout();
-  }, []);
-
-  const userAvatarDropMenu = useMemo(
-    () => (
-      <Menu className={'menu--logged-user-dropdown'}>
-        <MenuItem
-          multiline={true}
-          className={'menu-item--profile'}
-          text={
-            <div>
-              <div class="person">
-                {user.first_name} {user.last_name}
-              </div>
-              <div class="org">
-                <T id="organization_id" />: {user.tenant_id}
-              </div>
-            </div>
-          }
-        />
-        <MenuDivider />
-        <MenuItem
-          text={<T id={'preferences'} />}
-          onClick={() => history.push('/preferences')}
-        />
-        <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
-      </Menu>
-    ),
-    [onClickLogout],
-  );
+  const onClickLogout = () => {
+    setLogout();
+  };
 
   return (
-    <Popover content={userAvatarDropMenu} position={Position.BOTTOM}>
+    <Popover
+      content={
+        <Menu className={'menu--logged-user-dropdown'}>
+          <MenuItem
+            multiline={true}
+            className={'menu-item--profile'}
+            text={
+              <div>
+                <div class="person">
+                  {user.first_name} {user.last_name}
+                </div>
+                <div class="org">
+                  <T id="organization_id" />: {user.tenant_id}
+                </div>
+              </div>
+            }
+          />
+          <MenuDivider />
+          <MenuItem
+            text={<T id={'preferences'} />}
+            onClick={() => history.push('/preferences')}
+          />
+          <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
+        </Menu>
+      }
+      position={Position.BOTTOM}
+    >
       <Button>
         <div className="user-text">
           {firstLettersArgs(user.first_name, user.last_name)}
@@ -60,8 +58,3 @@ function DashboardTopbarUser({ requestLogout, user }) {
     </Popover>
   );
 }
-
-export default compose(
-  withAuthentication(({ user }) => ({ user })),
-  withAuthenticationActions,
-)(DashboardTopbarUser);

client/src/components/Guards/PrivateRoute.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BodyClassName from 'react-body-classname';
 import { Redirect } from 'react-router-dom';
-import withAuthentication from 'containers/Authentication/withAuthentication';
-import { compose } from 'utils';
+import { useIsAuthenticated } from 'hooks/state';
+
+export default function PrivateRoute({ component: Component, ...rest }) {
+  const isAuthenticated = useIsAuthenticated();
 
-function PrivateRoute({ component: Component, isAuthorized = false, ...rest }) {
   return (
     <BodyClassName className={''}>
-      {isAuthorized ? (
+      {isAuthenticated ? (
         <Component />
       ) : (
         <Redirect
@@ -20,7 +20,3 @@ function PrivateRoute({ component: Component, isAuthorized = false, ...rest }) {
     </BodyClassName>
   );
 }
-
-export default compose(
-  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
-)(PrivateRoute);