changed prop name spelling

2026-03-20 20:39:22 +00:00 · 2020-07-30 14:16:43 -04:00
39 changed files with 4976 additions and 4307 deletions
--- a/.github/workflows/dockerpublish.yml
+++ b/.github/workflows/dockerpublish.yml
@@ -13,10 +13,6 @@ on:
  # Run tests for any PRs.
  pull_request:

-  schedule:
-      # runs nightly build at 5AM
-      - cron:  '00 09 * * *'
-
 env:
  IMAGE_NAME: wlan-cloud-ui
  DOCKER_REPO: tip-tip-wlan-cloud-docker-repo.jfrog.io
@@ -43,28 +39,11 @@ jobs:
    needs: test

    runs-on: ubuntu-latest
-    if: github.event_name == 'push' || github.event_name == 'schedule'
+    if: github.event_name == 'push'

    steps:
      - uses: actions/checkout@v2

-      - 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,')
-
-          # Strip "v" prefix from tag name
-          [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
-
-          # Use Docker `latest` tag convention
-          [ "$VERSION" == "master" ] && VERSION=latest
-
-          TIMESTAMP=$(date +'%Y-%m-%d')
-
-          echo date=$TIMESTAMP > app/commit.properties
-          echo commitId=$GITHUB_SHA >> app/commit.properties
-          echo projectVersion=$VERSION>> app/commit.properties
-
      - name: Build image
        run: docker build . -f Dockerfile -t image --build-arg NPM_TOKEN=${{secrets.NPM_REPO_AUTH_TOKEN}}

@@ -77,7 +56,6 @@ jobs:
      - name: Push image
        run: |
          IMAGE_ID=$DOCKER_REPO/$IMAGE_NAME
-          TIMESTAMP=$(date +'%Y-%m-%d')

          # Change all uppercase to lowercase
          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
@@ -93,10 +71,6 @@ jobs:

          echo IMAGE_ID=$IMAGE_ID
          echo VERSION=$VERSION
-          echo TIMESTAMP=$TIMESTAMP

          docker tag image $IMAGE_ID:$VERSION
          docker push $IMAGE_ID:$VERSION
-          
-          docker tag image $IMAGE_ID:$VERSION-$TIMESTAMP
-          docker push $IMAGE_ID:$VERSION-$TIMESTAMP          
--- a/8
+++ b/8
@@ -13,7 +13,6 @@ ENV PATH /app/node_modules/.bin:$PATH
 # where available (npm@5+)
 COPY package*.json ./

-
 #RUN npm install
 # If you are building your code for production
 RUN (echo "@tip-wlan:registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/" && echo "//tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/:_authToken=$NPM_TOKEN") > .npmrc
@@ -25,12 +24,7 @@ RUN npm run build

 # production environment
 FROM nginx:stable-alpine
-RUN apk add --no-cache jq
 COPY --from=build /app/dist /usr/share/nginx/html
 COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
-COPY docker_entrypoint.sh generate_config_js.sh /
-COPY app/commit.properties /
-RUN chmod +x docker_entrypoint.sh generate_config_js.sh
- 
 EXPOSE 80
-ENTRYPOINT ["/docker_entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -2,30 +2,12 @@

 ## Set up environment:

-Install Dependencies:
+Delete from package.json (undo this delete after all steps)
+`"@tip-wlan/wlan-cloud-ui-library": X.X.X,`
+
+Install Dependencies
 `npm install`

-You will get an error installing the package [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) because it is in a private npm registry.
-You can either install the package with the commands below or clone the repo [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and skip to the section Set up Full Development.
-
-Run
-
-```
-npm login --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/
-```
-
-And enter the supplied credentials. Ask @sean-macfarlane for credentials if you don't have.
-
-Install package:
-
-```
-npm i --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/ @tip-wlan/wlan-cloud-ui-library
-```
-
-### Set up Full Development
-
-_Skip this section if you are not using a local [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library)_
-
 Clone [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) in parent folder

 ```
@@ -46,25 +28,15 @@ If `npm link` fails due to Permissions run with `sudo`
 sudo npm link ../wlan-cloud-ui-library
 ```

-To run Full Development you must clone [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw), follow it's README, and run it. Or you use the live production build by setting the environment variable `API` to the GraphQL domain.
-
 ## Run:

-### Bare Development
-
-This is if you only want to run this repo locally, and want to use the live production builds of [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
-
-`npm run start:bare`
-
-### Full Development
-
-If you have cloned [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
+### Development

 `npm start`

 ### Tests

-`npm test`
+`npm run test`

 ### Production

--- a/app/commit.properties
+++ b/app/commit.properties
@@ -1,4 +0,0 @@
-#This file will be used when running the docker locally
-date=${date}
-commitId=${commit.id}
-projectVersion=${project.version}
--- a/app/containers/Accounts/index.js
+++ b/app/containers/Accounts/index.js
@@ -1,15 +1,15 @@
 import React, { useContext } from 'react';
-import { useMutation, gql } from '@apollo/client';
-import { notification } from 'antd';
+import gql from 'graphql-tag';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+import { Alert, notification } from 'antd';

-import { Accounts as AccountsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Accounts as AccountsPage, Loading } 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) {
-    getAllUsers(customerId: $customerId, context: $context) {
+  query GetAllUsers($customerId: ID!, $cursor: String) {
+    getAllUsers(customerId: $customerId, cursor: $cursor) {
      items {
        id
        email: username
@@ -17,7 +17,10 @@ const GET_ALL_USERS = gql`
        lastModifiedTimestamp
        customerId
      }
-      context
+      context {
+        cursor
+        lastPage
+      }
    }
  }
 `;
@@ -66,117 +69,120 @@ const DELETE_USER = gql`
  }
 `;

-const Accounts = withQuery(
-  ({ data, fetchMore, refetch }) => {
-    const { customerId } = useContext(UserContext);
+const Accounts = () => {
+  const { customerId } = useContext(UserContext);

-    const [createUser] = useMutation(CREATE_USER);
-    const [updateUser] = useMutation(UPDATE_USER);
-    const [deleteUser] = useMutation(DELETE_USER);
+  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 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: { cursor: data.getAllUsers.context.cursor },
+        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,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Account successfully created.',
        });
-      }
-    };
-
-    const handleCreateUser = (email, password, role) => {
-      createUser({
-        variables: {
-          username: email,
-          password,
-          role,
-          customerId,
-        },
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Account successfully created.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Account could not be created.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Account could not be created.',
-          })
-        );
-    };
+      );
+  };

-    const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
-      updateUser({
-        variables: {
-          id,
-          username: email,
-          password,
-          role,
-          customerId,
-          lastModifiedTimestamp,
-        },
+  const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
+    updateUser({
+      variables: {
+        id,
+        username: email,
+        password,
+        role,
+        customerId,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Account successfully updated.',
+        });
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Account successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Account could not be 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.',
-          });
+  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.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Account could not be deleted.',
-          })
-        );
-    };
+      );
+  };

-    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 (loading) {
+    return <Loading />;
  }
-);

+  if (error) {
+    return <Alert message="Error" description="Failed to load Users." type="error" showIcon />;
+  }
+
+  return (
+    <AccountsPage
+      data={data.getAllUsers.items}
+      onLoadMore={handleLoadMore}
+      onCreateUser={handleCreateUser}
+      onEditUser={handleEditUser}
+      onDeleteUser={handleDeleteUser}
+      isLastPage={data.getAllUsers.context.lastPage}
+    />
+  );
+};
 export default Accounts;
--- a/app/containers/AddProfile/index.js
+++ b/app/containers/AddProfile/index.js
@@ -1,12 +1,11 @@
 import React, { useContext } from 'react';
 import { AddProfile as AddProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
-import { useMutation, useQuery, gql } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useMutation, useQuery } from '@apollo/react-hooks';
 import { notification } from 'antd';
-import { useHistory } from 'react-router-dom';

 import UserContext from 'contexts/UserContext';
 import { GET_ALL_PROFILES } from 'graphql/queries';
-import { updateQueryGetAllProfiles } from 'graphql/functions';

 const CREATE_PROFILE = gql`
  mutation CreateProfile(
@@ -34,11 +33,10 @@ const CREATE_PROFILE = gql`

 const AddProfile = () => {
  const { customerId } = useContext(UserContext);
-  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
+  const { data: ssidProfiles } = useQuery(GET_ALL_PROFILES, {
    variables: { customerId, type: 'ssid' },
  });
  const [createProfile] = useMutation(CREATE_PROFILE);
-  const history = useHistory();

  const handleAddProfile = (profileType, name, details, childProfileIds = []) => {
    createProfile({
@@ -55,7 +53,6 @@ const AddProfile = () => {
          message: 'Success',
          description: 'Profile successfully created.',
        });
-        history.push('/profiles', { refetch: true });
      })
      .catch(() =>
        notification.error({
@@ -65,31 +62,12 @@ const AddProfile = () => {
      );
  };

-  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,
-      });
-    }
-
-    return true;
-  };
-
  return (
    <AddProfilePage
      onCreateProfile={handleAddProfile}
      ssidProfiles={
        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
      }
-      onFetchMoreProfiles={handleFetchProfiles}
    />
  );
 };
--- a/app/containers/Alarms/index.js
+++ b/app/containers/Alarms/index.js
@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
-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 gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
+import { Alert, notification } from 'antd';
+import { Alarms as AlarmsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';

 const GET_ALL_ALARMS = gql`
-  query GetAllAlarms($customerId: ID!, $context: JSONObject) {
-    getAllAlarms(customerId: $customerId, context: $context) {
+  query GetAllAlarms($customerId: ID!, $cursor: String) {
+    getAllAlarms(customerId: $customerId, cursor: $cursor) {
      items {
        severity
        alarmCode
@@ -19,63 +19,71 @@ const GET_ALL_ALARMS = gql`
          name
        }
      }
-      context
+      context {
+        cursor
+        lastPage
+      }
    }
  }
 `;

-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 Alarms = () => {
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_ALARMS, {
+    variables: { customerId },
+  });

-    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,
-              },
-            };
-          },
+  const handleOnReload = () => {
+    refetch()
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Alarms reloaded.',
        });
-      }
-    };
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Alarms could not be reloaded.',
+        })
+      );
+  };

-    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' };
+  const handleLoadMore = () => {
+    if (!data.getAllAlarms.context.lastPage) {
+      fetchMore({
+        variables: { cursor: data.getAllAlarms.context.cursor },
+        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,
+            },
+          };
+        },
+      });
+    }
+  };
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    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;
--- a/app/containers/Dashboard/index.js
+++ b/app/containers/Dashboard/index.js
@@ -1,10 +1,10 @@
-import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
+import { Alert } from 'antd';
 import moment from 'moment';
-import { useQuery } from '@apollo/client';
-import { Dashboard as DashboardPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { useQuery } from '@apollo/react-hooks';
+import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 import UserContext from 'contexts/UserContext';
 import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
-import { withQuery } from 'containers/QueryWrapper';

 function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return '0 Bytes';
@@ -13,7 +13,7 @@ function formatBytes(bytes, decimals = 2) {
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

-  const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(k));
+  const i = Math.floor(Math.log(bytes) / Math.log(k));

  // eslint-disable-next-line no-restricted-properties
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i] || ''}`;
@@ -36,252 +36,180 @@ const USER_FRIENDLY_RADIOS = {
  is5GHz: '5GHz',
 };

-const lineChartConfig = [
-  { key: 'inservicesAPs', title: 'Inservice APs (24 hours)' },
-  { key: 'clientDevices', title: 'Client Devices (24 hours)' },
-  {
-    key: 'traffic',
-    title: 'Traffic (24 hours)',
-    options: { formatter: trafficLabelFormatter, tooltipFormatter: trafficTooltipFormatter },
-  },
-];
+const Dashboard = () => {
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data } = useQuery(GET_ALL_STATUS, {
+    variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
+  });
+  const [toTime] = useState(
+    moment()
+      .valueOf()
+      .toString()
+  );
+  const [fromTime] = useState(
+    moment()
+      .subtract(24, 'hours')
+      .valueOf()
+      .toString()
+  );

-const Dashboard = withQuery(
-  ({ data }) => {
-    const { customerId } = useContext(UserContext);
-    const initialGraphTime = useRef({
-      toTime: moment()
-        .valueOf()
-        .toString(),
-      fromTime: moment()
-        .subtract(24, 'hours')
-        .valueOf()
-        .toString(),
-    });
+  const {
+    loading: metricsLoading,
+    error: metricsError,
+    data: metricsData,
+    // refetch: metricsRefetch,
+  } = useQuery(FILTER_SYSTEM_EVENTS, {
+    variables: {
+      customerId,
+      fromTime,
+      toTime,
+      equipmentIds: [0],
+      dataTypes: ['StatusChangedEvent'],
+      limit: 1000,
+    },
+  });

-    const [lineChartData, setLineChartData] = useState({
+  const formatLineChartData = (list = []) => {
+    const lineChartData = {
      inservicesAPs: {
-        key: 'Inservice APs',
-        value: [],
-      },
-      clientDevices: {
-        is2dot4GHz: {
-          key: USER_FRIENDLY_RADIOS.is2dot4GHz,
-          value: [],
-        },
-        is5GHz: {
-          key: USER_FRIENDLY_RADIOS.is5GHz,
-          value: [],
-        },
+        title: 'Inservice APs (24 hours)',
+        data: { key: 'Inservice APs', value: [] },
      },
+      clientDevices: { title: 'Client Devices (24 hours)' },
      traffic: {
-        trafficBytesDownstream: {
-          key: 'Down Stream',
-          value: [],
-        },
-        trafficBytesUpstream: {
-          key: 'Up Stream',
-          value: [],
+        title: 'Traffic (24 hours)',
+        formatter: trafficLabelFormatter,
+        tooltipFormatter: trafficTooltipFormatter,
+        data: {
+          trafficBytesDownstream: { key: 'Down Stream', value: [] },
+          trafficBytesUpstream: { key: 'Up Stream', value: [] },
        },
      },
-    });
-
-    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 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: {
-                  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],
-              },
-            },
-            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,
-          };
-        });
-      }
    };
+    const clientDevicesData = {};

-    useEffect(() => {
-      const interval = setInterval(() => {
-        const toTime = moment()
-          .valueOf()
-          .toString();
-        const fromTime = moment()
-          .subtract(5, 'minutes')
-          .valueOf()
-          .toString();
-        fetchMore({
-          variables: {
-            fromTime,
-            toTime,
+    list.forEach(
+      ({
+        eventTimestamp,
+        details: {
+          payload: {
+            details: {
+              equipmentInServiceCount,
+              associatedClientsCountPerRadio: radios,
+              trafficBytesDownstream,
+              trafficBytesUpstream,
+            },
          },
-          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];
+        },
+      }) => {
+        lineChartData.inservicesAPs.data.value.push([eventTimestamp, equipmentInServiceCount]);
+        Object.keys(radios).forEach(key => {
+          if (!clientDevicesData[key]) {
+            clientDevicesData[key] = {
+              key: USER_FRIENDLY_RADIOS[key] || key,
+              value: [],
+            };
          }
-          totalAssociated += associatedClientsCountPerRadio[i];
+          clientDevicesData[key].value.push([eventTimestamp, radios[key]]);
        });
+
+        lineChartData.traffic.data.trafficBytesDownstream.value.push([
+          eventTimestamp,
+          trafficBytesDownstream,
+        ]);
+        lineChartData.traffic.data.trafficBytesUpstream.value.push([
+          eventTimestamp,
+          trafficBytesUpstream,
+        ]);
      }
-
-      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'] };
+
+    return {
+      ...lineChartData,
+      clientDevices: { ...lineChartData.clientDevices, data: { ...clientDevicesData } },
+    };
+  };
+
+  const lineChartsData = useMemo(
+    () => formatLineChartData(metricsData?.filterSystemEvents?.items),
+    [metricsData]
+  );
+
+  const statsArr = useMemo(() => {
+    const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
+
+    const {
+      associatedClientsCountPerRadio,
+      totalProvisionedEquipment,
+      equipmentInServiceCount,
+      equipmentWithClientsCount,
+      trafficBytesDownstream,
+      trafficBytesUpstream,
+    } = 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 [
+      {
+        title: 'Access Point',
+        'Total Provisioned': totalProvisionedEquipment,
+        'In Service': equipmentInServiceCount,
+        'With Clients': equipmentWithClientsCount,
+      },
+      {
+        title: 'Client Devices',
+        'Total Associated': totalAssociated,
+        ...clientRadios,
+      },
+      {
+        title: 'Usage Information',
+        'Total Traffic (US)': formatBytes(trafficBytesUpstream),
+        'Total Traffic (DS)': formatBytes(trafficBytesDownstream),
+      },
+    ];
+  }, [data]);
+
+  const pieChartsData = useMemo(() => {
+    const { clientCountPerOui, equipmentCountPerOui } = data?.getAllStatus?.items[0]?.details || {};
+
+    return [
+      { title: 'AP Vendors', ...equipmentCountPerOui },
+      { title: 'Client Vendors', ...clientCountPerOui },
+    ];
+  }, [data]);
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return <Alert message="Error" description="Failed to load Dashboard" type="error" showIcon />;
+  }
+
+  return (
+    <DashboardPage
+      statsCardDetails={statsArr}
+      pieChartDetails={pieChartsData}
+      lineChartDetails={lineChartsData}
+      lineChartLoading={metricsLoading}
+      lineChartError={metricsError}
+    />
+  );
+};

 export default Dashboard;
--- a/app/containers/EditAccount/index.js
+++ b/app/containers/EditAccount/index.js
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
-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 gql from 'graphql-tag';
+import { useMutation, useQuery } from '@apollo/react-hooks';
+import { notification, Alert } from 'antd';
+import { EditAccount as EditAccountPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';

@@ -44,45 +44,47 @@ const UPDATE_USER = gql`
  }
 `;

-const EditAccount = withQuery(
-  ({ data }) => {
-    const { id, email } = useContext(UserContext);
-    const [updateUser] = useMutation(UPDATE_USER);
+const EditAccount = () => {
+  const { id, email } = useContext(UserContext);
+  const { loading, error, data } = useQuery(GET_USER, { variables: { id } });
+  const [updateUser] = useMutation(UPDATE_USER);

-    const handleSubmit = newPassword => {
-      const { role, customerId, lastModifiedTimestamp } = data.getUser;
+  const handleSubmit = newPassword => {
+    const { role, customerId, lastModifiedTimestamp } = data.getUser;

-      updateUser({
-        variables: {
-          id,
-          username: email,
-          password: newPassword,
-          role,
-          customerId,
-          lastModifiedTimestamp,
-        },
+    updateUser({
+      variables: {
+        id,
+        username: email,
+        password: newPassword,
+        role,
+        customerId,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Password successfully updated.',
+        });
      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Password successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Password could not be updated.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Password could not be updated.',
-          })
-        );
-    };
+      );
+  };

-    return <EditAccountPage onSubmit={handleSubmit} email={email} />;
-  },
-  GET_USER,
-  () => {
-    const { id } = useContext(UserContext);
-    return { id };
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return <Alert message="Error" description="Failed to load User." type="error" showIcon />;
+  }
+
+  return <EditAccountPage onSubmit={handleSubmit} email={email} />;
+};

 export default EditAccount;
--- a/app/containers/Login/index.js
+++ b/app/containers/Login/index.js
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
-import { useMutation, useApolloClient, gql } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useMutation, useApolloClient } from '@apollo/react-hooks';
 import { useHistory } from 'react-router-dom';
 import { notification } from 'antd';

@@ -26,10 +27,9 @@ const Login = () => {
  const handleLogin = (email, password) => {
    authenticateUser({ variables: { email, password } })
      .then(({ data }) => {
-        client.resetStore().then(() => {
-          updateToken(data.authenticateUser);
-          history.push('/');
-        });
+        client.resetStore();
+        updateToken(data.authenticateUser);
+        history.push('/');
      })
      .catch(() =>
        notification.error({
--- a/app/containers/MasterLayout/index.js
+++ b/app/containers/MasterLayout/index.js
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
-import { useApolloClient, useQuery } from '@apollo/client';
+import { useApolloClient, useQuery } from '@apollo/react-hooks';
 import { AppLayout as Layout } from '@tip-wlan/wlan-cloud-ui-library';

 import { GET_ALARM_COUNT } from 'graphql/queries';
--- a/app/containers/Network/containers/AccessPointDetails/index.js
+++ b/app/containers/Network/containers/AccessPointDetails/index.js
@@ -1,20 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
-import { useQuery, useMutation, gql } from '@apollo/client';
-import { notification } from 'antd';
+import gql from 'graphql-tag';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+import { Alert, Spin, notification } from 'antd';
 import moment from 'moment';
 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 {
-  UPDATE_EQUIPMENT_FIRMWARE,
-  REQUEST_EQUIPMENT_SWITCH_BANK,
-  REQUEST_EQUIPMENT_REBOOT,
-} from 'graphql/mutations';
-import { updateQueryGetAllProfiles } from 'graphql/functions';
+import { FILTER_SERVICE_METRICS } from 'graphql/queries';
+import { UPDATE_EQUIPMENT_FIRMWARE } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
-import { withQuery } from 'containers/QueryWrapper';

 const GET_EQUIPMENT = gql`
  query GetEquipment($id: ID!) {
@@ -32,7 +27,6 @@ const GET_EQUIPMENT = gql`
      lastModifiedTimestamp
      details
      profile {
-        id
        name
        childProfiles {
          id
@@ -76,6 +70,20 @@ const GET_EQUIPMENT = gql`
  }
 `;

+export const GET_ALL_FIRMWARE = gql`
+  query GetAllFirmware {
+    getAllFirmware {
+      id
+      modelId
+      versionName
+      description
+      filename
+      commit
+      releaseDate
+    }
+  }
+`;
+
 const UPDATE_EQUIPMENT = gql`
  mutation UpdateEquipment(
    $id: ID!
@@ -121,225 +129,193 @@ const UPDATE_EQUIPMENT = gql`
  }
 `;

+export const GET_ALL_PROFILES = gql`
+  query GetAllProfiles($customerId: ID!, $cursor: String, $type: String) {
+    getAllProfiles(customerId: $customerId, cursor: $cursor, type: $type) {
+      items {
+        id
+        name
+        profileType
+        details
+        childProfiles {
+          id
+          name
+          details
+        }
+      }
+      context {
+        cursor
+        lastPage
+      }
+    }
+  }
+`;
+
 const toTime = moment();
 const fromTime = moment().subtract(1, 'hour');

-const AccessPointDetails = withQuery(
-  ({ data, refetch, locations }) => {
-    const { id } = useParams();
-    const { customerId } = useContext(UserContext);
+const AccessPointDetails = ({ locations }) => {
+  const { id } = useParams();
+  const { customerId } = useContext(UserContext);

-    const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
-      GET_ALL_FIRMWARE,
-      {
-        skip: !data?.getEquipment?.model,
-        variables: { modelId: data?.getEquipment?.model },
-      }
-    );
+  const { loading, error, data, refetch } = useQuery(GET_EQUIPMENT, {
+    variables: { id },
+  });
+  const { data: dataProfiles, error: errorProfiles, loading: landingProfiles } = useQuery(
+    GET_ALL_PROFILES,
+    {
+      variables: { customerId, type: 'equipment_ap' },
+    }
+  );
+  const {
+    loading: metricsLoading,
+    error: metricsError,
+    data: metricsData,
+    refetch: metricsRefetch,
+  } = useQuery(FILTER_SERVICE_METRICS, {
+    variables: {
+      customerId,
+      fromTime: fromTime.valueOf().toString(),
+      toTime: toTime.valueOf().toString(),
+      equipmentIds: [id],
+      dataTypes: ['ApNode'],
+      limit: 100,
+    },
+  });

-    const {
-      data: dataProfiles,
-      error: errorProfiles,
-      loading: loadingProfiles,
-      fetchMore,
-    } = useQuery(
-      GET_ALL_PROFILES(`
-    childProfiles {
-      id
-      name
-      details
-    }`),
-      {
-        variables: { customerId, type: 'equipment_ap' },
-      }
-    );
+  const [updateEquipment] = useMutation(UPDATE_EQUIPMENT);
+  const [updateEquipmentFirmware] = useMutation(UPDATE_EQUIPMENT_FIRMWARE);

-    const {
-      loading: metricsLoading,
-      error: metricsError,
-      data: metricsData,
-      refetch: metricsRefetch,
-    } = useQuery(FILTER_SERVICE_METRICS, {
+  const { data: dataFirmware, error: errorFirmware, loading: landingFirmware } = useQuery(
+    GET_ALL_FIRMWARE
+  );
+
+  const refetchData = () => {
+    refetch();
+    metricsRefetch();
+  };
+
+  const handleUpdateEquipment = (
+    equipmentId,
+    equipmentType,
+    inventoryId,
+    custId,
+    profileId,
+    locationId,
+    name,
+    latitude,
+    longitude,
+    serial,
+    lastModifiedTimestamp,
+    details
+  ) => {
+    updateEquipment({
      variables: {
-        customerId,
-        fromTime: fromTime.valueOf().toString(),
-        toTime: toTime.valueOf().toString(),
-        equipmentIds: [id],
-        dataTypes: ['ApNode'],
-        limit: 100,
+        id: equipmentId,
+        equipmentType,
+        inventoryId,
+        customerId: custId,
+        profileId,
+        locationId,
+        name,
+        latitude,
+        longitude,
+        serial,
+        lastModifiedTimestamp,
+        details,
      },
-    });
-
-    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,
-        },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Equipment settings successfully updated.',
+        });
      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Equipment settings successfully updated.',
-          });
-        })

-        .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 settings could not be updated.',
        })
-        .catch(() =>
+      );
+  };
+
+  const handleUpdateEquipmentFirmware = (equipmentId, firmwareVersionId) =>
+    updateEquipmentFirmware({ variables: { equipmentId, firmwareVersionId } })
+      .then(firmwareResp => {
+        if (firmwareResp && firmwareResp.updateEquipmentFirmware.success === false) {
          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 {
-            notification.error({
-              message: 'Error',
-              description: 'Equipment Firmware could not be updated.',
-            });
-          }
+          });
+        } else {
+          notification.success({
+            message: 'Success',
+            description: 'Equipment Firmware Upgrade in progress',
+          });
+        }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment Firmware Upgrade 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 {
-            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 => {
-      if (dataProfiles.getAllProfiles.context.lastPage) {
-        return false;
-      }
-
-      e.persist();
-      const { target } = e;
-
-      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-        fetchMore({
-          variables: { context: { ...dataProfiles.getAllProfiles.context } },
-          updateQuery: updateQueryGetAllProfiles,
-        });
-      }
-
-      return true;
-    };
+  if (loading || landingProfiles || landingFirmware) {
+    return <Spin size="large" />;
+  }

+  if (error) {
    return (
-      <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}
+      <Alert
+        message="Error"
+        description="Failed to load Access Point data."
+        type="error"
+        showIcon
      />
    );
-  },
-  GET_EQUIPMENT,
-  () => {
-    const { id } = useParams();
-    return { id };
  }
-);
+
+  if (errorProfiles) {
+    return (
+      <Alert
+        message="Error"
+        description="Failed to load Access Point profiles."
+        type="error"
+        showIcon
+      />
+    );
+  }
+
+  if (errorFirmware) {
+    return (
+      <Alert
+        message="Error"
+        description="Failed to load Access Point firmware."
+        type="error"
+        showIcon
+      />
+    );
+  }
+
+  return (
+    <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}
+    />
+  );
+};

 AccessPointDetails.propTypes = {
  locations: PropTypes.instanceOf(Array).isRequired,
--- a/app/containers/Network/containers/AccessPoints/index.js
+++ b/app/containers/Network/containers/AccessPoints/index.js
@@ -1,40 +1,27 @@
 import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
-import { useLazyQuery } from '@apollo/client';
-import { notification } from 'antd';
-import { floor, padStart } from 'lodash';
-import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
+import { useLazyQuery } from '@apollo/react-hooks';
+import { Alert } from 'antd';
+import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';
 import { FILTER_EQUIPMENT } from 'graphql/queries';
-
 import styles from './index.module.scss';

-const renderTableCell = (text, _record, _index, defaultValue = 'N/A') => {
-  if (Array.isArray(text)) {
-    if (text.length < 1) {
-      return defaultValue;
-    }
+const renderTableCell = tabCell => {
+  if (Array.isArray(tabCell)) {
    return (
      <div className={styles.tabColumn}>
-        {text.map((i, key) => (
+        {tabCell.map((i, key) => (
          // eslint-disable-next-line react/no-array-index-key
          <span key={key}>{i}</span>
        ))}
      </div>
    );
  }
-  return text !== null ? text : defaultValue;
+  return tabCell;
 };

-const durationToString = duration =>
-  `${floor(duration.asDays())}d ${floor(duration.hours())}h ${padStart(
-    duration.minutes(),
-    2,
-    0
-  )}m ${padStart(duration.seconds(), 2, 0)}s`;
-
 const accessPointsTableColumns = [
  {
    title: 'NAME',
@@ -66,11 +53,6 @@ const accessPointsTableColumns = [
    dataIndex: ['status', 'protocol', 'details', 'manufacturer'],
    render: renderTableCell,
  },
-  {
-    title: 'FIRMWARE',
-    dataIndex: ['status', 'firmware', 'detailsJSON', 'activeSwVersion'],
-    render: renderTableCell,
-  },
  {
    title: 'ASSET ID',
    dataIndex: 'inventoryId',
@@ -79,7 +61,7 @@ const accessPointsTableColumns = [
  {
    title: 'UP TIME',
    dataIndex: ['status', 'osPerformance', 'details', 'uptimeInSeconds'],
-    render: upTimeInSeconds => durationToString(moment.duration(upTimeInSeconds, 'seconds')),
+    render: renderTableCell,
  },
  {
    title: 'PROFILE',
@@ -92,7 +74,7 @@ const accessPointsTableColumns = [
    render: renderTableCell,
  },
  {
-    title: 'OCCUPANCY',
+    title: 'CAPACITY',
    dataIndex: ['status', 'radioUtilization', 'details', 'capacityDetails'],
    render: renderTableCell,
  },
@@ -104,39 +86,23 @@ const accessPointsTableColumns = [
  {
    title: 'DEVICES',
    dataIndex: ['status', 'clientDetails', 'details', 'numClientsPerRadio'],
-    render: (text, record, index) => renderTableCell(text, record, index, 0),
+    render: renderTableCell,
  },
 ];

 const AccessPoints = ({ checkedLocations }) => {
  const { customerId } = useContext(UserContext);
-  const [filterEquipment, { loading, error, data: equipData, refetch, fetchMore }] = useLazyQuery(
+  const [filterEquipment, { loading, error, data: equipData, fetchMore }] = useLazyQuery(
    FILTER_EQUIPMENT,
    {
      errorPolicy: 'all',
    }
  );

-  const handleOnRefresh = () => {
-    refetch()
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Access points reloaded.',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Access points could not be reloaded.',
-        })
-      );
-  };
-
  const handleLoadMore = () => {
    if (!equipData.filterEquipment.context.lastPage) {
      fetchMore({
-        variables: { context: equipData.filterEquipment.context },
+        variables: { cursor: equipData.filterEquipment.context.cursor },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          const previousEntry = previousResult.filterEquipment;
          const newItems = fetchMoreResult.filterEquipment.items;
@@ -163,18 +129,22 @@ const AccessPoints = ({ checkedLocations }) => {
    fetchFilterEquipment();
  }, [checkedLocations]);

+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error && !equipData?.filterEquipment?.items) {
+    return <Alert message="Error" description="Failed to load equipment." type="error" showIcon />;
+  }
+
  return (
-    <NetworkTableContainer
-      activeTab="/network/access-points"
-      onRefresh={handleOnRefresh}
+    <NetworkTable
      tableColumns={accessPointsTableColumns}
      tableData={equipData && equipData.filterEquipment && equipData.filterEquipment.items}
      onLoadMore={handleLoadMore}
      isLastPage={
        equipData && equipData.filterEquipment && equipData.filterEquipment.context.lastPage
      }
-      loading={loading}
-      error={error && !equipData?.filterEquipment?.items && 'Failed to load equipment.'}
    />
  );
 };
--- a/app/containers/Network/containers/AccessPoints/index.module.scss
+++ b/app/containers/Network/containers/AccessPoints/index.module.scss
@@ -1,4 +1,5 @@
 .tabColumn {
  display: flex;
  flex-direction: column;
+  padding: 0 30px;
 }
--- a/app/containers/Network/containers/BulkEditAccessPoints/index.js
+++ b/app/containers/Network/containers/BulkEditAccessPoints/index.js
@@ -1,8 +1,8 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
-import { useParams, Redirect } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/client';
+import { useParams } from 'react-router-dom';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 import { BulkEditAccessPoints, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import { FILTER_EQUIPMENT_BULK_EDIT_APS } from 'graphql/queries';
@@ -327,7 +327,7 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
  const handleLoadMore = () => {
    if (!equipData.filterEquipment.context.lastPage) {
      fetchMore({
-        variables: { context: equipData.filterEquipment.context },
+        variables: { cursor: equipData.filterEquipment.context.cursor },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          const previousEntry = previousResult.filterEquipment;
          const newItems = fetchMoreResult.filterEquipment.items;
@@ -348,12 +348,6 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
  }

  if (filterEquipmentError) {
-    if (
-      filterEquipmentError.message === '403: Forbidden' ||
-      filterEquipmentError.message === '401: Unauthorized'
-    ) {
-      return <Redirect to="/login" />;
-    }
    return (
      <Alert message="Error" description="Failed to load equipments data." type="error" showIcon />
    );
--- a/app/containers/Network/containers/ClientDeviceDetails/index.js
+++ b/app/containers/Network/containers/ClientDeviceDetails/index.js
@@ -1,74 +1,81 @@
 import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/react-hooks';
 import moment from 'moment';
-import { notification } from 'antd';
-import { ClientDeviceDetails as ClientDevicesDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Alert, notification } from 'antd';
+import {
+  Loading,
+  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 fromTime = moment().subtract(1, 'hour');

-const ClientDeviceDetails = withQuery(
-  ({ data, refetch }) => {
-    const { id } = useParams();
-    const { customerId } = useContext(UserContext);
+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: 100,
+    },
+  });

-    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.',
-          });
+  const handleOnRefresh = () => {
+    metricsRefetch();
+    refetch()
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Successfully reloaded.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Could not be reloaded.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Could not be reloaded.',
-          })
-        );
-    };
+      );
+  };

-    return (
-      <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' };
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error && !data?.getClientSession) {
+    return (
+      <Alert message="Error" description="Failed to load Client Device." type="error" showIcon />
+    );
+  }
+
+  return (
+    <ClientDevicesDetailsPage
+      data={data.getClientSession[0]}
+      onRefresh={handleOnRefresh}
+      metricsLoading={metricsLoading}
+      metricsError={metricsError}
+      metricsData={
+        metricsData && metricsData.filterServiceMetrics && metricsData.filterServiceMetrics.items
+      }
+      historyDate={toTime}
+    />
+  );
+};

 export default ClientDeviceDetails;
--- a/app/containers/Network/containers/ClientDevices/index.js
+++ b/app/containers/Network/containers/ClientDevices/index.js
@@ -1,9 +1,8 @@
 import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useLazyQuery } from '@apollo/client';
-import { notification } from 'antd';
-
-import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
+import { useLazyQuery } from '@apollo/react-hooks';
+import { Alert } from 'antd';
+import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';
 import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
@@ -24,24 +23,12 @@ const clientDevicesTableColumns = [
  { title: 'SSID', dataIndex: 'ssid' },
  { title: 'BAND', dataIndex: 'radioType' },
  { title: 'SIGNAL', dataIndex: 'signal' },
-  {
-    title: 'STATUS',
-    dataIndex: ['details', 'associationState'],
-    render: text => {
-      if (text === 'Active_Data') {
-        return 'Connected';
-      }
-      if (text === 'Disconnected') {
-        return 'Disconnected';
-      }
-      return 'N/A';
-    },
-  },
+  { title: 'STATUS', dataIndex: 'status' },
 ];

 const ClientDevices = ({ checkedLocations }) => {
  const { customerId } = useContext(UserContext);
-  const [filterClientSessions, { loading, error, data, refetch, fetchMore }] = useLazyQuery(
+  const [filterClientSessions, { loading, error, data, fetchMore }] = useLazyQuery(
    FILTER_CLIENT_SESSIONS,
    {
      errorPolicy: 'all',
@@ -51,7 +38,7 @@ const ClientDevices = ({ checkedLocations }) => {
  const handleLoadMore = () => {
    if (!data.filterClientSessions.context.lastPage) {
      fetchMore({
-        variables: { context: data.filterClientSessions.context },
+        variables: { cursor: data.filterClientSessions.context.cursor },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          const previousEntry = previousResult.filterClientSessions;
          const newItems = fetchMoreResult.filterClientSessions.items;
@@ -74,36 +61,26 @@ const ClientDevices = ({ checkedLocations }) => {
    });
  };

-  const handleOnRefresh = () => {
-    refetch()
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'Client devices reloaded.',
-        });
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Client devices could not be reloaded.',
-        })
-      );
-  };
-
  useEffect(() => {
    fetchFilterClientSessions();
  }, [checkedLocations]);

+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error && !data?.filterClientSessions?.items) {
+    return (
+      <Alert message="Error" description="Failed to load client devices." type="error" showIcon />
+    );
+  }
+
  return (
-    <NetworkTableContainer
-      activeTab="/network/client-devices"
+    <NetworkTable
      tableColumns={clientDevicesTableColumns}
-      tableData={data?.filterClientSessions?.items}
+      tableData={data && data.filterClientSessions && data.filterClientSessions.items}
      onLoadMore={handleLoadMore}
-      onRefresh={handleOnRefresh}
      isLastPage={data && data.filterClientSessions && data.filterClientSessions.context.lastPage}
-      loading={loading}
-      error={error && !data?.filterClientSessions?.items && 'Failed to load client devices.'}
    />
  );
 };
--- a/app/containers/Network/index.js
+++ b/app/containers/Network/index.js
@@ -1,326 +1,275 @@
 import React, { useMemo, useContext, useState } from 'react';
-import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
-import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
-import { notification } from 'antd';
+import { useLocation, Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
+import { Alert, notification } from 'antd';
 import _ from 'lodash';
-import { Network as NetworkPage, PopoverMenu } from '@tip-wlan/wlan-cloud-ui-library';
+import { Network as NetworkPage, PopoverMenu, Loading } 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 {
-  GET_ALL_LOCATIONS,
-  GET_LOCATION,
-  GET_ALL_PROFILES,
-  FILTER_EQUIPMENT,
-} from 'graphql/queries';
+import { GET_ALL_LOCATIONS, GET_LOCATION, GET_ALL_PROFILES } from 'graphql/queries';
 import {
  CREATE_LOCATION,
  UPDATE_LOCATION,
  DELETE_LOCATION,
  CREATE_EQUIPMENT,
 } from 'graphql/mutations';
-import { updateQueryGetAllProfiles } from 'graphql/functions';

-const Network = withQuery(
-  ({ data, refetch }) => {
-    const { path } = useRouteMatch();
-    const { customerId } = useContext(UserContext);
+const Network = () => {
+  const { path } = useRouteMatch();
+  const { customerId } = useContext(UserContext);
+  const location = useLocation();
+  const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
+    variables: { customerId },
+  });
+  const { loading: loadingProfile, error: errorProfile, data: apProfiles } = useQuery(
+    GET_ALL_PROFILES,
+    {
+      variables: { customerId, type: 'equipment_ap' },
+    }
+  );

-    const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
-      GET_ALL_PROFILES(),
-      {
-        variables: { customerId, type: 'equipment_ap' },
-      }
-    );
+  const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
+  const [createLocation] = useMutation(CREATE_LOCATION);
+  const [updateLocation] = useMutation(UPDATE_LOCATION);
+  const [deleteLocation] = useMutation(DELETE_LOCATION);
+  const [createEquipment] = useMutation(CREATE_EQUIPMENT);
+  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 [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: [
-        {
-          query: FILTER_EQUIPMENT,
-          variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
-        },
-      ],
+  const handleGetSingleLocation = id => {
+    getLocation({
+      variables: { id },
    });
+  };

-    const handleGetSingleLocation = id => {
-      getLocation({
-        variables: { id },
-      });
-    };
+  const formatLocationListForTree = (list = []) => {
+    const checkedTreeLocations = [];
+    list.forEach(ele => {
+      checkedTreeLocations.push(ele.id);
+    });
+    setCheckedLocations(checkedTreeLocations);

-    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));
+    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;
        }
-        return tree;
+        _.each(children, child => unflatten(array, child));
      }
-      return [
-        {
-          title: (
-            <PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
-              Network
-            </PopoverMenu>
-          ),
-          id: '0',
-          key: '0',
-          value: '0',
-          children: unflatten(list),
-        },
-      ];
-    };
+      return tree;
+    }
+    return [
+      {
+        title: (
+          <PopoverMenu locationType="NETWORK" setAddModal={setAddModal}>
+            Network
+          </PopoverMenu>
+        ),
+        id: '0',
+        value: '0',
+        key: '0',
+        children: unflatten(list),
+      },
+    ];
+  };

-    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,
+  const handleAddLocation = (name, parentId, locationType) => {
+    setAddModal(false);
+    createLocation({
+      variables: {
+        locationType,
+        customerId,
+        parentId,
+        name,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully added.',
        });
-      }
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be added.',
+        })
+      );
+  };

-      return true;
-    };
+  const handleEditLocation = (id, parentId, name, locationType, lastModifiedTimestamp) => {
+    setEditModal(false);
+    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 locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
-      data,
-    ]);
+  const handleDeleteLocation = id => {
+    setDeleteModal(false);
+    deleteLocation({ variables: { id } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully deleted.',
+        });
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be deleted.',
+        })
+      );
+  };

-    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} />}
-          />
+  const handleCreateEquipment = (inventoryId, locationId, name, profileId) => {
+    setApModal(false);
+    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.',
+        })
+      );
+  };

-          <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 };
+  const onSelect = (selectedKeys, info) => {
+    const { id } = info.node;
+    handleGetSingleLocation(id);
+  };
+
+  const onCheck = checkedKeys => {
+    setCheckedLocations(checkedKeys.checked);
+  };
+
+  const locationsTree = useMemo(
+    () => formatLocationListForTree(data && data.getAllLocations)[0].children,
+    [data]
+  );
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return <Alert message="Error" description="Failed to load locations." type="error" showIcon />;
+  }
+
+  return (
+    <NetworkPage
+      onSelect={onSelect}
+      onCheck={onCheck}
+      checkedLocations={checkedLocations}
+      locations={locationsTree}
+      activeTab={location.pathname}
+      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}
+    >
+      <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`}
+          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} to={`${path}/access-points`} />
+      </Switch>
+    </NetworkPage>
+  );
+};

 export default Network;
--- a/app/containers/ProfileDetails/index.js
+++ b/app/containers/ProfileDetails/index.js
@@ -1,14 +1,13 @@
 import React, { useState, useContext } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
-import { useQuery, useMutation, gql } from '@apollo/client';
-import { notification } from 'antd';
+import gql from 'graphql-tag';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+import { Alert, Spin, notification } from 'antd';
 import { ProfileDetails as ProfileDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';
 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!) {
@@ -69,179 +68,111 @@ const DELETE_PROFILE = gql`
  }
 `;

-const ProfileDetails = withQuery(
-  ({ data }) => {
-    const { customerId } = useContext(UserContext);
-    const { id } = useParams();
+const ProfileDetails = () => {
+  const { customerId } = useContext(UserContext);
+  const { id } = useParams();

-    const [redirect, setRedirect] = useState(false);
+  const [redirect, setRedirect] = useState(false);

-    const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
-      variables: { customerId, type: 'ssid' },
-    });
+  const { loading, error, data } = useQuery(GET_PROFILE, {
+    variables: { id },
+  });
+  const { data: ssidProfiles } = useQuery(GET_ALL_PROFILES, {
+    variables: { customerId, type: 'ssid' },
+  });
+  const [updateProfile] = useMutation(UPDATE_PROFILE);
+  const [deleteProfile] = useMutation(DELETE_PROFILE);

-    const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
-      GET_ALL_PROFILES(),
-      {
-        variables: { customerId, type: 'radius' },
-      }
-    );
+  const [fileUpload] = useMutation(FILE_UPLOAD);

-    const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
-      GET_ALL_PROFILES(),
-      {
-        variables: { customerId, type: 'captive_portal' },
-      }
-    );
+  const handleDeleteProfile = () => {
+    deleteProfile({ variables: { id } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Profile successfully deleted.',
+        });

-    const [updateProfile] = useMutation(UPDATE_PROFILE);
-    const [deleteProfile] = useMutation(DELETE_PROFILE);
-
-    const [fileUpload] = useMutation(FILE_UPLOAD);
-
-    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.',
-          })
-        );
-    };
-
-    const handleUpdateProfile = (
-      name,
-      details,
-      childProfileIds = data.getProfile.childProfileIds
-    ) => {
-      updateProfile({
-        variables: {
-          ...data.getProfile,
-          name,
-          childProfileIds,
-          details,
-        },
+        setRedirect(true);
      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Profile successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Profile could not be deleted.',
        })
-        .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.',
-          });
+  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.',
        })
-        .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,
+  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.',
+        })
+      );

-      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 (
-      <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 (loading) {
+    return <Spin size="large" />;
  }
-);
+
+  if (error) {
+    return (
+      <Alert message="Error" description="Failed to load profile data." type="error" showIcon />
+    );
+  }
+
+  if (redirect) {
+    return <Redirect to="/profiles" />;
+  }
+
+  return (
+    <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) || []
+      }
+      fileUpload={handleFileUpload}
+    />
+  );
+};

 export default ProfileDetails;
--- a/app/containers/Profiles/index.js
+++ b/app/containers/Profiles/index.js
@@ -1,13 +1,28 @@
-import React, { useContext, useEffect } from 'react';
-import { useMutation, gql } from '@apollo/client';
-import { useLocation } from 'react-router-dom';
-import { notification } from 'antd';
-import { Profile as ProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
+import React, { useContext } from 'react';
+import gql from 'graphql-tag';
+import { useQuery, useMutation } from '@apollo/react-hooks';

-import { GET_ALL_PROFILES } from 'graphql/queries';
-import { updateQueryGetAllProfiles } from 'graphql/functions';
+import { Alert, Spin, notification } from 'antd';
+
+import { Profile as ProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
 import UserContext from 'contexts/UserContext';
-import { withQuery } from 'containers/QueryWrapper';
+
+const GET_ALL_PROFILES = gql`
+  query GetAllProfiles($customerId: ID!, $cursor: String) {
+    getAllProfiles(customerId: $customerId, cursor: $cursor) {
+      items {
+        id
+        name
+        profileType
+        details
+      }
+      context {
+        cursor
+        lastPage
+      }
+    }
+  }
+`;

 const DELETE_PROFILE = gql`
  mutation DeleteProfile($id: ID!) {
@@ -17,85 +32,82 @@ const DELETE_PROFILE = gql`
  }
 `;

-const Profiles = withQuery(
-  ({ data, fetchMore, refetch }) => {
-    const [deleteProfile] = useMutation(DELETE_PROFILE);
-    const { customerId } = useContext(UserContext);
-    const location = useLocation();
+const Profiles = () => {
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_PROFILES, {
+    variables: { customerId },
+  });
+  const [deleteProfile] = useMutation(DELETE_PROFILE);

-    useEffect(() => {
-      if (location.state && location.state.refetch) {
-        refetch({
-          variables: { refresh: Date.now() },
+  const reloadTable = () => {
+    refetch()
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Profiles reloaded.',
        });
-      }
-    }, []);
-
-    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.',
        })
-        .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 handleLoadMore = () => {
+    if (!data.getAllProfiles.context.lastPage) {
+      fetchMore({
+        variables: { cursor: data.getAllProfiles.context.cursor },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const previousEntry = previousResult.getAllProfiles;
+          const newItems = fetchMoreResult.getAllProfiles.items;
+
+          return {
+            getAllProfiles: {
+              context: fetchMoreResult.getAllProfiles.context,
+              items: [...previousEntry.items, ...newItems],
+              __typename: previousEntry.__typename,
+            },
+          };
+        },
+      });
+    }
+  };
+
+  const handleDeleteProfile = id => {
+    deleteProfile({ variables: { id } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Profile successfully deleted.',
        });
-      }
-    };
-
-    const handleDeleteProfile = id => {
-      deleteProfile({
-        variables: { id },
-        refetchQueries: [
-          {
-            query: GET_ALL_PROFILES(`equipmentCount`),
-            variables: { customerId },
-          },
-        ],
      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Profile successfully deleted.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Profile could not be deleted.',
        })
-        .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 (loading) {
+    return <Spin size="large" />;
  }
-);
+
+  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;
--- a/app/containers/QueryWrapper/index.js
+++ b/app/containers/QueryWrapper/index.js
@@ -1,25 +0,0 @@
-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} />;
-};
--- a/app/containers/System/containers/AutoProvision/index.js
+++ b/app/containers/System/containers/AutoProvision/index.js
@@ -1,82 +1,87 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
-import { notification } from 'antd';
-import { AutoProvision as AutoProvisionPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+import { Alert, notification } from 'antd';
+import { AutoProvision as AutoProvisionPage, Loading } 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 { withQuery } from 'containers/QueryWrapper';

-const AutoProvision = withQuery(
-  ({ data, refetch }) => {
-    const { customerId } = useContext(UserContext);
-    const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
+const AutoProvision = () => {
+  const { customerId } = useContext(UserContext);
+  const { data, loading, error, refetch } = useQuery(GET_CUSTOMER, {
+    variables: { id: customerId },
+  });
+  const [updateCustomer] = useMutation(UPDATE_CUSTOMER);

-    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 },
-      }
-    );
+  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' },
+    }
+  );

-    const handleUpdateCustomer = (
-      id,
-      email,
-      name,
-      details,
-      createdTimestamp,
-      lastModifiedTimestamp
-    ) => {
-      updateCustomer({
-        variables: {
-          id,
-          email,
-          name,
-          details,
-          createdTimestamp,
-          lastModifiedTimestamp,
-        },
+  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.',
+        });
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Settings successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Settings could not be 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 };
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return (
+      <Alert message="Error" description="Failed to load Customer Data." type="error" showIcon />
+    );
+  }
+
+  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}
+    />
+  );
+};

 export default AutoProvision;
--- a/app/containers/System/containers/BlockedList/index.js
+++ b/app/containers/System/containers/BlockedList/index.js
@@ -1,76 +1,78 @@
 import React, { useContext } from 'react';
-import { useMutation } from '@apollo/client';
-import { notification } from 'antd';
-import { BlockedList as BlockedListPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+import { Alert, notification } from 'antd';
+import { BlockedList as BlockedListPage, Loading } 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 = withQuery(
-  ({ refetch, data }) => {
-    const { customerId } = useContext(UserContext);
-    const [addClient] = useMutation(ADD_BLOCKED_CLIENT);
-    const [updateClient] = useMutation(UPDATE_CLIENT);
+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 handleAddClient = macAddress => {
-      addClient({
-        variables: {
-          customerId,
-          macAddress,
-        },
+  const handleAddClient = macAddress => {
+    addClient({
+      variables: {
+        customerId,
+        macAddress,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Client successfully 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',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Client could not be added to Blocked List',
-          })
-        );
-    };
+      );
+  };

-    const handleUpdateClient = (macAddress, details) => {
-      updateClient({
-        variables: {
-          customerId,
-          macAddress,
-          details,
-        },
+  const handleUpdateClient = (macAddress, details) => {
+    updateClient({
+      variables: {
+        customerId,
+        macAddress,
+        details,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Client successfully 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',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Client could not be removed from Blocked List',
-          })
-        );
-    };
+      );
+  };

+  if (loading) return <Loading />;
+
+  if (error)
    return (
-      <BlockedListPage
-        data={data && data.getBlockedClients}
-        onUpdateClient={handleUpdateClient}
-        onAddClient={handleAddClient}
-      />
+      <Alert message="Error" description="Failed to load Client Data." type="error" showIcon />
    );
-  },
-  GET_BLOCKED_CLIENTS,
-  () => {
-    const { customerId } = useContext(UserContext);
-    return customerId;
-  }
-);
+
+  return (
+    <BlockedListPage
+      data={data && data.getBlockedClients}
+      onUpdateClient={handleUpdateClient}
+      onAddClient={handleAddClient}
+    />
+  );
+};

 export default BlockedList;
--- a/app/containers/System/containers/Firmware/index.js
+++ b/app/containers/System/containers/Firmware/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
+import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
 import { notification } from 'antd';
 import {
  GET_ALL_FIRMWARE,
@@ -83,18 +83,8 @@ const Firmware = () => {
    firmwareVersionRecordId,
    modelId,
    createdTimestamp,
-    lastModifiedTimestamp,
-    prevFirmwareVersionRecordId
+    lastModifiedTimestamp
  ) => {
-    if (prevFirmwareVersionRecordId !== firmwareVersionRecordId) {
-      deleteTrackAssignment({
-        variables: {
-          firmwareTrackId: firmwareTrackData.getFirmwareTrack.recordId,
-          firmwareVersionId: prevFirmwareVersionRecordId,
-        },
-      });
-    }
-
    updateTrackAssignment({
      variables: {
        trackRecordId: firmwareTrackData.getFirmwareTrack.recordId,
@@ -140,7 +130,6 @@ const Firmware = () => {
        })
      );
  };
-
  const handleCreateFirmware = (
    modelId,
    versionName,
--- a/app/containers/System/containers/Manufacturer/index.js
+++ b/app/containers/System/containers/Manufacturer/index.js
@@ -1,11 +1,9 @@
-import React, { useState } from 'react';
-import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client';
+import React from 'react';
+import gql from 'graphql-tag';
+import { useMutation, useLazyQuery } from '@apollo/react-hooks';
 import { notification } from 'antd';
 import { Manufacturer as ManufacturerPage } from '@tip-wlan/wlan-cloud-ui-library';
-
-import { AUTH_TOKEN } from 'constants/index';
-import { GET_API_URL } from 'graphql/queries';
-import { getItem } from 'utils/localStorage';
+import { OUI_UPLOAD } from 'graphql/mutations';

 const GET_OUI = gql`
  query GetOui($oui: String!) {
@@ -30,12 +28,7 @@ const UPDATE_OUI = gql`
    }
  }
 `;
-
 const System = () => {
-  const token = getItem(AUTH_TOKEN);
-  const [loadingFileUpload, setLoadingFileUpload] = useState(false);
-
-  const { data: apiUrl } = useQuery(GET_API_URL);
  const [updateOUI] = useMutation(UPDATE_OUI);
  const [searchOUI, { data }] = useLazyQuery(GET_OUI, {
    onError: () => {
@@ -44,16 +37,8 @@ const System = () => {
        description: 'No matching manufacturer found for OUI',
      });
    },
-    onCompleted: () => {
-      if (!data?.getOui?.oui) {
-        notification.error({
-          message: 'Error',
-          description: 'No matching manufacturer found for OUI',
-        });
-      }
-    },
-    fetchPolicy: 'no-cache',
  });
+  const [fileUpload] = useMutation(OUI_UPLOAD);

  const handleUpdateOUI = (oui, manufacturerAlias, manufacturerName) => {
    updateOUI({
@@ -81,54 +66,33 @@ const System = () => {
    searchOUI({ variables: { oui } });
  };

-  const handleFileUpload = (fileName, file) => {
-    if (apiUrl?.getApiUrl) {
-      setLoadingFileUpload(true);
-
-      fetch(`${apiUrl?.getApiUrl}portal/manufacturer/oui/upload?fileName=${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(() => {
+  const handleFileUpload = (fileName, file) =>
+    fileUpload({ variables: { fileName, file } })
+      .then(resp => {
+        if (resp?.ouiUpload?.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.',
        })
-        .finally(() => setLoadingFileUpload(false));
-    } else {
-      notification.error({
-        message: 'Error',
-        description: 'File could not be uploaded.',
-      });
-    }
-  };
-
+      );
  return (
    <ManufacturerPage
      onSearchOUI={handleSearchOUI}
      onUpdateOUI={handleUpdateOUI}
      returnedOUI={data && data.getOui}
      fileUpload={handleFileUpload}
-      loadingFileUpload={loadingFileUpload}
    />
  );
 };
--- a/app/graphql/functions.js
+++ b/app/graphql/functions.js
@@ -1,12 +0,0 @@
-export const updateQueryGetAllProfiles = (previousResult, { fetchMoreResult }) => {
-  const previousEntry = previousResult.getAllProfiles;
-  const newItems = fetchMoreResult.getAllProfiles.items;
-
-  return {
-    getAllProfiles: {
-      context: { ...fetchMoreResult.getAllProfiles.context },
-      items: [...previousEntry.items, ...newItems],
-      __typename: previousEntry.__typename,
-    },
-  };
-};
--- a/app/graphql/mutations.js
+++ b/app/graphql/mutations.js
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';

 export const REFRESH_TOKEN = gql`
  mutation UpdateToken($refreshToken: String!) {
@@ -99,22 +99,6 @@ export const UPDATE_EQUIPMENT_FIRMWARE = gql`
  }
 `;

-export const REQUEST_EQUIPMENT_SWITCH_BANK = gql`
-  mutation RequestEquipmentSwitchBank($equipmentId: ID) {
-    requestEquipmentSwitchBank(equipmentId: $equipmentId) {
-      success
-    }
-  }
-`;
-
-export const REQUEST_EQUIPMENT_REBOOT = gql`
-  mutation RequestEquipmentReboot($equipmentId: ID) {
-    requestEquipmentReboot(equipmentId: $equipmentId) {
-      success
-    }
-  }
-`;
-
 export const UPDATE_TRACK_ASSIGNMENT = gql`
  mutation UpdateFirmwareTrackAssignment(
    $trackRecordId: ID!
--- a/app/graphql/queries.js
+++ b/app/graphql/queries.js
@@ -1,10 +1,4 @@
-import { gql } from '@apollo/client';
-
-export const GET_API_URL = gql`
-  query GetApiUrl {
-    getApiUrl
-  }
-`;
+import gql from 'graphql-tag';

 export const GET_ALL_LOCATIONS = gql`
  query GetAllLocations($customerId: ID!) {
@@ -22,13 +16,13 @@ export const FILTER_EQUIPMENT = gql`
    $locationIds: [ID]
    $customerId: ID!
    $equipmentType: String
-    $context: JSONObject
+    $cursor: String
  ) {
    filterEquipment(
      customerId: $customerId
      locationIds: $locationIds
      equipmentType: $equipmentType
-      context: $context
+      cursor: $cursor
    ) {
      items {
        name
@@ -67,12 +61,12 @@ export const FILTER_EQUIPMENT = gql`
              numClientsPerRadio
            }
          }
-          firmware {
-            detailsJSON
-          }
        }
      }
-      context
+      context {
+        lastPage
+        cursor
+      }
    }
  }
 `;
@@ -82,13 +76,13 @@ export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
    $locationIds: [ID]
    $customerId: ID!
    $equipmentType: String
-    $context: JSONObject
+    $cursor: String
  ) {
    filterEquipment(
      customerId: $customerId
      locationIds: $locationIds
      equipmentType: $equipmentType
-      context: $context
+      cursor: $cursor
    ) {
      items {
        name
@@ -97,7 +91,10 @@ export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
        channel
        details
      }
-      context
+      context {
+        lastPage
+        cursor
+      }
    }
  }
 `;
@@ -115,8 +112,8 @@ export const GET_LOCATION = gql`
 `;

 export const FILTER_CLIENT_SESSIONS = gql`
-  query FilterClientSessions($customerId: ID!, $locationIds: [ID], $context: JSONObject) {
-    filterClientSessions(customerId: $customerId, locationIds: $locationIds, context: $context) {
+  query FilterClientSessions($customerId: ID!, $locationIds: [ID], $cursor: String) {
+    filterClientSessions(customerId: $customerId, locationIds: $locationIds, cursor: $cursor) {
      items {
        id
        macAddress
@@ -126,12 +123,14 @@ export const FILTER_CLIENT_SESSIONS = gql`
        radioType
        signal
        manufacturer
-        details
        equipment {
          name
        }
      }
-      context
+      context {
+        lastPage
+        cursor
+      }
    }
  }
 `;
@@ -158,7 +157,7 @@ export const GET_CLIENT_SESSION = gql`
 export const FILTER_SERVICE_METRICS = gql`
  query FilterServiceMetrics(
    $customerId: ID!
-    $context: JSONObject
+    $cursor: String
    $fromTime: String!
    $toTime: String!
    $clientMacs: [String]
@@ -168,7 +167,7 @@ export const FILTER_SERVICE_METRICS = gql`
  ) {
    filterServiceMetrics(
      customerId: $customerId
-      context: $context
+      cursor: $cursor
      fromTime: $fromTime
      toTime: $toTime
      clientMacs: $clientMacs
@@ -182,36 +181,28 @@ export const FILTER_SERVICE_METRICS = gql`
        rssi
        rxBytes
        txBytes
-        detailsJSON
      }
-      context
+      context {
+        lastPage
+        cursor
+      }
    }
  }
 `;

-export const GET_ALL_PROFILES = (fields = '') => gql`
-  query GetAllProfiles(
-    $customerId: ID!
-    $cursor: String
-    $limit: Int
-    $type: String
-    $context: JSONObject
-  ) {
-    getAllProfiles(
-      customerId: $customerId
-      cursor: $cursor
-      limit: $limit
-      type: $type
-      context: $context
-    ) {
+export const GET_ALL_PROFILES = gql`
+  query GetAllProfiles($customerId: ID!, $cursor: String, $type: String) {
+    getAllProfiles(customerId: $customerId, cursor: $cursor, type: $type) {
      items {
        id
        name
        profileType
        details
-        ${fields}
      }
-      context
+      context {
+        cursor
+        lastPage
+      }
    }
  }
 `;
@@ -227,7 +218,10 @@ export const GET_ALL_STATUS = gql`
          clientCountPerOui
        }
      }
-      context
+      context {
+        lastPage
+        cursor
+      }
    }
  }
 `;
@@ -303,7 +297,7 @@ export const FILTER_SYSTEM_EVENTS = gql`
    $toTime: String!
    $equipmentIds: [ID]
    $dataTypes: [String]
-    $context: JSONObject
+    $cursor: String
    $limit: Int
  ) {
    filterSystemEvents(
@@ -312,11 +306,14 @@ export const FILTER_SYSTEM_EVENTS = gql`
      toTime: $toTime
      dataTypes: $dataTypes
      equipmentIds: $equipmentIds
-      context: $context
+      cursor: $cursor
      limit: $limit
    ) {
      items
-      context
+      context {
+        lastPage
+        cursor
+      }
    }
  }
 `;
--- a/app/index.html
+++ b/app/index.html
@@ -9,7 +9,6 @@

    <!-- Allow installing the app to the homescreen -->
    <meta name="mobile-web-app-capable" content="yes" />
-    <script type="text/javascript" src="/config.js"></script>
  </head>

  <body>
--- a/app/index.js
+++ b/app/index.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
-import { ApolloClient, ApolloProvider, ApolloLink, Observable } from '@apollo/client';
-import { InMemoryCache } from '@apollo/client/cache';
-import { onError } from '@apollo/client/link/error';
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { onError } from 'apollo-link-error';
 import { createUploadLink } from 'apollo-upload-client';
+import { ApolloLink, Observable } from 'apollo-link';
+import { ApolloProvider } from '@apollo/react-hooks';

 import 'styles/antd.less';
 import 'styles/index.scss';
@@ -15,13 +17,16 @@ import { REFRESH_TOKEN } from 'graphql/mutations';
 import { getItem, setItem, removeItem } from 'utils/localStorage';
 import history from 'utils/history';

-const API_URI = process.env.NODE_ENV === 'production' ? window.REACT_APP_API : process.env.API;
+const API_URI =
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:4000/'
+    : 'https://wlan-graphql.zone3.lab.connectus.ai/';
 const MOUNT_NODE = document.getElementById('root');

 const cache = new InMemoryCache();

 const uploadLink = createUploadLink({
-  uri: `${API_URI}/graphql`,
+  uri: API_URI,
 });

 const request = async operation => {
--- a/docker_entrypoint.sh
+++ b/docker_entrypoint.sh
@@ -1,3 +0,0 @@
-#!/bin/sh -eu
-./generate_config_js.sh >/usr/share/nginx/html/config.js
-nginx -g "daemon off;"
--- a/generate_config_js.sh
+++ b/generate_config_js.sh
@@ -1,10 +0,0 @@
-#!/bin/sh -eu
-if [ -z "${API:-}" ]; then
-    API_URL_JSON=undefined
-else
-    API_URL_JSON=$(jq -n --arg api "$API" '$api')
-fi
- 
-cat <<EOF
-window.REACT_APP_API = $API_URL_JSON;
-EOF
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "wlan-cloud-ui",
-  "version": "0.5.3",
+  "version": "0.2.3",
  "author": "ConnectUs",
  "description": "React Portal",
  "engines": {
@@ -10,8 +10,6 @@
  "scripts": {
    "test": "jest --passWithNoTests --coverage",
    "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\"",
    "eslint-fix": "eslint --fix \"app/**/*.js\"",
@@ -20,13 +18,20 @@
  "license": "MIT",
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
-    "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^0.3.16",
-    "antd": "^4.5.2",
+    "@apollo/react-hoc": "^3.1.4",
+    "@apollo/react-hooks": "^3.1.3",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.2.3",
+    "antd": "^4.3.1",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-error": "^1.1.13",
+    "apollo-link-http": "^1.5.17",
    "apollo-upload-client": "^13.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "graphql": "^14.6.0",
-    "highcharts": "^8.1.0",
+    "graphql-tag": "^2.10.3",
+    "highcharts": "^8.1.1",
    "highcharts-react-official": "^3.0.0",
    "history": "^4.10.1",
    "html-webpack-plugin": "^3.2.0",
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,6 @@ const common = require('./webpack/webpack.common');
 const envs = {
  development: 'dev',
  production: 'prod',
-  bare: 'bare',
 };
 /* eslint-disable global-require,import/no-dynamic-require */
 const env = envs[process.env.NODE_ENV || 'production'];
--- a/webpack/webpack.bare.js
+++ b/webpack/webpack.bare.js
@@ -1,73 +0,0 @@
-const path = require('path');
-
-const commonPaths = require('./paths');
-
-module.exports = {
-  mode: 'development',
-  output: {
-    path: commonPaths.outputPath,
-    publicPath: '/',
-    filename: '[name].js',
-    chunkFilename: '[name].js',
-  },
-  devtool: 'inline-source-map',
-  devServer: {
-    port: 3000,
-    historyApiFallback: true,
-    contentBase: commonPaths.outputPath,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(css|scss)$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-              },
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader', // compiles Less to CSS
-            options: {
-              lessOptions: {
-                javascriptEnabled: true,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    modules: ['node_modules', 'app'],
-    alias: {
-      app: path.resolve(__dirname, '../', 'app'),
-      react: path.resolve(__dirname, '../', 'node_modules', 'react'),
-      'react-router-dom': path.resolve('./node_modules/react-router-dom'),
-    },
-  },
-};
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -22,6 +22,23 @@ module.exports = {
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
    ],
  },
  plugins: [
@@ -30,7 +47,7 @@ module.exports = {
      favicon: './app/images/favicon.ico',
    }),
    new webpack.DefinePlugin({
-      'process.env.API': JSON.stringify(process.env.API || 'http://localhost:4000'),
+      'process.env.GRAPHQL_URL': JSON.stringify(process.env.GRAPHQL_URL),
    }),
  ],
 };
--- a/webpack/webpack.dev.js
+++ b/webpack/webpack.dev.js
@@ -34,26 +34,6 @@ module.exports = {
          },
          {
            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader', // compiles Less to CSS
-            options: {
-              javascriptEnabled: true,
-            },
          },
        ],
      },
--- a/webpack/webpack.prod.js
+++ b/webpack/webpack.prod.js
@@ -14,7 +14,6 @@ module.exports = {
    chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
  },
  optimization: {
-    minimize: true,
    minimizer: [
      new TerserPlugin({
        // Use multi-process parallel running to improve the build speed
@@ -68,21 +67,6 @@ module.exports = {
          'sass-loader',
        ],
      },
-      {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader', // compiles Less to CSS
-            options: {
-              javascriptEnabled: true,
-            },
-          },
-        ],
-      },
    ],
  },
  resolve: {