added wrapper for missed components

.github/workflows/dockerpublish.yml

@@ -5,7 +5,6 @@ on:
     # Publish `master` as Docker `latest` image.
     branches:
       - master
-      - 'release/**'
 
     # Publish `v1.2.3` tags as releases.
     tags:
@@ -15,8 +14,8 @@ on:
   pull_request:
 
   schedule:
-    # runs nightly build at 5AM
-    - cron: '00 09 * * *'
+      # runs nightly build at 5AM
+      - cron:  '00 09 * * *'
 
 env:
   IMAGE_NAME: wlan-cloud-ui
@@ -49,7 +48,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Adding property file with component version and commit hash
+      - name: Adding property file with component version and commit hash 
         run: |
           # Strip git ref prefix from version
           VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
@@ -57,11 +56,8 @@ jobs:
           # Strip "v" prefix from tag name
           [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
 
-          # Create a release snapshot if we are on release branch
-          [[ "${{ github.ref }}" == "refs/heads/release/"* ]] && VERSION=$(echo "${{ github.ref }}" | sed -e 's/refs\/heads\/release\/[v]//' | awk '{print $1"-SNAPSHOT"}')
-
           # Use Docker `latest` tag convention
-          [ "$VERSION" == "master" ] && VERSION=1.3.0-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=latest
 
           TIMESTAMP=$(date +'%Y-%m-%d')
 
@@ -92,11 +88,8 @@ jobs:
           # Strip "v" prefix from tag name
           [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
 
-          # Create a release snapshot if we are on release branch
-          [[ "${{ github.ref }}" == "refs/heads/release/"* ]] && VERSION=$(echo "${{ github.ref }}" | sed -e 's/refs\/heads\/release\/[v]//' | awk '{print $1"-SNAPSHOT"}')
-
           # Use Docker `latest` tag convention
-          [ "$VERSION" == "master" ] && VERSION=1.3.0-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=latest
 
           echo IMAGE_ID=$IMAGE_ID
           echo VERSION=$VERSION
@@ -104,6 +97,6 @@ jobs:
 
           docker tag image $IMAGE_ID:$VERSION
           docker push $IMAGE_ID:$VERSION
-
+          
           docker tag image $IMAGE_ID:$VERSION-$TIMESTAMP
-          docker push $IMAGE_ID:$VERSION-$TIMESTAMP
+          docker push $IMAGE_ID:$VERSION-$TIMESTAMP          

.gitignore

@@ -4,7 +4,6 @@
 /node_modules
 /.pnp
 .pnp.js
-package-lock.json
 
 # testing
 /coverage

app/containers/Accounts/index.js

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation, gql } from '@apollo/client';
-import { Alert, notification } from 'antd';
+import { useMutation, gql } from '@apollo/client';
+import { notification } from 'antd';
 
-import { Accounts as AccountsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { Accounts as AccountsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
 
 const GET_ALL_USERS = gql`
   query GetAllUsers($customerId: ID!, $context: JSONObject) {
@@ -12,7 +13,7 @@ const GET_ALL_USERS = gql`
       items {
         id
         email: username
-        roles
+        role
         lastModifiedTimestamp
         customerId
       }
@@ -22,10 +23,10 @@ const GET_ALL_USERS = gql`
 `;
 
 const CREATE_USER = gql`
-  mutation CreateUser($username: String!, $password: String!, $roles: [String], $customerId: ID!) {
-    createUser(username: $username, password: $password, roles: $roles, customerId: $customerId) {
+  mutation CreateUser($username: String!, $password: String!, $role: String!, $customerId: ID!) {
+    createUser(username: $username, password: $password, role: $role, customerId: $customerId) {
       username
-      roles
+      role
       customerId
     }
   }
@@ -36,7 +37,7 @@ const UPDATE_USER = gql`
     $id: ID!
     $username: String!
     $password: String!
-    $roles: [String]
+    $role: String!
     $customerId: ID!
     $lastModifiedTimestamp: String
   ) {
@@ -44,13 +45,13 @@ const UPDATE_USER = gql`
       id: $id
       username: $username
       password: $password
-      roles: $roles
+      role: $role
       customerId: $customerId
       lastModifiedTimestamp: $lastModifiedTimestamp
     ) {
       id
       username
-      roles
+      role
       customerId
       lastModifiedTimestamp
     }
@@ -65,121 +66,117 @@ const DELETE_USER = gql`
   }
 `;
 
-const Accounts = () => {
-  const { customerId, id: currentUserId } = useContext(UserContext);
+const Accounts = withQuery(
+  ({ data, fetchMore, refetch }) => {
+    const { customerId } = useContext(UserContext);
 
-  const { data, loading, error, refetch, fetchMore } = useQuery(GET_ALL_USERS, {
-    variables: { customerId },
-  });
-  const [createUser] = useMutation(CREATE_USER);
-  const [updateUser] = useMutation(UPDATE_USER);
-  const [deleteUser] = useMutation(DELETE_USER);
+    const [createUser] = useMutation(CREATE_USER);
+    const [updateUser] = useMutation(UPDATE_USER);
+    const [deleteUser] = useMutation(DELETE_USER);
 
-  const handleLoadMore = () => {
-    if (!data.getAllUsers.context.lastPage) {
-      fetchMore({
-        variables: { context: data.getAllUsers.context },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          const previousEntry = previousResult.getAllUsers;
-          const newItems = fetchMoreResult.getAllUsers.items;
+    const handleLoadMore = () => {
+      if (!data.getAllUsers.context.lastPage) {
+        fetchMore({
+          variables: { context: data.getAllUsers.context },
+          updateQuery: (previousResult, { fetchMoreResult }) => {
+            const previousEntry = previousResult.getAllUsers;
+            const newItems = fetchMoreResult.getAllUsers.items;
 
-          return {
-            getAllUsers: {
-              context: fetchMoreResult.getAllUsers.context,
-              items: [...previousEntry.items, ...newItems],
-              __typename: previousEntry.__typename,
-            },
-          };
+            return {
+              getAllUsers: {
+                context: fetchMoreResult.getAllUsers.context,
+                items: [...previousEntry.items, ...newItems],
+                __typename: previousEntry.__typename,
+              },
+            };
+          },
+        });
+      }
+    };
+
+    const handleCreateUser = (email, password, role) => {
+      createUser({
+        variables: {
+          username: email,
+          password,
+          role,
+          customerId,
         },
-      });
-    }
-  };
-
-  const handleCreateUser = ({ email, password, roles }) => {
-    createUser({
-      variables: {
-        username: email,
-        password,
-        roles: [roles],
-        customerId,
-      },
-    })
-      .then(() => {
-        refetch();
-        notification.success({
-          message: 'Success',
-          description: 'Account successfully created.',
-        });
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Account could not be created.',
+        .then(() => {
+          refetch();
+          notification.success({
+            message: 'Success',
+            description: 'Account successfully created.',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Account could not be created.',
+          })
+        );
+    };
 
-  const handleEditUser = ({ id, email, password, roles, lastModifiedTimestamp }) => {
-    updateUser({
-      variables: {
-        id,
-        username: email,
-        password,
-        roles: [roles],
-        customerId,
-        lastModifiedTimestamp,
-      },
-    })
-      .then(() => {
-        refetch();
-        notification.success({
-          message: 'Success',
-          description: 'Account successfully updated.',
-        });
+    const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
+      updateUser({
+        variables: {
+          id,
+          username: email,
+          password,
+          role,
+          customerId,
+          lastModifiedTimestamp,
+        },
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Account could not be updated.',
+        .then(() => {
+          refetch();
+          notification.success({
+            message: 'Success',
+            description: 'Account successfully updated.',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Account could not be updated.',
+          })
+        );
+    };
 
-  const handleDeleteUser = id => {
-    deleteUser({ variables: { id } })
-      .then(() => {
-        refetch();
-        notification.success({
-          message: 'Success',
-          description: 'Account successfully deleted.',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Account could not be deleted.',
+    const handleDeleteUser = id => {
+      deleteUser({ variables: { id } })
+        .then(() => {
+          refetch();
+          notification.success({
+            message: 'Success',
+            description: 'Account successfully deleted.',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Account could not be deleted.',
+          })
+        );
+    };
 
-  if (loading) {
-    return <Loading />;
+    return (
+      <AccountsPage
+        data={data.getAllUsers.items}
+        onLoadMore={handleLoadMore}
+        onCreateUser={handleCreateUser}
+        onEditUser={handleEditUser}
+        onDeleteUser={handleDeleteUser}
+        isLastPage={data.getAllUsers.context.lastPage}
+      />
+    );
+  },
+  GET_ALL_USERS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId };
   }
+);
 
-  if (error) {
-    return <Alert message="Error" description="Failed to load Users." type="error" showIcon />;
-  }
-
-  return (
-    <AccountsPage
-      data={data.getAllUsers.items}
-      currentUserId={currentUserId}
-      onLoadMore={handleLoadMore}
-      onCreateUser={handleCreateUser}
-      onEditUser={handleEditUser}
-      onDeleteUser={handleDeleteUser}
-      isLastPage={data.getAllUsers.context.lastPage}
-    />
-  );
-};
 export default Accounts;

app/containers/AddProfile/index.js

@@ -4,11 +4,9 @@ import { useMutation, useQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
 import { useHistory } from 'react-router-dom';
 
-import { ROUTES, AUTH_TOKEN } from 'constants/index';
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_PROFILES, GET_API_URL } from 'graphql/queries';
-import { fetchMoreProfiles } from 'graphql/functions';
-import { getItem } from 'utils/localStorage';
+import { GET_ALL_PROFILES } from 'graphql/queries';
+import { updateQueryGetAllProfiles } from 'graphql/functions';
 
 const CREATE_PROFILE = gql`
   mutation CreateProfile(
@@ -36,48 +34,8 @@ const CREATE_PROFILE = gql`
 
 const AddProfile = () => {
   const { customerId } = useContext(UserContext);
-
-  const { data: apiUrl } = useQuery(GET_API_URL);
-
   const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
     variables: { customerId, type: 'ssid' },
-    fetchPolicy: 'network-only',
-  });
-  const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'radius' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'captive_portal' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'passpoint_venue' },
-    fetchPolicy: 'network-only',
-  });
-  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_operator' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_osu_id_provider' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'rf' },
-    fetchPolicy: 'network-only',
   });
   const [createProfile] = useMutation(CREATE_PROFILE);
   const history = useHistory();
@@ -97,7 +55,7 @@ const AddProfile = () => {
           message: 'Success',
           description: 'Profile successfully created.',
         });
-        history.push(ROUTES.profiles, { refetch: true });
+        history.push('/profiles', { refetch: true });
       })
       .catch(() =>
         notification.error({
@@ -107,71 +65,31 @@ const AddProfile = () => {
       );
   };
 
-  const handleFetchMoreProfiles = (e, key) => {
-    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
-    else if (key === 'captive_portal')
-      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
-    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
-    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
-    else if (key === 'passpoint_operator')
-      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
-    else if (key === 'passpoint_osu_id_provider')
-      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
-    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
-  };
+  const handleFetchProfiles = e => {
+    if (ssidProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
 
-  const handleFileUpload = async (fileName, file) => {
-    const token = getItem(AUTH_TOKEN);
+    e.persist();
+    const { target } = e;
 
-    if (apiUrl?.getApiUrl) {
-      fetch(`${apiUrl?.getApiUrl}filestore/${fileName}`, {
-        method: 'POST',
-        headers: {
-          Authorization: token ? `Bearer ${token.access_token}` : '',
-          'Content-Type': 'application/octet-stream',
-        },
-        body: file,
-      })
-        .then(response => response.json())
-        .then(resp => {
-          if (resp?.success) {
-            notification.success({
-              message: 'Success',
-              description: 'File successfully uploaded.',
-            });
-          } else {
-            notification.error({
-              message: 'Error',
-              description: 'File could not be uploaded.',
-            });
-          }
-        })
-        .catch(() => {
-          notification.error({
-            message: 'Error',
-            description: 'File could not be uploaded.',
-          });
-        });
-    } else {
-      notification.error({
-        message: 'Error',
-        description: 'File could not be uploaded.',
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMore({
+        variables: { context: { ...ssidProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
       });
     }
+
+    return true;
   };
 
   return (
     <AddProfilePage
       onCreateProfile={handleAddProfile}
-      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
-      radiusProfiles={radiusProfiles?.getAllProfiles?.items}
-      captiveProfiles={captiveProfiles?.getAllProfiles?.items}
-      venueProfiles={venueProfiles?.getAllProfiles?.items}
-      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
-      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
-      rfProfiles={rfProfiles?.getAllProfiles?.items}
-      onFetchMoreProfiles={handleFetchMoreProfiles}
-      fileUpload={handleFileUpload}
+      ssidProfiles={
+        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
+      }
+      onFetchMoreProfiles={handleFetchProfiles}
     />
   );
 };

app/containers/Alarms/index.js

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
-import { useQuery, gql } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { Alarms as AlarmsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { gql } from '@apollo/client';
+import { notification } from 'antd';
+import { Alarms as AlarmsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { withQuery } from 'containers/QueryWrapper';
 
 import UserContext from 'contexts/UserContext';
 
@@ -23,65 +24,58 @@ const GET_ALL_ALARMS = gql`
   }
 `;
 
-const Alarms = () => {
-  const { customerId } = useContext(UserContext);
-  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_ALARMS, {
-    variables: { customerId },
-    errorPolicy: 'all',
-  });
-
-  const handleOnReload = () => {
-    refetch()
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Alarms reloaded.',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Alarms could not be reloaded.',
+const Alarms = withQuery(
+  ({ data, refetch, fetchMore }) => {
+    const handleOnReload = () => {
+      refetch()
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Alarms reloaded.',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Alarms could not be reloaded.',
+          })
+        );
+    };
 
-  const handleLoadMore = () => {
-    if (!data.getAllAlarms.context.lastPage) {
-      fetchMore({
-        variables: { context: data.getAllAlarms.context },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          const previousEntry = previousResult.getAllAlarms;
-          const newItems = fetchMoreResult.getAllAlarms.items;
+    const handleLoadMore = () => {
+      if (!data.getAllAlarms.context.lastPage) {
+        fetchMore({
+          variables: { context: data.getAllAlarms.context },
+          updateQuery: (previousResult, { fetchMoreResult }) => {
+            const previousEntry = previousResult.getAllAlarms;
+            const newItems = fetchMoreResult.getAllAlarms.items;
 
-          return {
-            getAllAlarms: {
-              context: fetchMoreResult.getAllAlarms.context,
-              items: [...previousEntry.items, ...newItems],
-              __typename: previousEntry.__typename,
-            },
-          };
-        },
-      });
-    }
-  };
+            return {
+              getAllAlarms: {
+                context: fetchMoreResult.getAllAlarms.context,
+                items: [...previousEntry.items, ...newItems],
+                __typename: previousEntry.__typename,
+              },
+            };
+          },
+        });
+      }
+    };
 
-  if (loading) {
-    return <Loading />;
+    return (
+      <AlarmsPage
+        data={data.getAllAlarms.items}
+        onReload={handleOnReload}
+        onLoadMore={handleLoadMore}
+        isLastPage={data.getAllAlarms.context.lastPage}
+      />
+    );
+  },
+  GET_ALL_ALARMS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId, errorPolicy: 'all' };
   }
-
-  if (error && !data?.getAllAlarms?.items) {
-    return <Alert message="Error" description="Failed to load alarms." type="error" showIcon />;
-  }
-
-  return (
-    <AlarmsPage
-      data={data.getAllAlarms.items}
-      onReload={handleOnReload}
-      onLoadMore={handleLoadMore}
-      isLastPage={data.getAllAlarms.context.lastPage}
-    />
-  );
-};
+);
 
 export default Alarms;

app/containers/App/index.js

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Switch, Redirect } from 'react-router-dom';
 
-import { ThemeProvider, GenericNotFound } from '@tip-wlan/wlan-cloud-ui-library';
+import { ThemeProvider } from '@tip-wlan/wlan-cloud-ui-library';
 
 import logo from 'images/tip-logo.png';
 import logoMobile from 'images/tip-logo-mobile.png';
 
-import { AUTH_TOKEN, COMPANY, ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
+import { AUTH_TOKEN, COMPANY } from 'constants/index';
 import Login from 'containers/Login';
 
 import Network from 'containers/Network';
@@ -32,7 +32,7 @@ import ProtectedRouteWithLayout from './components/ProtectedRouteWithLayout';
 const RedirectToDashboard = () => (
   <Redirect
     to={{
-      pathname: ROUTES.dashboard,
+      pathname: '/dashboard',
     }}
   />
 );
@@ -42,7 +42,7 @@ const App = () => {
   let initialUser = {};
   if (token) {
     const { userId, userName, userRole, customerId } = parseJwt(token.access_token);
-    initialUser = { id: userId, email: userName, roles: userRole, customerId };
+    initialUser = { id: userId, email: userName, role: userRole, customerId };
   }
   const [user, setUser] = useState(initialUser);
 
@@ -50,7 +50,7 @@ const App = () => {
     setItem(AUTH_TOKEN, newToken);
     if (newToken) {
       const { userId, userName, userRole, customerId } = parseJwt(newToken.access_token);
-      setUser({ id: userId, email: userName, roles: userRole, customerId });
+      setUser({ id: userId, email: userName, role: userRole, customerId });
     }
   };
 
@@ -60,44 +60,32 @@ const App = () => {
     <UserProvider
       id={user.id}
       email={user.email}
-      roles={user.roles}
+      role={user.role}
       customerId={user.customerId}
       updateUser={updateUser}
       updateToken={updateToken}
     >
-      <ThemeProvider
-        company={COMPANY}
-        logo={logo}
-        logoMobile={logoMobile}
-        routes={ROUTES}
-        radioTypes={USER_FRIENDLY_RADIOS}
-      >
+      <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
         <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
           <meta name="description" content={COMPANY} />
         </Helmet>
+
         <Switch>
-          <UnauthenticatedRoute exact path={ROUTES.login} component={Login} />
-          <ProtectedRouteWithLayout exact path={ROUTES.root} component={RedirectToDashboard} />
-          <ProtectedRouteWithLayout exact path={ROUTES.dashboard} component={Dashboard} />
-          <ProtectedRouteWithLayout path={ROUTES.network} component={Network} />
-          <ProtectedRouteWithLayout path={ROUTES.system} component={System} />
+          <UnauthenticatedRoute exact path="/login" component={Login} />
+          <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
+          <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
+          <ProtectedRouteWithLayout path="/network" component={Network} />
+          <ProtectedRouteWithLayout path="/system" component={System} />
 
-          <ProtectedRouteWithLayout exact path={ROUTES.profiles} component={Profiles} />
-          <ProtectedRouteWithLayout
-            exact
-            path={`${ROUTES.profiles}/:id`}
-            component={ProfileDetails}
-          />
-          <ProtectedRouteWithLayout exact path={ROUTES.addprofile} component={AddProfile} />
+          <ProtectedRouteWithLayout exact path="/profiles" component={Profiles} />
+          <ProtectedRouteWithLayout exact path="/profiles/:id" component={ProfileDetails} />
+          <ProtectedRouteWithLayout exact path="/addprofile" component={AddProfile} />
 
-          <ProtectedRouteWithLayout exact path={ROUTES.alarms} component={Alarms} />
-          {user?.id !== 0 && (
-            <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
+          <ProtectedRouteWithLayout exact path="/alarms" component={Alarms} />
+          <ProtectedRouteWithLayout exact path="/account/edit" component={EditAccount} />
+          {user.role === 'SuperUser' && (
+            <ProtectedRouteWithLayout exact path="/accounts" component={Accounts} />
           )}
-          {user?.roles?.[0] === 'SuperUser' && (
-            <ProtectedRouteWithLayout exact path={ROUTES.users} component={Accounts} />
-          )}
-          <ProtectedRouteWithLayout component={GenericNotFound} />
         </Switch>
       </ThemeProvider>
     </UserProvider>

app/containers/Dashboard/index.js

@@ -1,11 +1,10 @@
 import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
-import { Alert } from 'antd';
 import moment from 'moment';
 import { useQuery } from '@apollo/client';
-import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { Dashboard as DashboardPage } from '@tip-wlan/wlan-cloud-ui-library';
 import UserContext from 'contexts/UserContext';
 import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
-import { USER_FRIENDLY_RADIOS } from 'constants/index';
+import { withQuery } from 'containers/QueryWrapper';
 
 function formatBytes(bytes, decimals = 2) {
   if (bytes === 0) return '0 Bytes';
@@ -20,11 +19,8 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i] || ''}`;
 }
 
-function trafficLabelFormatter(bytes) {
-  if (this?.value) {
-    return formatBytes(this.value);
-  }
-  return formatBytes(bytes);
+function trafficLabelFormatter() {
+  return formatBytes(this.value);
 }
 
 function trafficTooltipFormatter() {
@@ -33,234 +29,259 @@ function trafficTooltipFormatter() {
   )}</b><br/>`;
 }
 
+const USER_FRIENDLY_RADIOS = {
+  is2dot4GHz: '2.4GHz',
+  is5GHzL: '5GHz (L)',
+  is5GHzU: '5GHz (U)',
+  is5GHz: '5GHz',
+};
+
 const lineChartConfig = [
-  {
-    key: 'service',
-    title: 'Inservice APs (24 hours)',
-    lines: [{ key: 'inServiceAps', name: 'Inservice APs' }],
-  },
-  {
-    key: 'clientDevices',
-    title: 'Client Devices (24 hours)',
-    lines: [
-      { key: 'clientDevices2dot4GHz', name: '2.4GHz' },
-      { key: 'clientDevices5GHz', name: '5GHz' },
-    ],
-  },
+  { key: 'inservicesAPs', title: 'Inservice APs (24 hours)' },
+  { key: 'clientDevices', title: 'Client Devices (24 hours)' },
   {
     key: 'traffic',
-    title: 'Traffic - 5 min intervals (24 hours)',
-    lines: [
-      { key: 'trafficBytesDownstreamData', name: 'Downstream' },
-      { key: 'trafficBytesUpstreamData', name: 'Upstream' },
-    ],
-    options: { formatter: trafficLabelFormatter, trafficTooltipFormatter },
+    title: 'Traffic (24 hours)',
+    options: { formatter: trafficLabelFormatter, tooltipFormatter: trafficTooltipFormatter },
   },
 ];
 
-const Dashboard = () => {
-  const initialGraphTime = useRef({
-    toTime: moment()
-      .valueOf()
-      .toString(),
-    fromTime: moment()
-      .subtract(24, 'hours')
-      .valueOf()
-      .toString(),
-  });
-  const { customerId } = useContext(UserContext);
-  const { loading, error, data } = useQuery(GET_ALL_STATUS, {
-    variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
-  });
+const Dashboard = withQuery(
+  ({ data }) => {
+    const { customerId } = useContext(UserContext);
+    const initialGraphTime = useRef({
+      toTime: moment()
+        .valueOf()
+        .toString(),
+      fromTime: moment()
+        .subtract(24, 'hours')
+        .valueOf()
+        .toString(),
+    });
 
-  const [lineChartData, setLineChartData] = useState([]);
-  const [trafficBytesData, setTrafficBytesData] = useState();
-
-  const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
-    FILTER_SYSTEM_EVENTS,
-    {
-      variables: {
-        customerId,
-        fromTime: initialGraphTime.current.fromTime,
-        toTime: initialGraphTime.current.toTime,
-        equipmentIds: [0],
-        dataTypes: ['StatusChangedEvent'],
-        limit: 3000, // TODO: make get all in GraphQL
+    const [lineChartData, setLineChartData] = useState({
+      inservicesAPs: {
+        key: 'Inservice APs',
+        value: [],
       },
-    }
-  );
+      clientDevices: {
+        is2dot4GHz: {
+          key: USER_FRIENDLY_RADIOS.is2dot4GHz,
+          value: [],
+        },
+        is5GHz: {
+          key: USER_FRIENDLY_RADIOS.is5GHz,
+          value: [],
+        },
+      },
+      traffic: {
+        trafficBytesDownstream: {
+          key: 'Down Stream',
+          value: [],
+        },
+        trafficBytesUpstream: {
+          key: 'Up Stream',
+          value: [],
+        },
+      },
+    });
 
-  const formatLineChartData = (list = []) => {
-    if (list.length) {
-      const chartData = [];
+    const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
+      FILTER_SYSTEM_EVENTS,
+      {
+        variables: {
+          customerId,
+          fromTime: initialGraphTime.current.fromTime,
+          toTime: initialGraphTime.current.toTime,
+          equipmentIds: [0],
+          dataTypes: ['StatusChangedEvent'],
+          limit: 3000, // TODO: make get all in GraphQL
+        },
+      }
+    );
 
-      let inServiceAps = 0;
-      let clientDevices2dot4GHz = 0;
-      let clientDevices5GHz = 0;
-      let trafficBytesDownstreamData = 0;
-      let trafficBytesUpstreamData = 0;
-      let totalDown = 0;
-      let totalUp = 0;
+    const formatLineChartData = (list = []) => {
+      if (list.length) {
+        setLineChartData(prev => {
+          const inservicesAPs = [];
+          const clientDevices2dot4GHz = [];
+          const clientDevices5GHz = [];
+          const trafficBytesDownstreamData = [];
+          const trafficBytesUpstreamData = [];
+          let totalDown = 0;
+          let totalUp = 0;
 
-      list.forEach(
-        ({
-          eventTimestamp,
-          details: {
-            payload: {
+          list.forEach(
+            ({
+              eventTimestamp,
               details: {
-                equipmentInServiceCount,
-                associatedClientsCountPerRadio: radios,
-                trafficBytesDownstream,
-                trafficBytesUpstream,
+                payload: {
+                  details: {
+                    equipmentInServiceCount,
+                    associatedClientsCountPerRadio: radios,
+                    trafficBytesDownstream,
+                    trafficBytesUpstream,
+                  },
+                },
+              },
+            }) => {
+              inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);
+
+              let total5GHz = 0;
+              total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
+
+              clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
+              clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
+
+              trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream || 0]);
+              trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream || 0]);
+
+              totalDown += trafficBytesDownstream || 0;
+              totalUp += trafficBytesUpstream || 0;
+            }
+          );
+
+          return {
+            inservicesAPs: {
+              ...prev.inservicesAPs,
+              value: [...prev.inservicesAPs.value, ...inservicesAPs],
+            },
+            clientDevices: {
+              is2dot4GHz: {
+                ...prev.clientDevices.is2dot4GHz,
+                value: [...prev.clientDevices.is2dot4GHz.value, ...clientDevices2dot4GHz],
+              },
+              is5GHz: {
+                ...prev.clientDevices.is5GHz,
+                value: [...prev.clientDevices.is5GHz.value, ...clientDevices5GHz],
               },
             },
-          },
-        }) => {
-          const timestamp = parseInt(eventTimestamp, 10);
-          inServiceAps = equipmentInServiceCount;
-
-          let total5GHz = 0;
-          total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
-
-          clientDevices2dot4GHz = radios.is2dot4GHz || 0;
-          clientDevices5GHz = total5GHz || 0;
-
-          trafficBytesDownstreamData = (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
-          trafficBytesUpstreamData = (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
-
-          totalDown += (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
-          totalUp += (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
-          chartData.push({
-            timestamp,
-            inServiceAps,
-            clientDevices2dot4GHz,
-            clientDevices5GHz,
-            trafficBytesDownstreamData,
-            trafficBytesUpstreamData,
-          });
-        }
-      );
-
-      setTrafficBytesData(prev => {
-        return {
-          totalUpstreamTraffic: (prev?.totalUpstreamTraffic || 0) + totalUp,
-          totalDownstreamTraffic: (prev?.totalDownstreamTraffic || 0) + totalDown,
-        };
-      });
-
-      setLineChartData(prev => {
-        return [...prev, ...chartData];
-      });
-    }
-  };
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const toTime = moment()
-        .valueOf()
-        .toString();
-      const fromTime = moment()
-        .subtract(5, 'minutes')
-        .valueOf()
-        .toString();
-      fetchMore({
-        variables: {
-          fromTime,
-          toTime,
-        },
-        updateQuery: (_, { fetchMoreResult }) => {
-          formatLineChartData(fetchMoreResult?.filterSystemEvents?.items);
-        },
-      });
-    }, 300000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    formatLineChartData(metricsData?.filterSystemEvents?.items);
-  }, [metricsData]);
-
-  const statsData = useMemo(() => {
-    const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
-
-    const {
-      associatedClientsCountPerRadio,
-      totalProvisionedEquipment,
-      equipmentInServiceCount,
-      equipmentWithClientsCount,
-    } = status;
-
-    const clientRadios = {};
-    let totalAssociated = 0;
-    if (associatedClientsCountPerRadio) {
-      Object.keys(associatedClientsCountPerRadio).forEach(i => {
-        if (i.includes('5GHz')) {
-          if (!clientRadios['5GHz']) {
-            clientRadios['5GHz'] = 0;
-          }
-          clientRadios['5GHz'] += associatedClientsCountPerRadio[i];
-        } else {
-          const key = USER_FRIENDLY_RADIOS[i] || i;
-          clientRadios[key] = associatedClientsCountPerRadio[i];
-        }
-        totalAssociated += associatedClientsCountPerRadio[i];
-      });
-    }
-
-    return {
-      totalProvisionedEquipment,
-      equipmentInServiceCount,
-      equipmentWithClientsCount,
-      totalAssociated,
-      clientRadios,
+            traffic: {
+              trafficBytesDownstream: {
+                ...prev.traffic.trafficBytesDownstream,
+                value: [
+                  ...prev.traffic.trafficBytesDownstream.value,
+                  ...trafficBytesDownstreamData,
+                ],
+              },
+              trafficBytesUpstream: {
+                ...prev.traffic.trafficBytesUpstream,
+                value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
+              },
+            },
+            totalDownstreamTraffic: totalDown,
+            totalUpstreamTraffic: totalUp,
+          };
+        });
+      }
     };
-  }, [data]);
 
-  const pieChartsData = useMemo(() => {
-    const { clientCountPerOui, equipmentCountPerOui } = data?.getAllStatus?.items[0]?.details || {};
+    useEffect(() => {
+      const interval = setInterval(() => {
+        const toTime = moment()
+          .valueOf()
+          .toString();
+        const fromTime = moment()
+          .subtract(5, 'minutes')
+          .valueOf()
+          .toString();
+        fetchMore({
+          variables: {
+            fromTime,
+            toTime,
+          },
+          updateQuery: (_, { fetchMoreResult }) => {
+            formatLineChartData(fetchMoreResult?.filterSystemEvents?.items);
+          },
+        });
+      }, 300000);
 
-    return [
-      { title: 'AP Vendors', ...equipmentCountPerOui },
-      { title: 'Client Vendors', ...clientCountPerOui },
-    ];
-  }, [data]);
+      return () => clearInterval(interval);
+    }, []);
 
-  if (loading) {
-    return <Loading />;
+    useEffect(() => {
+      formatLineChartData(metricsData?.filterSystemEvents?.items);
+    }, [metricsData]);
+
+    const statsData = useMemo(() => {
+      const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
+
+      const {
+        associatedClientsCountPerRadio,
+        totalProvisionedEquipment,
+        equipmentInServiceCount,
+        equipmentWithClientsCount,
+      } = status;
+
+      const clientRadios = {};
+      let totalAssociated = 0;
+      if (associatedClientsCountPerRadio) {
+        Object.keys(associatedClientsCountPerRadio).forEach(i => {
+          if (i.includes('5GHz')) {
+            if (!clientRadios['5GHz']) {
+              clientRadios['5GHz'] = 0;
+            }
+            clientRadios['5GHz'] += associatedClientsCountPerRadio[i];
+          } else {
+            const key = USER_FRIENDLY_RADIOS[i] || i;
+            clientRadios[key] = associatedClientsCountPerRadio[i];
+          }
+          totalAssociated += associatedClientsCountPerRadio[i];
+        });
+      }
+
+      return {
+        totalProvisionedEquipment,
+        equipmentInServiceCount,
+        equipmentWithClientsCount,
+        totalAssociated,
+        clientRadios,
+      };
+    }, [data]);
+
+    const pieChartsData = useMemo(() => {
+      const { clientCountPerOui, equipmentCountPerOui } =
+        data?.getAllStatus?.items[0]?.details || {};
+
+      return [
+        { title: 'AP Vendors', ...equipmentCountPerOui },
+        { title: 'Client Vendors', ...clientCountPerOui },
+      ];
+    }, [data]);
+
+    return (
+      <DashboardPage
+        statsCardDetails={[
+          {
+            title: 'Access Point',
+            'Total Provisioned': statsData?.totalProvisionedEquipment,
+            'In Service': statsData?.equipmentInServiceCount,
+            'With Clients': statsData?.equipmentWithClientsCount,
+          },
+          {
+            title: 'Client Devices',
+            'Total Associated': statsData?.totalAssociated,
+            ...statsData?.clientRadios,
+          },
+          {
+            title: 'Usage Information (24 hours)',
+            'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
+            'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
+          },
+        ]}
+        pieChartDetails={pieChartsData}
+        lineChartData={lineChartData}
+        lineChartConfig={lineChartConfig}
+        lineChartLoading={metricsLoading}
+        lineChartError={metricsError}
+      />
+    );
+  },
+  GET_ALL_STATUS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] };
   }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load Dashboard" type="error" showIcon />;
-  }
-
-  return (
-    <DashboardPage
-      statsCardDetails={[
-        {
-          title: 'Access Point',
-          'Total Provisioned': statsData?.totalProvisionedEquipment,
-          'In Service': statsData?.equipmentInServiceCount,
-          'With Clients': statsData?.equipmentWithClientsCount,
-        },
-        {
-          title: 'Client Devices',
-          'Total Associated': statsData?.totalAssociated,
-          ...statsData?.clientRadios,
-        },
-        {
-          title: 'Usage Information (24 hours)',
-          'Total Traffic (Downstream)': formatBytes(trafficBytesData?.totalDownstreamTraffic),
-          'Total Traffic (Upstream)': formatBytes(trafficBytesData?.totalUpstreamTraffic),
-        },
-      ]}
-      pieChartDetails={pieChartsData}
-      lineChartData={lineChartData}
-      lineChartConfig={lineChartConfig}
-      lineChartLoading={metricsLoading}
-      lineChartError={metricsError}
-    />
-  );
-};
+);
 
 export default Dashboard;

app/containers/EditAccount/index.js

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
-import { useMutation, useQuery, gql } from '@apollo/client';
-import { notification, Alert } from 'antd';
-import { EditAccount as EditAccountPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { useMutation, gql } from '@apollo/client';
+import { notification } from 'antd';
+import { EditAccount as EditAccountPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { withQuery } from 'containers/QueryWrapper';
 
 import UserContext from 'contexts/UserContext';
 
@@ -10,7 +11,7 @@ const GET_USER = gql`
     getUser(id: $id) {
       id
       username
-      roles
+      role
       customerId
       lastModifiedTimestamp
     }
@@ -22,7 +23,7 @@ const UPDATE_USER = gql`
     $id: ID!
     $username: String!
     $password: String!
-    $roles: [String]
+    $role: String!
     $customerId: ID!
     $lastModifiedTimestamp: String
   ) {
@@ -30,60 +31,58 @@ const UPDATE_USER = gql`
       id: $id
       username: $username
       password: $password
-      roles: $roles
+      role: $role
       customerId: $customerId
       lastModifiedTimestamp: $lastModifiedTimestamp
     ) {
       id
       username
-      roles
+      role
       customerId
       lastModifiedTimestamp
     }
   }
 `;
 
-const EditAccount = () => {
-  const { id, email } = useContext(UserContext);
-  const { loading, error, data } = useQuery(GET_USER, { variables: { id } });
-  const [updateUser] = useMutation(UPDATE_USER);
+const EditAccount = withQuery(
+  ({ data }) => {
+    const { id, email } = useContext(UserContext);
+    const [updateUser] = useMutation(UPDATE_USER);
 
-  const handleSubmit = newPassword => {
-    const { roles, customerId, lastModifiedTimestamp } = data.getUser;
+    const handleSubmit = newPassword => {
+      const { role, customerId, lastModifiedTimestamp } = data.getUser;
 
-    updateUser({
-      variables: {
-        id,
-        username: email,
-        password: newPassword,
-        roles,
-        customerId,
-        lastModifiedTimestamp,
-      },
-    })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Password successfully updated.',
-        });
+      updateUser({
+        variables: {
+          id,
+          username: email,
+          password: newPassword,
+          role,
+          customerId,
+          lastModifiedTimestamp,
+        },
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Password could not be updated.',
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Password successfully updated.',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Password could not be updated.',
+          })
+        );
+    };
 
-  if (loading) {
-    return <Loading />;
+    return <EditAccountPage onSubmit={handleSubmit} email={email} />;
+  },
+  GET_USER,
+  () => {
+    const { id } = useContext(UserContext);
+    return { id };
   }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load User." type="error" showIcon />;
-  }
-
-  return <EditAccountPage onSubmit={handleSubmit} email={email} />;
-};
+);
 
 export default EditAccount;

app/containers/MasterLayout/index.js

@@ -6,14 +6,14 @@ import { AppLayout as Layout } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { GET_ALARM_COUNT } from 'graphql/queries';
 
-import { AUTH_TOKEN, ROUTES } from 'constants/index';
+import { AUTH_TOKEN } from 'constants/index';
 
 import { removeItem } from 'utils/localStorage';
 
 import UserContext from 'contexts/UserContext';
 
 const MasterLayout = ({ children }) => {
-  const { roles, customerId, id: currentUserId } = useContext(UserContext);
+  const { role, customerId } = useContext(UserContext);
 
   const client = useApolloClient();
   const location = useLocation();
@@ -30,60 +30,75 @@ const MasterLayout = ({ children }) => {
   const menuItems = [
     {
       key: 'dashboard',
-      path: ROUTES.dashboard,
+      path: '/dashboard',
       text: 'Dashboard',
     },
     {
       key: 'network',
-      path: ROUTES.network,
+      path: '/network',
       text: 'Network',
     },
     {
       key: 'profiles',
-      path: ROUTES.profiles,
+      path: '/profiles',
       text: 'Profiles',
     },
     {
       key: 'system',
-      path: ROUTES.system,
+      path: '/system',
       text: 'System',
     },
   ];
 
   const mobileMenuItems = [
-    ...menuItems,
+    {
+      key: 'dashboard',
+      path: '/dashboard',
+      text: 'Dashboard',
+    },
+    {
+      key: 'network',
+      path: '/network',
+      text: 'Network',
+    },
+    {
+      key: 'profiles',
+      path: '/profiles',
+      text: 'Profiles',
+    },
+    {
+      key: 'system',
+      path: '/system',
+      text: 'System',
+    },
     {
       key: 'settings',
       text: 'Settings',
       children: [
-        ...(currentUserId !== 0
-          ? [
-              {
-                key: 'editAccount',
-                path: ROUTES.account,
-                text: 'Edit Account',
-              },
-            ]
-          : []),
+        {
+          key: 'editAccount',
+          path: '/account/edit',
+          text: 'Edit Account',
+        },
         {
           key: 'logout',
-          path: ROUTES.root,
+          path: '/',
           text: 'Log Out',
         },
       ],
     },
   ];
 
-  if (roles?.[0] === 'SuperUser') {
+  if (role === 'SuperUser') {
     menuItems.push({
-      key: 'users',
-      path: ROUTES.users,
-      text: 'Users',
+      key: 'accounts',
+      path: '/accounts',
+      text: 'Accounts',
     });
     mobileMenuItems.push({
-      key: 'users',
-      path: ROUTES.users,
-      text: 'Users',
+      key: 'accounts',
+      path: '/accounts',
+      text: 'Accounts',
     });
   }
 
@@ -94,7 +109,6 @@ const MasterLayout = ({ children }) => {
       menuItems={menuItems}
       mobileMenuItems={mobileMenuItems}
       totalAlarms={data && data.getAlarmCount}
-      currentUserId={currentUserId}
     >
       {children}
     </Layout>

app/containers/Network/containers/AccessPointDetails/index.js

@@ -1,298 +1,345 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useParams, useHistory } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/client';
-import { Alert, notification } from 'antd';
+import { useParams } from 'react-router-dom';
+import { useQuery, useMutation, gql } from '@apollo/client';
+import { notification } from 'antd';
 import moment from 'moment';
-import {
-  AccessPointDetails as AccessPointDetailsPage,
-  Loading,
-} from '@tip-wlan/wlan-cloud-ui-library';
+import { AccessPointDetails as AccessPointDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { FILTER_SERVICE_METRICS, GET_ALL_FIRMWARE, GET_ALL_PROFILES } from 'graphql/queries';
 import {
-  GET_EQUIPMENT,
-  FILTER_SERVICE_METRICS,
-  GET_ALL_FIRMWARE,
-  GET_ALL_PROFILES,
-} from 'graphql/queries';
-import {
-  UPDATE_EQUIPMENT,
-  DELETE_EQUIPMENT,
   UPDATE_EQUIPMENT_FIRMWARE,
   REQUEST_EQUIPMENT_SWITCH_BANK,
   REQUEST_EQUIPMENT_REBOOT,
 } from 'graphql/mutations';
-import { fetchMoreProfiles } from 'graphql/functions';
+import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
+
+const GET_EQUIPMENT = gql`
+  query GetEquipment($id: ID!) {
+    getEquipment(id: $id) {
+      id
+      equipmentType
+      inventoryId
+      customerId
+      profileId
+      locationId
+      name
+      latitude
+      longitude
+      serial
+      lastModifiedTimestamp
+      details
+      profile {
+        id
+        name
+        childProfiles {
+          id
+          name
+          details
+        }
+      }
+      status {
+        firmware {
+          detailsJSON
+        }
+        protocol {
+          detailsJSON
+          details {
+            reportedMacAddr
+            manufacturer
+          }
+        }
+        radioUtilization {
+          detailsJSON
+        }
+        clientDetails {
+          detailsJSON
+          details {
+            numClientsPerRadio
+          }
+        }
+        osPerformance {
+          detailsJSON
+        }
+      }
+      model
+      alarmsCount
+      alarms {
+        severity
+        alarmCode
+        details
+        createdTimestamp
+      }
+    }
+  }
+`;
+
+const UPDATE_EQUIPMENT = gql`
+  mutation UpdateEquipment(
+    $id: ID!
+    $equipmentType: String!
+    $inventoryId: String!
+    $customerId: ID!
+    $profileId: ID!
+    $locationId: ID!
+    $name: String!
+    $latitude: String
+    $longitude: String
+    $serial: String
+    $lastModifiedTimestamp: String
+    $details: JSONObject
+  ) {
+    updateEquipment(
+      id: $id
+      equipmentType: $equipmentType
+      inventoryId: $inventoryId
+      customerId: $customerId
+      profileId: $profileId
+      locationId: $locationId
+      name: $name
+      latitude: $latitude
+      longitude: $longitude
+      serial: $serial
+      lastModifiedTimestamp: $lastModifiedTimestamp
+      details: $details
+    ) {
+      id
+      equipmentType
+      inventoryId
+      customerId
+      profileId
+      locationId
+      name
+      latitude
+      longitude
+      serial
+      lastModifiedTimestamp
+      details
+    }
+  }
+`;
 
 const toTime = moment();
 const fromTime = moment().subtract(1, 'hour');
 
-const AccessPointDetails = ({ locations }) => {
-  const { id } = useParams();
-  const { customerId } = useContext(UserContext);
-  const history = useHistory();
+const AccessPointDetails = withQuery(
+  ({ data, refetch, locations }) => {
+    const { id } = useParams();
+    const { customerId } = useContext(UserContext);
 
-  const { loading, error, data, refetch } = useQuery(GET_EQUIPMENT, {
-    variables: {
-      id,
-    },
-    fetchPolicy: 'network-only',
-    errorPolicy: 'all',
-  });
+    const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
+      GET_ALL_FIRMWARE,
+      {
+        skip: !data?.getEquipment?.model,
+        variables: { modelId: data?.getEquipment?.model },
+      }
+    );
 
-  const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
-    GET_ALL_FIRMWARE,
-    {
-      skip: !data?.getEquipment?.model,
-      variables: { modelId: data?.getEquipment?.model },
-      errorPolicy: 'all',
-    }
-  );
-  const {
-    data: dataProfiles,
-    error: errorProfiles,
-    loading: loadingProfiles,
-    fetchMore,
-  } = useQuery(
-    GET_ALL_PROFILES(`
+    const {
+      data: dataProfiles,
+      error: errorProfiles,
+      loading: loadingProfiles,
+      fetchMore,
+    } = useQuery(
+      GET_ALL_PROFILES(`
     childProfiles {
       id
       name
       details
     }`),
-    {
-      variables: { customerId, type: 'equipment_ap' },
-      fetchPolicy: 'network-only',
-    }
-  );
+      {
+        variables: { customerId, type: 'equipment_ap' },
+      }
+    );
 
-  const {
-    loading: metricsLoading,
-    error: metricsError,
-    data: metricsData,
-    fetchMore: fetchMoreServiceMetrics,
-  } = useQuery(FILTER_SERVICE_METRICS, {
-    variables: {
-      customerId,
-      fromTime: fromTime.valueOf().toString(),
-      toTime: toTime.valueOf().toString(),
-      equipmentIds: [id],
-      dataTypes: ['ApNode'],
-      limit: 100,
-    },
-  });
-
-  const [updateEquipment] = useMutation(UPDATE_EQUIPMENT);
-  const [updateEquipmentFirmware] = useMutation(UPDATE_EQUIPMENT_FIRMWARE);
-  const [requestEquipmentSwitchBank] = useMutation(REQUEST_EQUIPMENT_SWITCH_BANK);
-  const [requestEquipmentReboot] = useMutation(REQUEST_EQUIPMENT_REBOOT);
-  const [deleteEquipment] = useMutation(DELETE_EQUIPMENT);
-
-  const refetchData = () => {
-    refetch();
-    fetchMoreServiceMetrics({
+    const {
+      loading: metricsLoading,
+      error: metricsError,
+      data: metricsData,
+      refetch: metricsRefetch,
+    } = useQuery(FILTER_SERVICE_METRICS, {
       variables: {
-        fromTime: moment()
-          .subtract(2, 'minutes')
-          .valueOf()
-          .toString(),
-        toTime: moment()
-          .valueOf()
-          .toString(),
-      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        const previousEntry = previousResult.filterServiceMetrics;
-        const newItems = fetchMoreResult.filterServiceMetrics.items;
-
-        return {
-          filterServiceMetrics: {
-            context: fetchMoreResult.filterServiceMetrics.context,
-            items: [...previousEntry.items, ...newItems],
-            __typename: previousEntry.__typename,
-          },
-        };
+        customerId,
+        fromTime: fromTime.valueOf().toString(),
+        toTime: toTime.valueOf().toString(),
+        equipmentIds: [id],
+        dataTypes: ['ApNode'],
+        limit: 100,
       },
     });
-  };
 
-  const handleUpdateEquipment = ({
-    id: equipmentId,
-    equipmentType,
-    inventoryId,
-    customerId: custId,
-    profileId,
-    locationId,
-    name,
-    baseMacAddress,
-    latitude,
-    longitude,
-    serial,
-    lastModifiedTimestamp,
-    formattedData,
-  }) => {
-    updateEquipment({
-      variables: {
-        id: equipmentId,
-        equipmentType,
-        inventoryId,
-        customerId: custId,
-        profileId,
-        locationId,
-        name,
-        baseMacAddress,
-        latitude,
-        longitude,
-        serial,
-        lastModifiedTimestamp,
-        details: formattedData,
-      },
-    })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Equipment settings successfully updated.',
-        });
+    const [updateEquipment] = useMutation(UPDATE_EQUIPMENT);
+    const [updateEquipmentFirmware] = useMutation(UPDATE_EQUIPMENT_FIRMWARE);
+    const [requestEquipmentSwitchBank] = useMutation(REQUEST_EQUIPMENT_SWITCH_BANK);
+    const [requestEquipmentReboot] = useMutation(REQUEST_EQUIPMENT_REBOOT);
+
+    const refetchData = () => {
+      refetch();
+      metricsRefetch();
+    };
+
+    const handleUpdateEquipment = (
+      equipmentId,
+      equipmentType,
+      inventoryId,
+      custId,
+      profileId,
+      locationId,
+      name,
+      latitude,
+      longitude,
+      serial,
+      lastModifiedTimestamp,
+      details
+    ) => {
+      updateEquipment({
+        variables: {
+          id: equipmentId,
+          equipmentType,
+          inventoryId,
+          customerId: custId,
+          profileId,
+          locationId,
+          name,
+          latitude,
+          longitude,
+          serial,
+          lastModifiedTimestamp,
+          details,
+        },
       })
-
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment settings could not be updated.',
-        })
-      );
-  };
-
-  const handleDeleteEquipment = () => {
-    deleteEquipment({
-      variables: { id },
-    })
-      .then(() => {
-        history.push('/network/access-points');
-        notification.success({
-          message: 'Success',
-          description: 'Equipment successfully deleted',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment could not be deleted.',
-        })
-      );
-  };
-
-  const handleUpdateEquipmentFirmware = (equipmentId, firmwareVersionId) =>
-    updateEquipmentFirmware({ variables: { equipmentId, firmwareVersionId } })
-      .then(firmwareResp => {
-        if (firmwareResp?.data?.updateEquipmentFirmware?.success === true) {
+        .then(() => {
           notification.success({
             message: 'Success',
-            description: 'Equipment Firmware Upgrade in progress',
+            description: 'Equipment settings successfully updated.',
           });
-        } else {
+        })
+
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Equipment settings could not be updated.',
+          })
+        );
+    };
+
+    const handleUpdateEquipmentFirmware = (equipmentId, firmwareVersionId) =>
+      updateEquipmentFirmware({ variables: { equipmentId, firmwareVersionId } })
+        .then(firmwareResp => {
+          if (firmwareResp?.data?.updateEquipmentFirmware?.success === true) {
+            notification.success({
+              message: 'Success',
+              description: 'Equipment Firmware Upgrade in progress',
+            });
+          } else {
+            notification.error({
+              message: 'Error',
+              description: 'Equipment Firmware Upgrade could not be updated.',
+            });
+          }
+        })
+        .catch(() =>
           notification.error({
             message: 'Error',
             description: 'Equipment Firmware Upgrade could not be updated.',
-          });
-        }
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment Firmware Upgrade could not be updated.',
-        })
-      );
+          })
+        );
 
-  const handleRequestEquipmentSwitchBank = equipmentId =>
-    requestEquipmentSwitchBank({ variables: { equipmentId } })
-      .then(firmwareResp => {
-        if (firmwareResp?.data?.requestEquipmentSwitchBank?.success === true) {
-          notification.success({
-            message: 'Success',
-            description: 'Equipment Firmware in progress',
-          });
-        } else {
+    const handleRequestEquipmentSwitchBank = equipmentId =>
+      requestEquipmentSwitchBank({ variables: { equipmentId } })
+        .then(firmwareResp => {
+          if (firmwareResp?.data?.requestEquipmentSwitchBank?.success === true) {
+            notification.success({
+              message: 'Success',
+              description: 'Equipment Firmware in progress',
+            });
+          } else {
+            notification.error({
+              message: 'Error',
+              description: 'Equipment Firmware could not be updated.',
+            });
+          }
+        })
+        .catch(() =>
           notification.error({
             message: 'Error',
             description: 'Equipment Firmware could not be updated.',
-          });
-        }
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment Firmware could not be updated.',
-        })
-      );
+          })
+        );
 
-  const handleRequestEquipmentReboot = equipmentId =>
-    requestEquipmentReboot({ variables: { equipmentId } })
-      .then(firmwareResp => {
-        if (firmwareResp?.data?.requestEquipmentReboot?.success === true) {
-          notification.success({
-            message: 'Success',
-            description: 'Equipment Firmware in progress',
-          });
-        } else {
+    const handleRequestEquipmentReboot = equipmentId =>
+      requestEquipmentReboot({ variables: { equipmentId } })
+        .then(firmwareResp => {
+          if (firmwareResp?.data?.requestEquipmentReboot?.success === true) {
+            notification.success({
+              message: 'Success',
+              description: 'Equipment Firmware in progress',
+            });
+          } else {
+            notification.error({
+              message: 'Error',
+              description: 'Equipment Firmware could not be updated.',
+            });
+          }
+        })
+        .catch(() =>
           notification.error({
             message: 'Error',
             description: 'Equipment Firmware could not be updated.',
-          });
-        }
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment Firmware could not be updated.',
-        })
-      );
+          })
+        );
 
-  const handleFetchProfiles = e => {
-    fetchMoreProfiles(e, dataProfiles, fetchMore);
-  };
+    const handleFetchProfiles = e => {
+      if (dataProfiles.getAllProfiles.context.lastPage) {
+        return false;
+      }
 
-  if (loading) {
-    return <Loading />;
-  }
+      e.persist();
+      const { target } = e;
+
+      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+        fetchMore({
+          variables: { context: { ...dataProfiles.getAllProfiles.context } },
+          updateQuery: updateQueryGetAllProfiles,
+        });
+      }
+
+      return true;
+    };
 
-  if (error && !data?.getEquipment) {
     return (
-      <Alert
-        message="Error"
-        description="Failed to load Access Point data."
-        type="error"
-        showIcon
+      <AccessPointDetailsPage
+        handleRefresh={refetchData}
+        onUpdateEquipment={handleUpdateEquipment}
+        data={data?.getEquipment}
+        profiles={dataProfiles?.getAllProfiles?.items}
+        osData={{
+          loading: metricsLoading,
+          error: metricsError,
+          data: metricsData && metricsData.filterServiceMetrics.items,
+        }}
+        firmware={dataFirmware?.getAllFirmware}
+        locations={locations}
+        onUpdateEquipmentFirmware={handleUpdateEquipmentFirmware}
+        onRequestEquipmentSwitchBank={handleRequestEquipmentSwitchBank}
+        onRequestEquipmentReboot={handleRequestEquipmentReboot}
+        loadingProfiles={loadingProfiles}
+        errorProfiles={errorProfiles}
+        loadingFirmware={loadingFirmware}
+        errorFirmware={errorFirmware}
+        onFetchMoreProfiles={handleFetchProfiles}
+        isLastProfilesPage={dataProfiles?.getAllProfiles?.context?.lastPage}
       />
     );
+  },
+  GET_EQUIPMENT,
+  () => {
+    const { id } = useParams();
+    return { id };
   }
-
-  return (
-    <AccessPointDetailsPage
-      handleRefresh={refetchData}
-      onUpdateEquipment={handleUpdateEquipment}
-      onDeleteEquipment={handleDeleteEquipment}
-      data={data?.getEquipment}
-      profiles={dataProfiles?.getAllProfiles?.items}
-      osData={{
-        loading: metricsLoading,
-        error: metricsError,
-        data: metricsData && metricsData.filterServiceMetrics.items,
-      }}
-      firmware={dataFirmware?.getAllFirmware}
-      locations={locations}
-      onUpdateEquipmentFirmware={handleUpdateEquipmentFirmware}
-      onRequestEquipmentSwitchBank={handleRequestEquipmentSwitchBank}
-      onRequestEquipmentReboot={handleRequestEquipmentReboot}
-      loadingProfiles={loadingProfiles}
-      errorProfiles={errorProfiles}
-      loadingFirmware={loadingFirmware}
-      errorFirmware={errorFirmware}
-      onFetchMoreProfiles={handleFetchProfiles}
-      isLastProfilesPage={dataProfiles?.getAllProfiles?.context?.lastPage}
-    />
-  );
-};
+);
 
 AccessPointDetails.propTypes = {
   locations: PropTypes.instanceOf(Array).isRequired,

app/containers/Network/containers/AccessPoints/index.js

@@ -6,7 +6,6 @@ import { notification } from 'antd';
 import { floor, padStart } from 'lodash';
 import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
 
-import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_EQUIPMENT } from 'graphql/queries';
 
@@ -59,12 +58,12 @@ const accessPointsTableColumns = [
   },
   {
     title: 'MAC',
-    dataIndex: 'baseMacAddress',
+    dataIndex: ['status', 'protocol', 'details', 'reportedMacAddr'],
     render: renderTableCell,
   },
   {
     title: 'MANUFACTURER',
-    dataIndex: 'manufacturer',
+    dataIndex: ['status', 'protocol', 'details', 'manufacturer'],
     render: renderTableCell,
   },
   {
@@ -89,8 +88,8 @@ const accessPointsTableColumns = [
   },
   {
     title: 'CHANNEL',
-    dataIndex: ['status', 'channel', 'detailsJSON', 'channelNumberStatusDataMap'],
-    render: text => renderTableCell(Object.values(text ?? [])),
+    dataIndex: 'channel',
+    render: renderTableCell,
   },
   {
     title: 'OCCUPANCY',
@@ -166,7 +165,7 @@ const AccessPoints = ({ checkedLocations }) => {
 
   return (
     <NetworkTableContainer
-      activeTab={ROUTES.accessPoints}
+      activeTab="/network/access-points"
       onRefresh={handleOnRefresh}
       tableColumns={accessPointsTableColumns}
       tableData={equipData && equipData.filterEquipment && equipData.filterEquipment.items}

app/containers/Network/containers/BulkEditAccessPoints/index.js

@@ -1,12 +1,9 @@
-import React, { useContext, useMemo, useEffect } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
-import { useParams } from 'react-router-dom';
-import { useLazyQuery, useMutation } from '@apollo/client';
-import { BulkEditAccessPoints, sortRadioTypes } from '@tip-wlan/wlan-cloud-ui-library';
-import { USER_FRIENDLY_RADIOS } from 'constants/index';
-
-import { getBreadcrumbPath, getLocationPath } from 'utils/locations';
+import { useParams, Redirect } from 'react-router-dom';
+import { useQuery, useMutation } from '@apollo/client';
+import { BulkEditAccessPoints, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { FILTER_EQUIPMENT_BULK_EDIT_APS } from 'graphql/queries';
 import { UPDATE_EQUIPMENT_BULK } from 'graphql/mutations';
@@ -28,200 +25,243 @@ const renderTableCell = tabCell => {
   return <span>{tabCell}</span>;
 };
 const accessPointsChannelTableColumns = [
-  { title: 'Name', dataIndex: 'name', key: 'name', width: 250, render: renderTableCell },
-
+  { title: 'NAME', dataIndex: 'name', key: 'name', render: renderTableCell },
   {
-    title: 'Radios',
-    dataIndex: 'radioMap',
-    width: 150,
-    render: text => renderTableCell(text.map(i => USER_FRIENDLY_RADIOS[i])),
-  },
-  {
-    title: 'Manual Active Channel',
-    dataIndex: 'manualChannelNumber',
-    key: 'manualChannelNumber',
+    title: 'CHANNEL',
+    dataIndex: 'channel',
+    key: 'channel',
     editable: true,
-    width: 200,
-    render: renderTableCell,
-  },
-
-  {
-    title: 'Manual Backup Channel',
-    dataIndex: 'manualBackupChannelNumber',
-    key: 'manualBackupChannelNumber',
-    editable: true,
-    width: 210,
     render: renderTableCell,
   },
   {
-    title: 'Cell Size',
+    title: 'CELL SIZE',
     dataIndex: 'cellSize',
     key: 'cellSize',
     editable: true,
-    width: 150,
     render: renderTableCell,
   },
   {
-    title: 'Probe Response Threshold',
+    title: 'PROB RESPONSE THRESHOLD',
     dataIndex: 'probeResponseThreshold',
     key: 'probeResponseThreshold',
     editable: true,
-    width: 210,
     render: renderTableCell,
   },
   {
-    title: 'Client Disconnect Threshold',
+    title: 'CLIENT DISCONNECT THRESHOLD',
     dataIndex: 'clientDisconnectThreshold',
     key: 'clientDisconnectThreshold',
     editable: true,
-    width: 210,
-
     render: renderTableCell,
   },
   {
-    title: 'SNR (% Drop)',
+    title: 'SNR (% DROP)',
     dataIndex: 'snrDrop',
     key: 'snrDrop',
     editable: true,
-    width: 150,
     render: renderTableCell,
   },
   {
-    title: 'Min Load',
+    title: 'MIN LOAD',
     dataIndex: 'minLoad',
     key: 'minLoad',
     editable: true,
-    width: 150,
     render: renderTableCell,
   },
 ];
 
-const getRadioDetails = (radioDetails, type) => {
-  const sortedRadios = sortRadioTypes(Object.keys(radioDetails?.radioMap || {}));
+const getBreadcrumbPath = (id, locations) => {
+  const locationsPath = [];
+  const treeRecurse = (parentNodeId, node) => {
+    if (node.id === parentNodeId) {
+      locationsPath.unshift(node);
+      return node;
+    }
+    if (node.children) {
+      let parent;
+      node.children.some(i => {
+        parent = treeRecurse(parentNodeId, i);
+        return parent;
+      });
+      if (parent) {
+        locationsPath.unshift(node);
+      }
+      return parent;
+    }
+    return null;
+  };
 
-  if (type === 'manualChannelNumber') {
-    return sortedRadios.map(i => radioDetails.radioMap[i]?.manualChannelNumber);
-  }
+  treeRecurse(id, {
+    id: 0,
+    children: locations,
+  });
 
-  if (type === 'manualBackupChannelNumber') {
-    return sortedRadios.map(i => radioDetails.radioMap[i]?.manualBackupChannelNumber);
-  }
-  if (type === 'snrDrop') {
-    return sortedRadios.map(
-      i => radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.dropInSnrPercentage
-    );
-  }
-  if (type === 'allowedChannels') {
-    return sortedRadios.map(i => radioDetails.radioMap[i]?.allowedChannelsPowerLevels);
-  }
-
-  if (type === 'minLoad') {
-    return sortedRadios.map(
-      i => radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.minLoadFactor
-    );
-  }
-
-  if (type === 'cellSize') {
-    return sortedRadios.map(i => radioDetails.radioMap[i]?.rxCellSizeDb?.value);
-  }
-
-  if (type === 'probeResponseThreshold') {
-    return sortedRadios.map(i => radioDetails.radioMap[i]?.probeResponseThresholdDb?.value);
-  }
-
-  if (type === 'clientDisconnectThreshold') {
-    return sortedRadios.map(i => radioDetails.radioMap[i]?.clientDisconnectThresholdDb?.value);
-  }
-
-  return sortedRadios;
+  return locationsPath;
 };
 
-const formatRadioFrequencies = ({
-  manualChannelNumber,
-  manualBackupChannelNumber,
-  snrDrop,
-  minLoad,
-  cellSize,
-  probeResponseThreshold,
-  clientDisconnectThreshold,
-  radioMap = [],
-}) => {
-  const frequencies = {};
-  radioMap.forEach((i, index) => {
-    frequencies[i] = {
-      channelNumber: manualChannelNumber[index],
-      backupChannelNumber: manualBackupChannelNumber[index],
-      dropInSnrPercentage: snrDrop[index],
-      minLoadFactor: minLoad[index],
-      rxCellSizeDb: {
-        auto: true,
-        value: cellSize[index],
-      },
-      probeResponseThresholdDb: {
-        auto: true,
-        value: probeResponseThreshold[index],
-      },
-      clientDisconnectThresholdDb: {
-        auto: true,
-        value: clientDisconnectThreshold[index],
-      },
-    };
-  });
-  return frequencies;
+const getLocationPath = (selectedId, locations) => {
+  const locationsPath = [];
+
+  const treeRecurse = (parentNodeId, node) => {
+    if (node.id === parentNodeId) {
+      locationsPath.unshift(node.id);
+
+      if (node.children) {
+        const flatten = children => {
+          children.forEach(i => {
+            locationsPath.unshift(i.id);
+            if (i.children) {
+              flatten(i.children);
+            }
+          });
+        };
+
+        flatten(node.children);
+      }
+      return node;
+    }
+    if (node.children) {
+      let parent;
+      node.children.some(i => {
+        parent = treeRecurse(parentNodeId, i);
+        return parent;
+      });
+      return parent;
+    }
+
+    return null;
+  };
+
+  if (selectedId) {
+    treeRecurse(selectedId, { id: 0, children: locations });
+  }
+
+  return locationsPath;
 };
 
 const BulkEditAPs = ({ locations, checkedLocations }) => {
   const { id } = useParams();
   const { customerId } = useContext(UserContext);
-
   const locationIds = useMemo(() => {
     const locationPath = getLocationPath(id, locations);
     return locationPath.filter(f => checkedLocations.includes(f));
   }, [id, locations, checkedLocations]);
 
-  const [
-    filterEquipment,
-    {
-      loading: filterEquipmentLoading,
-      error: filterEquipmentError,
-      refetch,
-      data: equipData,
-      fetchMore,
-    },
-  ] = useLazyQuery(FILTER_EQUIPMENT_BULK_EDIT_APS, {
-    errorPolicy: 'all',
-    fetchPolicy: 'cache-first',
+  const {
+    loading: filterEquipmentLoading,
+    error: filterEquipmentError,
+    refetch,
+    data: equipData,
+    fetchMore,
+  } = useQuery(FILTER_EQUIPMENT_BULK_EDIT_APS, {
+    variables: { customerId, locationIds, equipmentType: 'AP' },
   });
 
-  const fetchFilterEquipment = async () => {
-    filterEquipment({
-      variables: {
-        customerId,
-        locationIds,
-        equipmentType: 'AP',
-      },
-    });
-  };
   const [updateEquipmentBulk] = useMutation(UPDATE_EQUIPMENT_BULK);
 
-  const formattedTableData = useMemo(
-    () =>
-      equipData?.filterEquipment?.items?.map(({ id: key, name, details = {} }) => ({
+  const getRadioDetails = (radioDetails, type) => {
+    if (type === 'cellSize') {
+      const cellSizeValues = [];
+      Object.keys(radioDetails.radioMap).map(i => {
+        return cellSizeValues.push(radioDetails.radioMap[i].rxCellSizeDb.value);
+      });
+      return cellSizeValues;
+    }
+    if (type === 'probeResponseThreshold') {
+      const probeResponseThresholdValues = [];
+      Object.keys(radioDetails.radioMap).map(i => {
+        return probeResponseThresholdValues.push(
+          radioDetails.radioMap[i].probeResponseThresholdDb.value
+        );
+      });
+      return probeResponseThresholdValues;
+    }
+    if (type === 'clientDisconnectThreshold') {
+      const clientDisconnectThresholdValues = [];
+      Object.keys(radioDetails.radioMap).map(i => {
+        return clientDisconnectThresholdValues.push(
+          radioDetails.radioMap[i].clientDisconnectThresholdDb.value
+        );
+      });
+      return clientDisconnectThresholdValues;
+    }
+    if (type === 'snrDrop') {
+      const snrDropValues = [];
+      Object.keys(radioDetails.advancedRadioMap).map(i => {
+        return snrDropValues.push(
+          radioDetails.advancedRadioMap[i].bestApSettings.dropInSnrPercentage
+        );
+      });
+      return snrDropValues;
+    }
+
+    const minLoadValue = [];
+    Object.keys(radioDetails.advancedRadioMap).map(i => {
+      return minLoadValue.push(radioDetails.advancedRadioMap[i].bestApSettings.minLoadFactor);
+    });
+    return minLoadValue;
+  };
+
+  const setAccessPointsBulkEditTableData = (dataSource = []) => {
+    const tableData = dataSource.items.map(({ id: key, name, channel, details }) => {
+      return {
         key,
         id: key,
         name,
-        manualChannelNumber: getRadioDetails(details, 'manualChannelNumber'),
-        manualBackupChannelNumber: getRadioDetails(details, 'manualBackupChannelNumber'),
+        channel,
         cellSize: getRadioDetails(details, 'cellSize'),
         probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
         clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
         snrDrop: getRadioDetails(details, 'snrDrop'),
         minLoad: getRadioDetails(details, 'minLoad'),
-        radioMap: getRadioDetails(details, 'radioMap'),
-        allowedChannels: getRadioDetails(details, 'allowedChannels'),
-      })),
-    [equipData?.filterEquipment?.items]
-  );
+      };
+    });
+    return tableData;
+  };
+
+  const setUpdatedBulkEditTableData = (
+    equipmentId,
+    channel,
+    cellSize,
+    probeResponseThreshold,
+    clientDisconnectThreshold,
+    snrDrop,
+    minLoad,
+    dataSource = []
+  ) => {
+    const updatedItems = [];
+    let dropInSnrPercentage;
+    let minLoadFactor;
+    dataSource.items.forEach(({ id: itemId, details }) => {
+      if (equipmentId === itemId) {
+        Object.keys(details.radioMap).forEach((i, dataIndex) => {
+          const frequencies = {};
+          dropInSnrPercentage = snrDrop[dataIndex];
+          minLoadFactor = minLoad[dataIndex];
+
+          frequencies[`${i}`] = {
+            channelNumber: channel[dataIndex],
+            rxCellSizeDb: {
+              auto: true,
+              value: cellSize[dataIndex],
+            },
+            probeResponseThresholdDb: {
+              auto: true,
+              value: probeResponseThreshold[dataIndex],
+            },
+            clientDisconnectThresholdDb: {
+              auto: true,
+              value: clientDisconnectThreshold[dataIndex],
+            },
+            dropInSnrPercentage,
+            minLoadFactor,
+          };
+          updatedItems.push(frequencies);
+        });
+      }
+    });
+    return updatedItems;
+  };
 
   const updateEquipments = editedRowsArr => {
     updateEquipmentBulk({
@@ -246,13 +286,42 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
 
   const handleSaveChanges = updatedRows => {
     const editedRowsArr = [];
-    Object.keys(updatedRows).forEach(key => {
-      return editedRowsArr.push({
-        equipmentId: updatedRows[key].id,
-        perRadioDetails: formatRadioFrequencies(updatedRows[key]),
-      });
-    });
-    updateEquipments(editedRowsArr);
+    if (updatedRows.length > 0) {
+      updatedRows.map(
+        ({
+          id: equipmentId,
+          channel,
+          cellSize,
+          probeResponseThreshold,
+          clientDisconnectThreshold,
+          snrDrop,
+          minLoad,
+        }) => {
+          const updatedEuips = setUpdatedBulkEditTableData(
+            equipmentId,
+            channel,
+            cellSize,
+            probeResponseThreshold,
+            clientDisconnectThreshold,
+            snrDrop,
+            minLoad,
+            equipData && equipData.filterEquipment
+          );
+          const tempObj = {
+            equipmentId,
+            perRadioDetails: {},
+          };
+          updatedEuips.map(item => {
+            Object.keys(item).forEach(i => {
+              tempObj.perRadioDetails[i] = item[i];
+            });
+            return tempObj;
+          });
+          return editedRowsArr.push(tempObj);
+        }
+      );
+      updateEquipments(editedRowsArr);
+    }
   };
 
   const handleLoadMore = () => {
@@ -274,30 +343,39 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
     }
   };
 
-  useEffect(() => {
-    fetchFilterEquipment();
-  }, [locationIds]);
+  if (filterEquipmentLoading) {
+    return <Loading />;
+  }
 
   if (filterEquipmentError) {
+    if (
+      filterEquipmentError.message === '403: Forbidden' ||
+      filterEquipmentError.message === '401: Unauthorized'
+    ) {
+      return <Redirect to="/login" />;
+    }
     return (
-      <Alert
-        message="Error"
-        description="Failed to load equipment(s) data."
-        type="error"
-        showIcon
-      />
+      <Alert message="Error" description="Failed to load equipments data." type="error" showIcon />
     );
   }
 
   return (
     <BulkEditAccessPoints
       tableColumns={accessPointsChannelTableColumns}
-      tableData={formattedTableData}
+      tableData={
+        equipData &&
+        equipData.filterEquipment &&
+        setAccessPointsBulkEditTableData(equipData && equipData.filterEquipment)
+      }
       onLoadMore={handleLoadMore}
-      isLastPage={equipData?.filterEquipment?.context?.lastPage}
+      isLastPage={
+        equipData &&
+        equipData.filterEquipment &&
+        equipData.filterEquipment.context &&
+        equipData.filterEquipment.context.lastPage
+      }
       onSaveChanges={handleSaveChanges}
       breadcrumbPath={getBreadcrumbPath(id, locations)}
-      loading={filterEquipmentLoading}
     />
   );
 };

app/containers/Network/containers/BulkEditAccessPoints/index.module.scss

@@ -1,4 +1,5 @@
 .tabColumn {
   display: flex;
   flex-direction: column;
+  padding: 0 30px;
 }

app/containers/Network/containers/ClientDeviceDetails/index.js

@@ -2,80 +2,73 @@ import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import moment from 'moment';
-import { Alert, notification } from 'antd';
-import {
-  Loading,
-  ClientDeviceDetails as ClientDevicesDetailsPage,
-} from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { ClientDeviceDetails as ClientDevicesDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 import { GET_CLIENT_SESSION, FILTER_SERVICE_METRICS } from 'graphql/queries';
+import { withQuery } from 'containers/QueryWrapper';
 
 const toTime = moment();
 const fromTime = moment().subtract(4, 'hours');
 
-const ClientDeviceDetails = () => {
-  const { id } = useParams();
-  const { customerId } = useContext(UserContext);
-  const { loading, error, data, refetch } = useQuery(GET_CLIENT_SESSION, {
-    variables: { customerId, macAddress: id },
-    errorPolicy: 'all',
-  });
-  const {
-    loading: metricsLoading,
-    error: metricsError,
-    data: metricsData,
-    refetch: metricsRefetch,
-  } = useQuery(FILTER_SERVICE_METRICS, {
-    variables: {
-      customerId,
-      fromTime: fromTime.valueOf().toString(),
-      toTime: toTime.valueOf().toString(),
-      clientMacs: [id],
-      dataTypes: ['Client'],
-      limit: 1000,
-    },
-  });
+const ClientDeviceDetails = withQuery(
+  ({ data, refetch }) => {
+    const { id } = useParams();
+    const { customerId } = useContext(UserContext);
 
-  const handleOnRefresh = () => {
-    metricsRefetch();
-    refetch()
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Successfully reloaded.',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Could not be reloaded.',
+    const {
+      loading: metricsLoading,
+      error: metricsError,
+      data: metricsData,
+      refetch: metricsRefetch,
+    } = useQuery(FILTER_SERVICE_METRICS, {
+      variables: {
+        customerId,
+        fromTime: fromTime.valueOf().toString(),
+        toTime: toTime.valueOf().toString(),
+        clientMacs: [id],
+        dataTypes: ['Client'],
+        limit: 1000,
+      },
+    });
+
+    const handleOnRefresh = () => {
+      metricsRefetch();
+      refetch()
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Successfully reloaded.',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Could not be reloaded.',
+          })
+        );
+    };
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error && !data?.getClientSession) {
     return (
-      <Alert message="Error" description="Failed to load Client Device." type="error" showIcon />
+      <ClientDevicesDetailsPage
+        data={data.getClientSession[0]}
+        onRefresh={handleOnRefresh}
+        metricsLoading={metricsLoading}
+        metricsError={metricsError}
+        metricsData={
+          metricsData && metricsData.filterServiceMetrics && metricsData.filterServiceMetrics.items
+        }
+        historyDate={{ toTime, fromTime }}
+      />
     );
+  },
+  GET_CLIENT_SESSION,
+  () => {
+    const { id } = useParams();
+    const { customerId } = useContext(UserContext);
+    return { customerId, macAddress: id, errorPolicy: 'all' };
   }
-
-  return (
-    <ClientDevicesDetailsPage
-      data={data.getClientSession[0]}
-      onRefresh={handleOnRefresh}
-      metricsLoading={metricsLoading}
-      metricsError={metricsError}
-      metricsData={
-        metricsData && metricsData.filterServiceMetrics && metricsData.filterServiceMetrics.items
-      }
-      historyDate={{ toTime, fromTime }}
-    />
-  );
-};
+);
 
 export default ClientDeviceDetails;

app/containers/Network/containers/ClientDevices/index.js

@@ -5,7 +5,6 @@ import { notification } from 'antd';
 
 import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
 
-import { ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
 
@@ -23,11 +22,7 @@ const clientDevicesTableColumns = [
   { title: 'HOST NAME', dataIndex: 'hostname' },
   { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
   { title: 'SSID', dataIndex: 'ssid' },
-  {
-    title: 'BAND',
-    dataIndex: 'radioType',
-    render: band => USER_FRIENDLY_RADIOS[band],
-  },
+  { title: 'BAND', dataIndex: 'radioType' },
   { title: 'SIGNAL', dataIndex: 'signal' },
   {
     title: 'STATUS',
@@ -101,7 +96,7 @@ const ClientDevices = ({ checkedLocations }) => {
 
   return (
     <NetworkTableContainer
-      activeTab={ROUTES.clientDevices}
+      activeTab="/network/client-devices"
       tableColumns={clientDevicesTableColumns}
       tableData={data?.filterClientSessions?.items}
       onLoadMore={handleLoadMore}

app/containers/Network/index.js

@@ -1,15 +1,16 @@
 import React, { useMemo, useContext, useState } from 'react';
 import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
 import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
-import { Alert, notification } from 'antd';
+import { notification } from 'antd';
 import _ from 'lodash';
-import { Network as NetworkPage, PopoverMenu, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { Network as NetworkPage, PopoverMenu } from '@tip-wlan/wlan-cloud-ui-library';
 
 import AccessPointDetails from 'containers/Network/containers/AccessPointDetails';
 import AccessPoints from 'containers/Network/containers/AccessPoints';
 import ClientDevices from 'containers/Network/containers/ClientDevices';
 import ClientDeviceDetails from 'containers/Network/containers/ClientDeviceDetails';
 import BulkEditAccessPoints from 'containers/Network/containers/BulkEditAccessPoints';
+import { withQuery } from 'containers/QueryWrapper';
 
 import UserContext from 'contexts/UserContext';
 import {
@@ -26,301 +27,300 @@ import {
 } from 'graphql/mutations';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
 
-const Network = () => {
-  const { path } = useRouteMatch();
-  const { customerId } = useContext(UserContext);
-  const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
-    variables: { customerId },
-  });
-  const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'equipment_ap' },
-    }
-  );
+const Network = withQuery(
+  ({ data, refetch }) => {
+    const { path } = useRouteMatch();
+    const { customerId } = useContext(UserContext);
 
-  const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
-  const [createLocation] = useMutation(CREATE_LOCATION);
-  const [updateLocation] = useMutation(UPDATE_LOCATION);
-  const [deleteLocation] = useMutation(DELETE_LOCATION);
-  const [checkedLocations, setCheckedLocations] = useState([]);
-  const [deleteModal, setDeleteModal] = useState(false);
-  const [editModal, setEditModal] = useState(false);
-  const [addModal, setAddModal] = useState(false);
-  const [apModal, setApModal] = useState(false);
-
-  const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
-    refetchQueries: [
+    const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
+      GET_ALL_PROFILES(),
       {
-        query: FILTER_EQUIPMENT,
-        variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
-      },
-    ],
-  });
-
-  const handleGetSingleLocation = id => {
-    getLocation({
-      variables: { id },
-    });
-  };
-
-  const formatLocationListForTree = (list = []) => {
-    const checkedTreeLocations = ['0'];
-    list.forEach(ele => {
-      checkedTreeLocations.push(ele.id);
-    });
-    setCheckedLocations(checkedTreeLocations);
-
-    function unflatten(array, p, t) {
-      let tree = typeof t !== 'undefined' ? t : [];
-      const parent = typeof p !== 'undefined' ? p : { id: '0' };
-      let children = _.filter(array, child => child.parentId === parent.id);
-      children = children.map(c => ({
-        title: (
-          <PopoverMenu
-            locationId={c.id}
-            locationType={c.locationType}
-            setAddModal={setAddModal}
-            setEditModal={setEditModal}
-            setDeleteModal={setDeleteModal}
-            setApModal={setApModal}
-          >
-            {c.name}
-          </PopoverMenu>
-        ),
-        value: `${c.id}`,
-        key: c.id,
-        ...c,
-      }));
-      if (!_.isEmpty(children)) {
-        if (parent.id === '0') {
-          tree = children;
-        } else {
-          parent.children = children;
-        }
-        _.each(children, child => unflatten(array, child));
+        variables: { customerId, type: 'equipment_ap' },
       }
-      return tree;
-    }
-    return [
-      {
-        title: (
-          <PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
-            Network
-          </PopoverMenu>
-        ),
-        id: '0',
-        key: '0',
-        value: '0',
-        children: unflatten(list),
-      },
-    ];
-  };
+    );
 
-  const handleAddLocation = ({ location }) => {
-    setAddModal(false);
-    let id;
-    let locationType;
+    const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
+    const [createLocation] = useMutation(CREATE_LOCATION);
+    const [updateLocation] = useMutation(UPDATE_LOCATION);
+    const [deleteLocation] = useMutation(DELETE_LOCATION);
+    const [checkedLocations, setCheckedLocations] = useState([]);
+    const [deleteModal, setDeleteModal] = useState(false);
+    const [editModal, setEditModal] = useState(false);
+    const [addModal, setAddModal] = useState(false);
+    const [apModal, setApModal] = useState(false);
 
-    // adding location from root makes selecetedLocation null so we check for that
-    if (selectedLocation && selectedLocation.getLocation) {
-      id = selectedLocation.getLocation.id;
-      locationType = 'SITE';
-    } else {
-      id = '0';
-      locationType = 'COUNTRY';
-    }
+    const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
+      refetchQueries: [
+        {
+          query: FILTER_EQUIPMENT,
+          variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
+        },
+      ],
+    });
 
-    createLocation({
-      variables: {
-        locationType,
-        customerId,
-        parentId: id,
-        name: location,
-      },
-    })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Location successfully added.',
-        });
-        refetch();
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Location could not be added.',
-        })
-      );
-  };
-
-  const handleEditLocation = ({ name }) => {
-    setEditModal(false);
-    const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;
-
-    updateLocation({
-      variables: {
-        customerId,
-        id,
-        parentId,
-        name,
-        locationType,
-        lastModifiedTimestamp,
-      },
-    })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Location successfully edited.',
-        });
-        refetch();
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Location could not be edited.',
-        })
-      );
-  };
-
-  const handleDeleteLocation = () => {
-    setDeleteModal(false);
-    const { id } = selectedLocation.getLocation;
-
-    deleteLocation({ variables: { id } })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Location successfully deleted.',
-        });
-        refetch();
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Location could not be deleted.',
-        })
-      );
-  };
-
-  const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
-    setApModal(false);
-    const { id: locationId } = selectedLocation.getLocation;
-
-    createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Equipment successfully created.',
-        });
-        refetch();
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment could not be created.',
-        })
-      );
-  };
-
-  const onSelect = (selectedKeys, info) => {
-    const { id } = info.node;
-    handleGetSingleLocation(id);
-  };
-
-  const onCheck = checkedKeys => {
-    setCheckedLocations(checkedKeys.checked);
-  };
-
-  const handleFetchProfiles = e => {
-    if (apProfiles.getAllProfiles.context.lastPage) {
-      return false;
-    }
-
-    e.persist();
-    const { target } = e;
-
-    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-      fetchMore({
-        variables: { context: { ...apProfiles.getAllProfiles.context } },
-        updateQuery: updateQueryGetAllProfiles,
+    const handleGetSingleLocation = id => {
+      getLocation({
+        variables: { id },
       });
-    }
+    };
 
-    return true;
-  };
+    const formatLocationListForTree = (list = []) => {
+      const checkedTreeLocations = ['0'];
+      list.forEach(ele => {
+        checkedTreeLocations.push(ele.id);
+      });
+      setCheckedLocations(checkedTreeLocations);
 
-  const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
-    data,
-  ]);
+      function unflatten(array, p, t) {
+        let tree = typeof t !== 'undefined' ? t : [];
+        const parent = typeof p !== 'undefined' ? p : { id: '0' };
+        let children = _.filter(array, child => child.parentId === parent.id);
+        children = children.map(c => ({
+          title: (
+            <PopoverMenu
+              locationId={c.id}
+              locationType={c.locationType}
+              setAddModal={setAddModal}
+              setEditModal={setEditModal}
+              setDeleteModal={setDeleteModal}
+              setApModal={setApModal}
+            >
+              {c.name}
+            </PopoverMenu>
+          ),
+          value: `${c.id}`,
+          key: c.id,
+          ...c,
+        }));
+        if (!_.isEmpty(children)) {
+          if (parent.id === '0') {
+            tree = children;
+          } else {
+            parent.children = children;
+          }
+          _.each(children, child => unflatten(array, child));
+        }
+        return tree;
+      }
+      return [
+        {
+          title: (
+            <PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
+              Network
+            </PopoverMenu>
+          ),
+          id: '0',
+          key: '0',
+          value: '0',
+          children: unflatten(list),
+        },
+      ];
+    };
 
-  if (loading) {
-    return <Loading />;
+    const handleAddLocation = ({ location }) => {
+      setAddModal(false);
+      let id;
+      let locationType;
+
+      // adding location from root makes selecetedLocation null so we check for that
+      if (selectedLocation && selectedLocation.getLocation) {
+        id = selectedLocation.getLocation.id;
+        locationType = 'SITE';
+      } else {
+        id = '0';
+        locationType = 'COUNTRY';
+      }
+
+      createLocation({
+        variables: {
+          locationType,
+          customerId,
+          parentId: id,
+          name: location,
+        },
+      })
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Location successfully added.',
+          });
+          refetch();
+        })
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Location could not be added.',
+          })
+        );
+    };
+
+    const handleEditLocation = ({ name }) => {
+      setEditModal(false);
+      const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;
+
+      updateLocation({
+        variables: {
+          customerId,
+          id,
+          parentId,
+          name,
+          locationType,
+          lastModifiedTimestamp,
+        },
+      })
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Location successfully edited.',
+          });
+          refetch();
+        })
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Location could not be edited.',
+          })
+        );
+    };
+
+    const handleDeleteLocation = () => {
+      setDeleteModal(false);
+      const { id } = selectedLocation.getLocation;
+
+      deleteLocation({ variables: { id } })
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Location successfully deleted.',
+          });
+          refetch();
+        })
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Location could not be deleted.',
+          })
+        );
+    };
+
+    const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
+      setApModal(false);
+      const { id: locationId } = selectedLocation.getLocation;
+
+      createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Equipment successfully created.',
+          });
+          refetch();
+        })
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Equipment could not be created.',
+          })
+        );
+    };
+
+    const onSelect = (selectedKeys, info) => {
+      const { id } = info.node;
+      handleGetSingleLocation(id);
+    };
+
+    const onCheck = checkedKeys => {
+      setCheckedLocations(checkedKeys.checked);
+    };
+
+    const handleFetchProfiles = e => {
+      if (apProfiles.getAllProfiles.context.lastPage) {
+        return false;
+      }
+
+      e.persist();
+      const { target } = e;
+
+      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+        fetchMore({
+          variables: { context: { ...apProfiles.getAllProfiles.context } },
+          updateQuery: updateQueryGetAllProfiles,
+        });
+      }
+
+      return true;
+    };
+
+    const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
+      data,
+    ]);
+
+    return (
+      <NetworkPage
+        onSelect={onSelect}
+        onCheck={onCheck}
+        checkedLocations={checkedLocations}
+        locations={locationsTree}
+        selectedLocation={selectedLocation && selectedLocation.getLocation}
+        addModal={addModal}
+        editModal={editModal}
+        deleteModal={deleteModal}
+        apModal={apModal}
+        setAddModal={setAddModal}
+        setEditModal={setEditModal}
+        setDeleteModal={setDeleteModal}
+        setApModal={setApModal}
+        onAddLocation={handleAddLocation}
+        onEditLocation={handleEditLocation}
+        onDeleteLocation={handleDeleteLocation}
+        onCreateEquipment={handleCreateEquipment}
+        profiles={
+          (apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []
+        }
+        loadingProfile={loadingProfile}
+        errorProfile={errorProfile}
+        onFetchMoreProfiles={handleFetchProfiles}
+        isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
+      >
+        <Switch>
+          <Route
+            exact
+            path={`${path}/access-points/bulk-edit/:id`}
+            render={props => (
+              <BulkEditAccessPoints
+                locations={locationsTree}
+                checkedLocations={checkedLocations}
+                {...props}
+              />
+            )}
+          />
+          <Route
+            exact
+            path={`${path}/access-points`}
+            render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
+          />
+          <Route
+            exact
+            path={`${path}/access-points/:id/:tab`}
+            render={props => <AccessPointDetails locations={locationsTree} {...props} />}
+          />
+
+          <Route
+            exact
+            path={`${path}/client-devices`}
+            render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
+          />
+          <Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
+          <Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
+          <Redirect from={path} to={`${path}/access-points`} />
+        </Switch>
+      </NetworkPage>
+    );
+  },
+  GET_ALL_LOCATIONS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId };
   }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load locations." type="error" showIcon />;
-  }
-
-  return (
-    <NetworkPage
-      onSelect={onSelect}
-      onCheck={onCheck}
-      checkedLocations={checkedLocations}
-      locations={locationsTree}
-      selectedLocation={selectedLocation && selectedLocation.getLocation}
-      addModal={addModal}
-      editModal={editModal}
-      deleteModal={deleteModal}
-      apModal={apModal}
-      setAddModal={setAddModal}
-      setEditModal={setEditModal}
-      setDeleteModal={setDeleteModal}
-      setApModal={setApModal}
-      onAddLocation={handleAddLocation}
-      onEditLocation={handleEditLocation}
-      onDeleteLocation={handleDeleteLocation}
-      onCreateEquipment={handleCreateEquipment}
-      profiles={(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []}
-      loadingProfile={loadingProfile}
-      errorProfile={errorProfile}
-      onFetchMoreProfiles={handleFetchProfiles}
-      isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
-    >
-      <Switch>
-        <Route
-          exact
-          path={`${path}/access-points/bulk-edit/:id`}
-          render={props => (
-            <BulkEditAccessPoints
-              locations={locationsTree}
-              checkedLocations={checkedLocations}
-              {...props}
-            />
-          )}
-        />
-        <Route
-          exact
-          path={`${path}/access-points`}
-          render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
-        />
-        <Route
-          exact
-          path={`${path}/access-points/:id/:tab`}
-          render={props => <AccessPointDetails locations={locationsTree} {...props} />}
-        />
-
-        <Route
-          exact
-          path={`${path}/client-devices`}
-          render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
-        />
-        <Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
-        <Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
-        <Redirect from={path} to={`${path}/access-points`} />
-      </Switch>
-    </NetworkPage>
-  );
-};
+);
 
 export default Network;

app/containers/ProfileDetails/index.js

@@ -1,14 +1,14 @@
 import React, { useState, useContext } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
 import { useQuery, useMutation, gql } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { ProfileDetails as ProfileDetailsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { ProfileDetails as ProfileDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
-import { ROUTES, AUTH_TOKEN } from 'constants/index';
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_PROFILES, GET_API_URL } from 'graphql/queries';
-import { fetchMoreProfiles } from 'graphql/functions';
-import { getItem } from 'utils/localStorage';
+import { GET_ALL_PROFILES } from 'graphql/queries';
+import { FILE_UPLOAD } from 'graphql/mutations';
+import { updateQueryGetAllProfiles } from 'graphql/functions';
+import { withQuery } from 'containers/QueryWrapper';
 
 const GET_PROFILE = gql`
   query GetProfile($id: ID!) {
@@ -23,16 +23,6 @@ const GET_PROFILE = gql`
         profileType
         details
       }
-      associatedSsidProfiles {
-        id
-        name
-        profileType
-        details
-      }
-      osuSsidProfile {
-        id
-        name
-      }
       childProfileIds
       createdTimestamp
       lastModifiedTimestamp
@@ -79,236 +69,179 @@ const DELETE_PROFILE = gql`
   }
 `;
 
-const ProfileDetails = () => {
-  const { customerId } = useContext(UserContext);
-  const { id } = useParams();
+const ProfileDetails = withQuery(
+  ({ data }) => {
+    const { customerId } = useContext(UserContext);
+    const { id } = useParams();
 
-  const [redirect, setRedirect] = useState(false);
+    const [redirect, setRedirect] = useState(false);
 
-  const { data: apiUrl } = useQuery(GET_API_URL);
+    const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
+      variables: { customerId, type: 'ssid' },
+    });
 
-  const { loading, error, data } = useQuery(GET_PROFILE, {
-    variables: { id },
-    fetchPolicy: 'network-only',
-  });
+    const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
+      GET_ALL_PROFILES(),
+      {
+        variables: { customerId, type: 'radius' },
+      }
+    );
 
-  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'ssid' },
-    fetchPolicy: 'network-only',
-  });
+    const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
+      GET_ALL_PROFILES(),
+      {
+        variables: { customerId, type: 'captive_portal' },
+      }
+    );
 
-  const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'radius' },
-      fetchPolicy: 'network-only',
-    }
-  );
+    const [updateProfile] = useMutation(UPDATE_PROFILE);
+    const [deleteProfile] = useMutation(DELETE_PROFILE);
 
-  const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'captive_portal' },
-      fetchPolicy: 'network-only',
-    }
-  );
+    const [fileUpload] = useMutation(FILE_UPLOAD);
 
-  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'passpoint_venue' },
-    fetchPolicy: 'network-only',
-  });
+    const handleDeleteProfile = () => {
+      deleteProfile({ variables: { id } })
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Profile successfully deleted.',
+          });
 
-  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_operator' },
-      fetchPolicy: 'network-only',
-    }
-  );
-
-  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_osu_id_provider' },
-      fetchPolicy: 'network-only',
-    }
-  );
-
-  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'rf' },
-    fetchPolicy: 'network-only',
-  });
-
-  const [updateProfile] = useMutation(UPDATE_PROFILE);
-  const [deleteProfile] = useMutation(DELETE_PROFILE);
-
-  const handleDeleteProfile = () => {
-    deleteProfile({ variables: { id } })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Profile successfully deleted.',
-        });
-
-        setRedirect(true);
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Profile could not be deleted.',
+          setRedirect(true);
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Profile could not be deleted.',
+          })
+        );
+    };
 
-  const handleUpdateProfile = (
-    name,
-    details,
-    childProfileIds = data.getProfile.childProfileIds
-  ) => {
-    updateProfile({
-      variables: {
-        ...data.getProfile,
-        name,
-        childProfileIds,
-        details,
-      },
-    })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Profile successfully updated.',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Profile could not be updated.',
-        })
-      );
-  };
-
-  const handleFileUpload = async (fileName, file) => {
-    const token = getItem(AUTH_TOKEN);
-
-    if (apiUrl?.getApiUrl) {
-      fetch(`${apiUrl?.getApiUrl}filestore/${fileName}`, {
-        method: 'POST',
-        headers: {
-          Authorization: token ? `Bearer ${token.access_token}` : '',
-          'Content-Type': 'application/octet-stream',
+    const handleUpdateProfile = (
+      name,
+      details,
+      childProfileIds = data.getProfile.childProfileIds
+    ) => {
+      updateProfile({
+        variables: {
+          ...data.getProfile,
+          name,
+          childProfileIds,
+          details,
         },
-        body: file,
       })
-        .then(response => response.json())
-        .then(resp => {
-          if (resp?.success) {
-            notification.success({
-              message: 'Success',
-              description: 'File successfully uploaded.',
-            });
-          } else {
-            notification.error({
-              message: 'Error',
-              description: 'File could not be uploaded.',
-            });
-          }
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Profile successfully updated.',
+          });
         })
-        .catch(() => {
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Profile could not be updated.',
+          })
+        );
+    };
+
+    const handleFileUpload = (fileName, file) =>
+      fileUpload({ variables: { fileName, file } })
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'File successfully uploaded.',
+          });
+        })
+        .catch(() =>
           notification.error({
             message: 'Error',
             description: 'File could not be uploaded.',
-          });
+          })
+        );
+
+    const handleFetchProfiles = e => {
+      if (ssidProfiles.getAllProfiles.context.lastPage) {
+        return false;
+      }
+
+      e.persist();
+      const { target } = e;
+
+      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+        fetchMore({
+          variables: { context: { ...ssidProfiles.getAllProfiles.context } },
+          updateQuery: updateQueryGetAllProfiles,
         });
-    } else {
-      notification.error({
-        message: 'Error',
-        description: 'File could not be uploaded.',
-      });
-    }
-  };
+      }
 
-  const handleDownloadFile = async name => {
-    const token = getItem(AUTH_TOKEN);
-    if (apiUrl?.getApiUrl) {
-      return fetch(`${apiUrl?.getApiUrl}filestore/${encodeURIComponent(name)}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/octet-stream',
-          Authorization: token ? `Bearer ${token.access_token}` : '',
-        },
-      })
-        .then(response => response.blob())
-        .then(blob => {
-          return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onloadend = () => resolve(reader.result);
-            reader.onerror = reject;
-            reader.readAsDataURL(blob);
-          });
-        })
-        .catch(() => {
-          notification.error({
-            message: 'Error',
-            description: 'File could not be retrieved.',
-          });
+      return true;
+    };
+
+    const handleFetchRadiusProfiles = e => {
+      if (radiusProfiles.getAllProfiles.context.lastPage) {
+        return false;
+      }
+
+      e.persist();
+      const { target } = e;
+
+      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+        fetchMoreRadiusProfiles({
+          variables: { context: { ...radiusProfiles.getAllProfiles.context } },
+          updateQuery: updateQueryGetAllProfiles,
         });
+      }
+
+      return true;
+    };
+
+    const handleFetchCaptiveProfiles = e => {
+      if (captiveProfiles.getAllProfiles.context.lastPage) {
+        return false;
+      }
+
+      e.persist();
+      const { target } = e;
+
+      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+        fetchMoreCaptiveProfiles({
+          variables: { context: { ...captiveProfiles.getAllProfiles.context } },
+          updateQuery: updateQueryGetAllProfiles,
+        });
+      }
+
+      return true;
+    };
+
+    if (redirect) {
+      return <Redirect to="/profiles" />;
     }
-    return notification.error({
-      message: 'Error',
-      description: 'File could not be retrieved.',
-    });
-  };
 
-  const handleFetchMoreProfiles = (e, key) => {
-    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
-    else if (key === 'captive_portal')
-      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
-    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
-    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
-    else if (key === 'passpoint_operator')
-      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
-    else if (key === 'passpoint_osu_id_provider')
-      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
-    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
-  };
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
     return (
-      <Alert message="Error" description="Failed to load profile data." type="error" showIcon />
+      <ProfileDetailsPage
+        name={data.getProfile.name}
+        profileType={data.getProfile.profileType}
+        details={data.getProfile.details}
+        childProfileIds={data.getProfile.childProfileIds}
+        onDeleteProfile={handleDeleteProfile}
+        onUpdateProfile={handleUpdateProfile}
+        ssidProfiles={
+          (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
+        }
+        radiusProfiles={radiusProfiles?.getAllProfiles?.items}
+        captiveProfiles={captiveProfiles?.getAllProfiles?.items}
+        fileUpload={handleFileUpload}
+        onFetchMoreProfiles={handleFetchProfiles}
+        onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
+        onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
+      />
     );
+  },
+  GET_PROFILE,
+  () => {
+    const { id } = useParams();
+    return { id, fetchPolicy: 'network-only' };
   }
-
-  if (redirect) {
-    return <Redirect to={ROUTES.profiles} />;
-  }
-
-  return (
-    <ProfileDetailsPage
-      name={data.getProfile.name}
-      profileType={data.getProfile.profileType}
-      details={data.getProfile.details}
-      childProfiles={data.getProfile.childProfiles}
-      childProfileIds={data.getProfile.childProfileIds}
-      onDeleteProfile={handleDeleteProfile}
-      onUpdateProfile={handleUpdateProfile}
-      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
-      rfProfiles={rfProfiles?.getAllProfiles?.items}
-      radiusProfiles={radiusProfiles?.getAllProfiles?.items}
-      captiveProfiles={captiveProfiles?.getAllProfiles?.items}
-      venueProfiles={venueProfiles?.getAllProfiles?.items}
-      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
-      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
-      associatedSsidProfiles={data.getProfile?.associatedSsidProfiles}
-      osuSsidProfile={data.getProfile?.osuSsidProfile}
-      fileUpload={handleFileUpload}
-      onFetchMoreProfiles={handleFetchMoreProfiles}
-      onDownloadFile={handleDownloadFile}
-    />
-  );
-};
+);
 
 export default ProfileDetails;

app/containers/Profiles/index.js

@@ -1,12 +1,13 @@
 import React, { useContext, useEffect } from 'react';
-import { useQuery, useMutation, gql } from '@apollo/client';
+import { useMutation, gql } from '@apollo/client';
 import { useLocation } from 'react-router-dom';
-import { Alert, notification } from 'antd';
-import { Profile as ProfilePage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { Profile as ProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { GET_ALL_PROFILES } from 'graphql/queries';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
 
 const DELETE_PROFILE = gql`
   mutation DeleteProfile($id: ID!) {
@@ -16,94 +17,85 @@ const DELETE_PROFILE = gql`
   }
 `;
 
-const Profiles = () => {
-  const { customerId } = useContext(UserContext);
-  const { loading, error, data, refetch, fetchMore } = useQuery(
-    GET_ALL_PROFILES(`equipmentCount`),
-    {
-      variables: { customerId },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const [deleteProfile] = useMutation(DELETE_PROFILE);
-  const location = useLocation();
+const Profiles = withQuery(
+  ({ data, fetchMore, refetch }) => {
+    const [deleteProfile] = useMutation(DELETE_PROFILE);
+    const { customerId } = useContext(UserContext);
+    const location = useLocation();
 
-  useEffect(() => {
-    if (location.state && location.state.refetch) {
+    useEffect(() => {
+      if (location.state && location.state.refetch) {
+        refetch({
+          variables: { refresh: Date.now() },
+        });
+      }
+    }, []);
+
+    const reloadTable = () => {
       refetch({
         variables: { refresh: Date.now() },
-      });
-    }
-  }, []);
-
-  const reloadTable = () => {
-    refetch({
-      variables: { refresh: Date.now() },
-    })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Profiles reloaded.',
-        });
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Profiles could not be reloaded.',
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Profiles reloaded.',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Profiles could not be reloaded.',
+          })
+        );
+    };
 
-  const handleLoadMore = () => {
-    if (!data.getAllProfiles.context.lastPage) {
-      fetchMore({
-        variables: { context: { ...data.getAllProfiles.context } },
-        updateQuery: updateQueryGetAllProfiles,
-      });
-    }
-  };
-
-  const handleDeleteProfile = id => {
-    deleteProfile({
-      variables: { id },
-      refetchQueries: [
-        {
-          query: GET_ALL_PROFILES(`equipmentCount`),
-          variables: { customerId },
-        },
-      ],
-    })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Profile successfully deleted.',
+    const handleLoadMore = () => {
+      if (!data.getAllProfiles.context.lastPage) {
+        fetchMore({
+          variables: { context: { ...data.getAllProfiles.context } },
+          updateQuery: updateQueryGetAllProfiles,
         });
+      }
+    };
+
+    const handleDeleteProfile = id => {
+      deleteProfile({
+        variables: { id },
+        refetchQueries: [
+          {
+            query: GET_ALL_PROFILES(`equipmentCount`),
+            variables: { customerId },
+          },
+        ],
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Profile could not be deleted.',
+        .then(() => {
+          notification.success({
+            message: 'Success',
+            description: 'Profile successfully deleted.',
+          });
         })
-      );
-  };
-
-  if (loading) {
-    return <Loading />;
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Profile could not be deleted.',
+          })
+        );
+    };
+    return (
+      <ProfilePage
+        data={data.getAllProfiles.items}
+        onReload={reloadTable}
+        isLastPage={data?.getAllProfiles?.context?.lastPage}
+        onDeleteProfile={handleDeleteProfile}
+        onLoadMore={handleLoadMore}
+      />
+    );
+  },
+  GET_ALL_PROFILES(`equipmentCount`),
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId, fetchPolicy: 'network-only' };
   }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load profiles." type="error" showIcon />;
-  }
-
-  return (
-    <ProfilePage
-      data={data.getAllProfiles.items}
-      onReload={reloadTable}
-      isLastPage={data?.getAllProfiles?.context?.lastPage}
-      onDeleteProfile={handleDeleteProfile}
-      onLoadMore={handleLoadMore}
-    />
-  );
-};
+);
 
 export default Profiles;

app/containers/QueryWrapper/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Alert } from 'antd';
+import { Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { useQuery } from '@apollo/client';
+import { Redirect } from 'react-router-dom';
+
+export const withQuery = (Comp, query, getVariables) => props => {
+  const { loading, error, data, refetch, fetchMore } = useQuery(query, {
+    variables: getVariables(),
+  });
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
+      return <Redirect to="/login" />;
+    }
+
+    return <Alert message="Error" description="Failed to load profiles." type="error" showIcon />;
+  }
+
+  return <Comp {...props} data={data} fetchMore={fetchMore} refetch={refetch} />;
+};

app/containers/System/containers/AutoProvision/index.js

@@ -1,98 +1,82 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { AutoProvision as AutoProvisionPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 import { GET_CUSTOMER, GET_ALL_LOCATIONS, GET_ALL_PROFILES } from 'graphql/queries';
 import { UPDATE_CUSTOMER } from 'graphql/mutations';
-import { fetchMoreProfiles } from 'graphql/functions';
-import { formatLocations } from 'utils/locations';
+import { withQuery } from 'containers/QueryWrapper';
 
-const AutoProvision = () => {
-  const { customerId } = useContext(UserContext);
-  const { data, loading, error, refetch } = useQuery(GET_CUSTOMER, {
-    variables: { id: customerId },
-  });
-  const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
+const AutoProvision = withQuery(
+  ({ data, refetch }) => {
+    const { customerId } = useContext(UserContext);
+    const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
 
-  const { data: dataLocation, loading: loadingLocation, error: errorLocation } = useQuery(
-    GET_ALL_LOCATIONS,
-    {
-      variables: { customerId },
-    }
-  );
-  const { data: dataProfile, loading: loadingProfile, error: errorProfile, fetchMore } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'equipment_ap', limit: 100 },
-    }
-  );
-
-  const handleUpdateCustomer = (
-    id,
-    email,
-    name,
-    details,
-    createdTimestamp,
-    lastModifiedTimestamp
-  ) => {
-    updateCustomer({
-      variables: {
-        id,
-        email,
-        name,
-        details,
-        createdTimestamp,
-        lastModifiedTimestamp,
-      },
-    })
-      .then(() => {
-        refetch();
-        notification.success({
-          message: 'Success',
-          description: 'Settings successfully updated.',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Settings could not be updated.',
-        })
-      );
-  };
-
-  const handleFetchMoreProfiles = e => {
-    fetchMoreProfiles(e, dataProfile, fetchMore);
-  };
-
-  const locationsTree = useMemo(() => {
-    return formatLocations(dataLocation?.getAllLocations, true);
-  }, [dataLocation?.getAllLocations]);
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return (
-      <Alert message="Error" description="Failed to load Customer Data." type="error" showIcon />
+    const { data: dataLocation, loading: loadingLoaction, error: errorLocation } = useQuery(
+      GET_ALL_LOCATIONS,
+      {
+        variables: { customerId },
+      }
+    );
+    const { data: dataProfile, loading: loadingProfile, error: errorProfile } = useQuery(
+      GET_ALL_PROFILES(),
+      {
+        variables: { customerId, type: 'equipment_ap', limit: 100 },
+      }
     );
-  }
 
-  return (
-    <AutoProvisionPage
-      data={data?.getCustomer}
-      locationsTree={locationsTree}
-      dataProfile={dataProfile?.getAllProfiles?.items}
-      loadingLocation={loadingLocation}
-      loadingProfile={loadingProfile}
-      errorLocation={errorLocation}
-      errorProfile={errorProfile}
-      onUpdateCustomer={handleUpdateCustomer}
-      onFetchMoreProfiles={handleFetchMoreProfiles}
-    />
-  );
-};
+    const handleUpdateCustomer = (
+      id,
+      email,
+      name,
+      details,
+      createdTimestamp,
+      lastModifiedTimestamp
+    ) => {
+      updateCustomer({
+        variables: {
+          id,
+          email,
+          name,
+          details,
+          createdTimestamp,
+          lastModifiedTimestamp,
+        },
+      })
+        .then(() => {
+          refetch();
+          notification.success({
+            message: 'Success',
+            description: 'Settings successfully updated.',
+          });
+        })
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Settings could not be updated.',
+          })
+        );
+    };
+
+    return (
+      <AutoProvisionPage
+        data={data && data.getCustomer}
+        dataLocation={dataLocation && dataLocation.getAllLocations}
+        dataProfile={dataProfile && dataProfile.getAllProfiles.items}
+        loadingLoaction={loadingLoaction}
+        loadingProfile={loadingProfile}
+        errorLocation={errorLocation}
+        errorProfile={errorProfile}
+        onUpdateCustomer={handleUpdateCustomer}
+      />
+    );
+  },
+  GET_CUSTOMER,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { id: customerId };
+  }
+);
 
 export default AutoProvision;

app/containers/System/containers/BlockedList/index.js

@@ -1,78 +1,76 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { BlockedList as BlockedListPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { useMutation } from '@apollo/client';
+import { notification } from 'antd';
+import { BlockedList as BlockedListPage } from '@tip-wlan/wlan-cloud-ui-library';
 import { GET_BLOCKED_CLIENTS } from 'graphql/queries';
 import { UPDATE_CLIENT, ADD_BLOCKED_CLIENT } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
 
-const BlockedList = () => {
-  const { customerId } = useContext(UserContext);
-  const { data, error, loading, refetch } = useQuery(GET_BLOCKED_CLIENTS, {
-    variables: { customerId },
-  });
-  const [addClient] = useMutation(ADD_BLOCKED_CLIENT);
-  const [updateClient] = useMutation(UPDATE_CLIENT);
+const BlockedList = withQuery(
+  ({ refetch, data }) => {
+    const { customerId } = useContext(UserContext);
+    const [addClient] = useMutation(ADD_BLOCKED_CLIENT);
+    const [updateClient] = useMutation(UPDATE_CLIENT);
 
-  const handleAddClient = macAddress => {
-    addClient({
-      variables: {
-        customerId,
-        macAddress,
-      },
-    })
-      .then(() => {
-        refetch();
-        notification.success({
-          message: 'Success',
-          description: 'Client successfully added to Blocked List',
-        });
+    const handleAddClient = macAddress => {
+      addClient({
+        variables: {
+          customerId,
+          macAddress,
+        },
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Client could not be added to Blocked List',
+        .then(() => {
+          refetch();
+          notification.success({
+            message: 'Success',
+            description: 'Client successfully added to Blocked List',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Client could not be added to Blocked List',
+          })
+        );
+    };
 
-  const handleUpdateClient = (macAddress, details) => {
-    updateClient({
-      variables: {
-        customerId,
-        macAddress,
-        details,
-      },
-    })
-      .then(() => {
-        refetch();
-        notification.success({
-          message: 'Success',
-          description: 'Client successfully removed from Blocked List',
-        });
+    const handleUpdateClient = (macAddress, details) => {
+      updateClient({
+        variables: {
+          customerId,
+          macAddress,
+          details,
+        },
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Client could not be removed from Blocked List',
+        .then(() => {
+          refetch();
+          notification.success({
+            message: 'Success',
+            description: 'Client successfully removed from Blocked List',
+          });
         })
-      );
-  };
+        .catch(() =>
+          notification.error({
+            message: 'Error',
+            description: 'Client could not be removed from Blocked List',
+          })
+        );
+    };
 
-  if (loading) return <Loading />;
-
-  if (error)
     return (
-      <Alert message="Error" description="Failed to load Client Data." type="error" showIcon />
+      <BlockedListPage
+        data={data && data.getBlockedClients}
+        onUpdateClient={handleUpdateClient}
+        onAddClient={handleAddClient}
+      />
     );
-
-  return (
-    <BlockedListPage
-      data={data && data.getBlockedClients}
-      onUpdateClient={handleUpdateClient}
-      onAddClient={handleAddClient}
-    />
-  );
-};
+  },
+  GET_BLOCKED_CLIENTS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return customerId;
+  }
+);
 
 export default BlockedList;

app/containers/System/containers/Firmware/index.js

@@ -22,7 +22,7 @@ const Firmware = () => {
   const [
     getAllFirmware,
     { data: firmwareVersionData, loading: firmwareVersionLoading },
-  ] = useLazyQuery(GET_ALL_FIRMWARE, { fetchPolicy: 'network-only' });
+  ] = useLazyQuery(GET_ALL_FIRMWARE);
 
   const {
     data: trackAssignmentData,

app/contexts/UserProvider/index.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RolesProvider } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 
-const UserProvider = ({ children, id, email, roles, customerId, updateUser, updateToken }) => (
-  <UserContext.Provider value={{ id, email, roles, customerId, updateUser, updateToken }}>
-    <RolesProvider role={roles}>{children}</RolesProvider>
+const UserProvider = ({ children, id, email, role, customerId, updateUser, updateToken }) => (
+  <UserContext.Provider value={{ id, email, role, customerId, updateUser, updateToken }}>
+    {children}
   </UserContext.Provider>
 );
 
@@ -16,14 +15,14 @@ UserProvider.propTypes = {
   updateToken: PropTypes.func.isRequired,
   id: PropTypes.number,
   email: PropTypes.string,
-  roles: PropTypes.instanceOf(Array),
+  role: PropTypes.string,
   customerId: PropTypes.number,
 };
 
 UserProvider.defaultProps = {
   id: null,
   email: null,
-  roles: [],
+  role: null,
   customerId: null,
 };
 

app/graphql/functions.js

@@ -10,21 +10,3 @@ export const updateQueryGetAllProfiles = (previousResult, { fetchMoreResult }) =
     },
   };
 };
-
-export const fetchMoreProfiles = (e, profile, fetchMore) => {
-  if (profile.getAllProfiles.context.lastPage) {
-    return false;
-  }
-
-  e.persist();
-  const { target } = e;
-
-  if (target.scrollTop + target.offsetHeight + 10 >= target.scrollHeight) {
-    fetchMore({
-      variables: { context: { ...profile.getAllProfiles.context } },
-      updateQuery: updateQueryGetAllProfiles,
-    });
-  }
-
-  return true;
-};

app/graphql/mutations.js

@@ -255,62 +255,6 @@ export const CREATE_EQUIPMENT = gql`
   }
 `;
 
-export const UPDATE_EQUIPMENT = gql`
-  mutation UpdateEquipment(
-    $id: ID!
-    $equipmentType: String!
-    $inventoryId: String!
-    $customerId: ID!
-    $profileId: ID!
-    $locationId: ID!
-    $name: String!
-    $baseMacAddress: String
-    $latitude: String
-    $longitude: String
-    $serial: String
-    $lastModifiedTimestamp: String
-    $details: JSONObject
-  ) {
-    updateEquipment(
-      id: $id
-      equipmentType: $equipmentType
-      inventoryId: $inventoryId
-      customerId: $customerId
-      profileId: $profileId
-      locationId: $locationId
-      name: $name
-      baseMacAddress: $baseMacAddress
-      latitude: $latitude
-      longitude: $longitude
-      serial: $serial
-      lastModifiedTimestamp: $lastModifiedTimestamp
-      details: $details
-    ) {
-      id
-      equipmentType
-      inventoryId
-      customerId
-      profileId
-      locationId
-      name
-      baseMacAddress
-      latitude
-      longitude
-      serial
-      lastModifiedTimestamp
-      details
-    }
-  }
-`;
-
-export const DELETE_EQUIPMENT = gql`
-  mutation DeleteEquipment($id: ID!) {
-    deleteEquipment(id: $id) {
-      id
-    }
-  }
-`;
-
 export const UPDATE_CUSTOMER = gql`
   mutation UpdateCustomer(
     $id: ID!

app/graphql/queries.js

@@ -42,12 +42,12 @@ export const FILTER_EQUIPMENT = gql`
         profile {
           name
         }
-        baseMacAddress
-        manufacturer
         status {
           protocol {
             details {
               reportedIpV4Addr
+              reportedMacAddr
+              manufacturer
             }
           }
           osPerformance {
@@ -70,9 +70,6 @@ export const FILTER_EQUIPMENT = gql`
           firmware {
             detailsJSON
           }
-          channel {
-            detailsJSON
-          }
         }
       }
       context
@@ -80,67 +77,6 @@ export const FILTER_EQUIPMENT = gql`
   }
 `;
 
-export const GET_EQUIPMENT = gql`
-  query GetEquipment($id: ID!) {
-    getEquipment(id: $id) {
-      id
-      equipmentType
-      inventoryId
-      customerId
-      profileId
-      locationId
-      name
-      latitude
-      longitude
-      serial
-      lastModifiedTimestamp
-      details
-      profile {
-        id
-        name
-        childProfiles {
-          id
-          name
-          details
-        }
-      }
-      baseMacAddress
-      manufacturer
-      status {
-        firmware {
-          detailsJSON
-        }
-        protocol {
-          detailsJSON
-        }
-        radioUtilization {
-          detailsJSON
-        }
-        clientDetails {
-          detailsJSON
-          details {
-            numClientsPerRadio
-          }
-        }
-        osPerformance {
-          detailsJSON
-        }
-        channel {
-          detailsJSON
-        }
-      }
-      model
-      alarmsCount
-      alarms {
-        severity
-        alarmCode
-        details
-        createdTimestamp
-      }
-    }
-  }
-`;
-
 export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
   query FilterEquipment(
     $locationIds: [ID]

app/index.js

@@ -14,7 +14,6 @@ import { AUTH_TOKEN } from 'constants/index';
 import { REFRESH_TOKEN } from 'graphql/mutations';
 import { getItem, setItem, removeItem } from 'utils/localStorage';
 import history from 'utils/history';
-import { ScrollToTop } from '@tip-wlan/wlan-cloud-ui-library';
 
 const API_URI = process.env.NODE_ENV === 'production' ? window.REACT_APP_API : process.env.API;
 const MOUNT_NODE = document.getElementById('root');
@@ -103,7 +102,6 @@ const render = () => {
   ReactDOM.render(
     <Router history={history}>
       <ApolloProvider client={client}>
-        <ScrollToTop />
         <App />
       </ApolloProvider>
     </Router>,

app/styles/index.scss

@@ -1,14 +1,3 @@
 body {
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active,
-input:-webkit-autofill::first-line {
-  -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
-  transition: color 9999s ease-out, background-color 9999s ease-out;
-  font-size: 14px !important;
-  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-}

app/styles/variables.scss

@@ -1,4 +1,4 @@
 $sidebar-width: 234px;
 $sidebar-collapsed-width: 80px;
 
-$header-height: 64px;
+$header-height: 64px;

app/utils/locations.js

@@ -1,110 +0,0 @@
-import { filter, isEmpty, each } from 'lodash';
-
-export const NETWORK_NODE = {
-  title: 'Network',
-  id: '0',
-  key: '0',
-  value: '0',
-  name: 'Network',
-};
-
-export const formatLocations = (list = [], disableRoot = false) => {
-  function unflatten(array, p) {
-    let tree = [];
-    const parent = typeof p !== 'undefined' ? p : { id: '0' };
-    let children = filter(array, child => child.parentId === parent.id);
-    children = children.map(c => ({
-      title: c.name,
-      value: `${c.id}`,
-      key: c.id,
-      isLeaf: false,
-      ...c,
-    }));
-    if (!isEmpty(children)) {
-      if (parent.id === '0') {
-        tree = children;
-      } else {
-        parent.children = children;
-      }
-      each(children, child => unflatten(array, child));
-    }
-    return tree;
-  }
-
-  return [
-    {
-      ...NETWORK_NODE,
-      ...(disableRoot && { disabled: true }),
-      children: unflatten(list),
-    },
-  ];
-};
-
-export const getBreadcrumbPath = (id, locations) => {
-  const locationsPath = [];
-  const treeRecurse = (parentNodeId, node) => {
-    if (node.id === parentNodeId) {
-      locationsPath.unshift(node);
-      return node;
-    }
-    if (node.children) {
-      let parent;
-      node.children.some(i => {
-        parent = treeRecurse(parentNodeId, i);
-        return parent;
-      });
-      if (parent) {
-        locationsPath.unshift(node);
-      }
-      return parent;
-    }
-    return null;
-  };
-
-  treeRecurse(id, {
-    id: 0,
-    children: locations,
-  });
-
-  return locationsPath;
-};
-
-export const getLocationPath = (selectedId, locations) => {
-  const locationsPath = [];
-
-  const treeRecurse = (parentNodeId, node) => {
-    if (node.id === parentNodeId) {
-      locationsPath.unshift(node.id);
-
-      if (node.children) {
-        const flatten = children => {
-          children.forEach(i => {
-            locationsPath.unshift(i.id);
-            if (i.children) {
-              flatten(i.children);
-            }
-          });
-        };
-
-        flatten(node.children);
-      }
-      return node;
-    }
-    if (node.children) {
-      let parent;
-      node.children.some(i => {
-        parent = treeRecurse(parentNodeId, i);
-        return parent;
-      });
-      return parent;
-    }
-
-    return null;
-  };
-
-  if (selectedId) {
-    treeRecurse(selectedId, { id: 0, children: locations });
-  }
-
-  return locationsPath;
-};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "1.2.0",
+  "version": "0.5.3",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -9,38 +9,45 @@
   },
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
-    "start": "cross-env NODE_ENV=development webpack serve --mode development",
-    "start:bare": "cross-env API=https://wlan-ui.tip-sdk.lab.netexperience.com NODE_ENV=bare webpack serve --mode development",
-    "start:dev": "cross-env API=https://wlan-ui.tip-sdk.lab.netexperience.com NODE_ENV=development webpack serve --mode development",
+    "start": "cross-env NODE_ENV=development webpack-dev-server",
+    "start:bare": "cross-env API=https://wlan-graphql.zone3.lab.connectus.ai NODE_ENV=bare webpack-dev-server",
+    "start:dev": "cross-env API=https://wlan-graphql.qa.lab.wlan.tip.build NODE_ENV=development webpack-dev-server",
     "build": "webpack --mode=production",
-    "format": "prettier --write 'app/**/*{.js,.scss}'",
-    "eslint-fix": "eslint --fix 'app/**/*.js'",
-    "eslint": "eslint 'app/**/*.js' --max-warnings=0"
+    "format": "prettier --write \"app/**/*.js\"",
+    "eslint-fix": "eslint --fix \"app/**/*.js\"",
+    "eslint": "eslint \"app/**/*.js\" --max-warnings=0"
   },
   "license": "MIT",
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^1.2.2",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.3.16",
     "antd": "^4.5.2",
     "apollo-upload-client": "^13.0.0",
-    "graphql": "^15.5.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "graphql": "^14.6.0",
+    "highcharts": "^8.1.0",
+    "highcharts-react-official": "^3.0.0",
     "history": "^4.10.1",
+    "html-webpack-plugin": "^3.2.0",
     "lodash": "^4.17.15",
+    "mini-css-extract-plugin": "^0.9.0",
     "moment": "^2.26.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-helmet": "^5.2.1",
+    "react-jsx-highcharts": "^4.1.0",
+    "react-jsx-highstock": "^4.1.0",
     "react-router-dom": "^5.1.2",
-    "recharts": "^2.0.9"
+    "terser-webpack-plugin": "^2.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.8.7",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
-    "@babel/runtime": "^7.13.10",
     "@testing-library/react": "^10.0.3",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
@@ -48,10 +55,8 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-root-import": "^6.4.1",
     "babel-polyfill": "^6.26.0",
-    "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.4.2",
-    "css-minimizer-webpack-plugin": "^1.3.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.10.0",
@@ -63,38 +68,38 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.0",
     "file-loader": "^5.1.0",
-    "html-webpack-plugin": "^5.3.1",
     "husky": "^4.2.3",
     "jest": "^25.4.0",
     "less": "^3.11.1",
-    "less-loader": "^6.2.0",
+    "less-loader": "^5.0.0",
     "lint-staged": "^10.0.8",
-    "mini-css-extract-plugin": "^1.3.9",
     "node-sass": "^4.13.1",
     "prettier": "^1.19.1",
+    "pretty-quick": "^2.0.1",
     "react-test-renderer": "^16.13.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
-    "terser-webpack-plugin": "^5.1.1",
-    "webpack": "^5.28.0",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^4.2.2"
   },
+  "precommit": "NODE_ENV=production lint-staged",
   "browserslist": [
     "last 2 versions",
     "> 1%",
     "IE 10"
   ],
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "pretty-quick --staged",
+      "eslint . --fix \"app/**/*.js\" --max-warnings=0",
+      "git add"
+    ]
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
-  },
-  "lint-staged": {
-    "*.{js,jsx}": [
-      "eslint --fix 'app/**/*.js' --max-warnings=0",
-      "prettier --write"
-    ]
   }
 }

webpack.config.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const { merge } = require('webpack-merge');
+const webpackMerge = require('webpack-merge');
 const common = require('./webpack/webpack.common');
 
 const envs = {
@@ -10,4 +9,4 @@ const envs = {
 /* eslint-disable global-require,import/no-dynamic-require */
 const env = envs[process.env.NODE_ENV || 'production'];
 const envConfig = require(`./webpack/webpack.${env}.js`);
-module.exports = merge(common, envConfig);
+module.exports = webpackMerge(common, envConfig);

webpack/webpack.common.js

@@ -1,3 +1,4 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin');
 /* eslint-disable import/no-extraneous-dependencies */
 const webpack = require('webpack');
 
@@ -24,6 +25,10 @@ module.exports = {
     ],
   },
   plugins: [
+    new HtmlWebPackPlugin({
+      template: commonPaths.templatePath,
+      favicon: './app/images/favicon.ico',
+    }),
     new webpack.DefinePlugin({
       'process.env.API': JSON.stringify(process.env.API || 'http://localhost:4000'),
     }),

webpack/webpack.dev.js

@@ -1,6 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const commonPaths = require('./paths');
 
@@ -54,9 +52,7 @@ module.exports = {
           {
             loader: 'less-loader', // compiles Less to CSS
             options: {
-              lessOptions: {
-                javascriptEnabled: true,
-              },
+              javascriptEnabled: true,
             },
           },
         ],
@@ -83,11 +79,4 @@ module.exports = {
       ),
     },
   },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: commonPaths.templatePath,
-      favicon: './app/images/favicon.ico',
-    }),
-  ],
 };

webpack/webpack.prod.js

@@ -1,8 +1,6 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const path = require('path');
 
@@ -10,50 +8,45 @@ const commonPaths = require('./paths');
 
 module.exports = {
   output: {
+    filename: `${commonPaths.jsFolder}/[name].[hash].js`,
     path: commonPaths.outputPath,
     publicPath: '/',
-    filename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
-    chunkFilename: `${commonPaths.jsFolder}/[id].[chunkhash].js`,
+    chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
   },
-
   optimization: {
     minimize: true,
     minimizer: [
       new TerserPlugin({
-        terserOptions: {
-          warnings: false,
-          compress: {
-            comparisons: false,
-          },
-          parse: {},
-          mangle: true,
-          output: {
-            comments: false,
-            ascii_only: true,
-          },
-        },
+        // Use multi-process parallel running to improve the build speed
+        // Default number of concurrent runs: os.cpus().length - 1
         parallel: true,
+        // Enable file caching
+        cache: true,
+        sourceMap: true,
       }),
-      new CssMinimizerPlugin(),
+      new OptimizeCSSAssetsPlugin(),
     ],
-    nodeEnv: 'production',
-    sideEffects: true,
-    concatenateModules: true,
-    runtimeChunk: 'single',
+    // Automatically split vendor and commons
+    // https://twitter.com/wSokra/status/969633336732905474
+    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
     splitChunks: {
-      chunks: 'all',
-      maxInitialRequests: 10,
-      minSize: 0,
       cacheGroups: {
-        vendor: {
+        vendors: {
           test: /[\\/]node_modules[\\/]/,
-          name(module) {
-            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
-            return `npm.${packageName.replace('@', '')}`;
-          },
+          name: 'vendors',
+          chunks: 'initial',
+        },
+        async: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'async',
+          chunks: 'async',
+          minChunks: 4,
         },
       },
     },
+    // Keep the runtime chunk seperated to enable long term caching
+    // https://twitter.com/wSokra/status/969679223278505985
+    runtimeChunk: true,
   },
 
   module: {
@@ -85,48 +78,25 @@ module.exports = {
           {
             loader: 'less-loader', // compiles Less to CSS
             options: {
-              lessOptions: {
-                javascriptEnabled: true,
-              },
+              javascriptEnabled: true,
             },
           },
         ],
       },
     ],
   },
-
   resolve: {
     modules: ['node_modules', 'app'],
     alias: {
       app: path.resolve(__dirname, '../', 'app'),
     },
   },
-
   plugins: [
     new CleanWebpackPlugin(),
-
-    // Minify and optimize the index.html
-    new HtmlWebpackPlugin({
-      template: commonPaths.templatePath,
-      favicon: './app/images/favicon.ico',
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true,
-      },
-      inject: true,
-    }),
-
     new MiniCssExtractPlugin({
       filename: `${commonPaths.cssFolder}/[name].css`,
-      chunkFilename: `${commonPaths.cssFolder}/[id].css`,
+      chunkFilename: `${commonPaths.cssFolder}/[name].css`,
     }),
   ],
+  devtool: 'source-map',
 };