client devices page updated

Dockerfile.test

@@ -29,4 +29,5 @@ EXPOSE 3000
 
 COPY --from=build /app /app
 
+RUN npm run eslint
 CMD ["npm", "start"]

app/containers/App/components/ProtectedRouteWithLayout.js

@@ -2,37 +2,27 @@ import React from 'react';
 import T from 'prop-types';
 import { Route, Redirect } from 'react-router-dom';
 
-import UserProvider from 'contexts/UserProvider';
 import MasterLayout from 'containers/MasterLayout';
 import { AUTH_TOKEN } from 'constants/index';
 
 import { getItem } from 'utils/localStorage';
-import { parseJwt } from 'utils/jwt';
 
 const ProtectedRouteWithLayout = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
-    render={props => {
-      const token = getItem(AUTH_TOKEN);
-
-      if (token) {
-        const jwt = parseJwt(token.access_token);
-        return (
-          <UserProvider email={jwt.userName} role={jwt.userRole} customerId={jwt.customerId}>
-            <MasterLayout>
-              <Component {...props} />
-            </MasterLayout>
-          </UserProvider>
-        );
-      }
-      return (
+    render={props =>
+      getItem(AUTH_TOKEN) ? (
+        <MasterLayout>
+          <Component {...props} />
+        </MasterLayout>
+      ) : (
         <Redirect
           to={{
             pathname: '/login',
           }}
         />
-      );
-    }}
+      )
+    }
   />
 );
 

app/containers/App/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Switch, Redirect } from 'react-router-dom';
 
@@ -7,9 +7,14 @@ import { ThemeProvider, Dashboard } from '@tip-wlan/wlan-cloud-ui-library';
 import logo from 'images/tip-logo.png';
 import logoMobile from 'images/tip-logo-mobile.png';
 
-import { COMPANY } from 'constants/index';
+import { AUTH_TOKEN, COMPANY } from 'constants/index';
 import Login from 'containers/Login';
 import ClientDevices from 'containers/ClientDevices';
+import UserProvider from 'contexts/UserProvider';
+
+import { getItem, setItem } from 'utils/localStorage';
+import { parseJwt } from 'utils/jwt';
+
 import UnauthenticatedRoute from './components/UnauthenticatedRoute';
 import ProtectedRouteWithLayout from './components/ProtectedRouteWithLayout';
 
@@ -21,19 +26,52 @@ const RedirectToDashboard = () => (
   />
 );
 
-const App = () => (
-  <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
-    <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
-      <meta name="description" content={COMPANY} />
-    </Helmet>
+const App = () => {
+  const token = getItem(AUTH_TOKEN);
+  let initialUser = {};
+  if (token) {
+    const { userId, userName, userRole, customerId } = parseJwt(token.access_token);
+    initialUser = { id: userId, email: userName, role: userRole, customerId };
+  }
+  const [user, setUser] = useState(initialUser);
 
-    <Switch>
-      <UnauthenticatedRoute exact path="/login" component={Login} />
-      <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
-      <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
-      <ProtectedRouteWithLayout exact path="/network/client-devices" component={ClientDevices} />
-    </Switch>
-  </ThemeProvider>
-);
+  const updateToken = newToken => {
+    setItem(AUTH_TOKEN, newToken);
+    if (newToken) {
+      const { userId, userName, userRole, customerId } = parseJwt(newToken.access_token);
+      setUser({ id: userId, email: userName, role: userRole, customerId });
+    }
+  };
+
+  const updateUser = newUser => setUser({ ...user, ...newUser });
+
+  return (
+    <UserProvider
+      id={user.userId}
+      email={user.userName}
+      role={user.userRole}
+      customerId={user.customerId}
+      updateUser={updateUser}
+      updateToken={updateToken}
+    >
+      <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
+        <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
+          <meta name="description" content={COMPANY} />
+        </Helmet>
+
+        <Switch>
+          <UnauthenticatedRoute exact path="/login" component={Login} />
+          <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
+          <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
+          <ProtectedRouteWithLayout
+            exact
+            path="/network/client-devices"
+            component={ClientDevices}
+          />
+        </Switch>
+      </ThemeProvider>
+    </UserProvider>
+  );
+};
 
 export default App;

app/containers/Login/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import gql from 'graphql-tag';
 import { useMutation, useApolloClient } from '@apollo/react-hooks';
 import { useHistory } from 'react-router-dom';
@@ -6,9 +6,7 @@ import { notification } from 'antd';
 
 import { Login as LoginPage } from '@tip-wlan/wlan-cloud-ui-library';
 
-import { AUTH_TOKEN } from 'constants/index';
-
-import { setItem } from 'utils/localStorage';
+import UserContext from 'contexts/UserContext';
 
 const AUTHENTICATE_USER = gql`
   mutation AuthenticateUser($email: String!, $password: String!) {
@@ -22,6 +20,7 @@ const AUTHENTICATE_USER = gql`
 
 const Login = () => {
   const history = useHistory();
+  const { updateToken } = useContext(UserContext);
   const client = useApolloClient();
   const [authenticateUser] = useMutation(AUTHENTICATE_USER);
 
@@ -29,7 +28,7 @@ const Login = () => {
     authenticateUser({ variables: { email, password } })
       .then(({ data }) => {
         client.resetStore();
-        setItem(AUTH_TOKEN, data.authenticateUser, data.authenticateUser.expires_in);
+        updateToken(data.authenticateUser);
         history.push('/');
       })
       .catch(() =>

app/contexts/UserProvider/index.js

@@ -3,15 +3,27 @@ import PropTypes from 'prop-types';
 
 import UserContext from 'contexts/UserContext';
 
-const UserProvider = ({ children, email, role, customerId }) => (
-  <UserContext.Provider value={{ email, role, customerId }}>{children}</UserContext.Provider>
+const UserProvider = ({ children, id, email, role, customerId, updateUser, updateToken }) => (
+  <UserContext.Provider value={{ id, email, role, customerId, updateUser, updateToken }}>
+    {children}
+  </UserContext.Provider>
 );
 
 UserProvider.propTypes = {
   children: PropTypes.node.isRequired,
-  email: PropTypes.string.isRequired,
-  role: PropTypes.string.isRequired,
-  customerId: PropTypes.number.isRequired,
+  updateUser: PropTypes.func.isRequired,
+  updateToken: PropTypes.func.isRequired,
+  id: PropTypes.number,
+  email: PropTypes.string,
+  role: PropTypes.string,
+  customerId: PropTypes.number,
+};
+
+UserProvider.defaultProps = {
+  id: null,
+  email: null,
+  role: null,
+  customerId: null,
 };
 
 export default UserProvider;

app/index.js

@@ -11,7 +11,7 @@ import 'styles/index.scss';
 import App from 'containers/App';
 import { AUTH_TOKEN } from 'constants/index';
 
-import { getItem, setItem } from 'utils/localStorage';
+import { getItem, setItem, removeItem } from 'utils/localStorage';
 
 const API_URI = process.env.NODE_ENV !== 'production' ? 'http://localhost:4000/' : '';
 const MOUNT_NODE = document.getElementById('root');
@@ -41,6 +41,7 @@ const client = new ApolloClient({
       graphQLErrors.forEach(err => {
         // handle errors differently based on its error code
         switch (err.extensions.code) {
+          case 'FORBIDDEN':
           case 'UNAUTHENTICATED':
             operation.setContext({
               headers: {
@@ -59,6 +60,11 @@ const client = new ApolloClient({
               },
             });
             return forward(operation);
+          case 'INTERNAL_SERVER_ERROR':
+            if (err.path && err.path[0] === 'updateToken') {
+              removeItem(AUTH_TOKEN);
+            }
+            return forward(operation);
           default:
             return forward(operation);
         }

app/utils/localStorage.js

@@ -13,7 +13,9 @@ export const getItemExpiration = () => {
 
 export const setItem = (key, data, expiration) => {
   const localStorageState = data;
-  localStorageState.expiration = expiration || getItemExpiration();
+  if (localStorageState) {
+    localStorageState.expiration = expiration || getItemExpiration();
+  }
   window.localStorage.setItem(key, JSON.stringify(localStorageState));
 };
 

docker-compose.test.yml

@@ -1,8 +1,8 @@
 version: '2.2'
 
-services: 
-    sut:
-        build:
-            context: .
-            dockerfile: Dockerfile.test
-        command: npm run test
+services:
+  sut:
+    build:
+      context: .
+      dockerfile: Dockerfile.test
+    command: npm test

package.json

@@ -12,7 +12,8 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server",
     "build": "webpack --mode=production",
     "format": "prettier --write \"app/**/*.js\"",
-    "eslint-fix": "eslint --fix \"app/**/*.js\""
+    "eslint-fix": "eslint --fix \"app/**/*.js\"",
+    "eslint": "eslint \"app/**/*.js\" --max-warnings=0"
   },
   "license": "MIT",
   "dependencies": {