added wrapper for missed components

app/containers/Accounts/index.js

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation, gql } from '@apollo/client';
-import { Alert, notification } from 'antd';
+import { useMutation, gql } from '@apollo/client';
+import { notification } from 'antd';
 
-import { Accounts as AccountsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { Accounts as AccountsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
 
 const GET_ALL_USERS = gql`
   query GetAllUsers($customerId: ID!, $context: JSONObject) {
@@ -65,12 +66,10 @@ const DELETE_USER = gql`
   }
 `;
 
-const Accounts = () => {
+const Accounts = withQuery(
+  ({ data, fetchMore, refetch }) => {
     const { customerId } = useContext(UserContext);
 
-  const { data, loading, error, refetch, fetchMore } = useQuery(GET_ALL_USERS, {
-    variables: { customerId },
-  });
     const [createUser] = useMutation(CREATE_USER);
     const [updateUser] = useMutation(UPDATE_USER);
     const [deleteUser] = useMutation(DELETE_USER);
@@ -162,14 +161,6 @@ const Accounts = () => {
         );
     };
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load Users." type="error" showIcon />;
-  }
-
     return (
       <AccountsPage
         data={data.getAllUsers.items}
@@ -180,5 +171,12 @@ const Accounts = () => {
         isLastPage={data.getAllUsers.context.lastPage}
       />
     );
-};
+  },
+  GET_ALL_USERS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId };
+  }
+);
+
 export default Accounts;

app/containers/Alarms/index.js

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
-import { useQuery, gql } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { Alarms as AlarmsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { gql } from '@apollo/client';
+import { notification } from 'antd';
+import { Alarms as AlarmsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { withQuery } from 'containers/QueryWrapper';
 
 import UserContext from 'contexts/UserContext';
 
@@ -23,13 +24,8 @@ const GET_ALL_ALARMS = gql`
   }
 `;
 
-const Alarms = () => {
-  const { customerId } = useContext(UserContext);
-  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_ALARMS, {
-    variables: { customerId },
-    errorPolicy: 'all',
-  });
-
+const Alarms = withQuery(
+  ({ data, refetch, fetchMore }) => {
     const handleOnReload = () => {
       refetch()
         .then(() => {
@@ -66,14 +62,6 @@ const Alarms = () => {
       }
     };
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error && !data?.getAllAlarms?.items) {
-    return <Alert message="Error" description="Failed to load alarms." type="error" showIcon />;
-  }
-
     return (
       <AlarmsPage
         data={data.getAllAlarms.items}
@@ -82,6 +70,12 @@ const Alarms = () => {
         isLastPage={data.getAllAlarms.context.lastPage}
       />
     );
-};
+  },
+  GET_ALL_ALARMS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId, errorPolicy: 'all' };
+  }
+);
 
 export default Alarms;

app/containers/Dashboard/index.js

@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
-import { Alert } from 'antd';
 import moment from 'moment';
 import { useQuery } from '@apollo/client';
-import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { Dashboard as DashboardPage } from '@tip-wlan/wlan-cloud-ui-library';
 import UserContext from 'contexts/UserContext';
 import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
+import { withQuery } from 'containers/QueryWrapper';
 
 function formatBytes(bytes, decimals = 2) {
   if (bytes === 0) return '0 Bytes';
@@ -46,7 +46,9 @@ const lineChartConfig = [
   },
 ];
 
-const Dashboard = () => {
+const Dashboard = withQuery(
+  ({ data }) => {
+    const { customerId } = useContext(UserContext);
     const initialGraphTime = useRef({
       toTime: moment()
         .valueOf()
@@ -56,10 +58,6 @@ const Dashboard = () => {
         .valueOf()
         .toString(),
     });
-  const { customerId } = useContext(UserContext);
-  const { loading, error, data } = useQuery(GET_ALL_STATUS, {
-    variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
-  });
 
     const [lineChartData, setLineChartData] = useState({
       inservicesAPs: {
@@ -161,7 +159,10 @@ const Dashboard = () => {
             traffic: {
               trafficBytesDownstream: {
                 ...prev.traffic.trafficBytesDownstream,
-              value: [...prev.traffic.trafficBytesDownstream.value, ...trafficBytesDownstreamData],
+                value: [
+                  ...prev.traffic.trafficBytesDownstream.value,
+                  ...trafficBytesDownstreamData,
+                ],
               },
               trafficBytesUpstream: {
                 ...prev.traffic.trafficBytesUpstream,
@@ -239,7 +240,8 @@ const Dashboard = () => {
     }, [data]);
 
     const pieChartsData = useMemo(() => {
-    const { clientCountPerOui, equipmentCountPerOui } = data?.getAllStatus?.items[0]?.details || {};
+      const { clientCountPerOui, equipmentCountPerOui } =
+        data?.getAllStatus?.items[0]?.details || {};
 
       return [
         { title: 'AP Vendors', ...equipmentCountPerOui },
@@ -247,14 +249,6 @@ const Dashboard = () => {
       ];
     }, [data]);
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load Dashboard" type="error" showIcon />;
-  }
-
     return (
       <DashboardPage
         statsCardDetails={[
@@ -282,6 +276,12 @@ const Dashboard = () => {
         lineChartError={metricsError}
       />
     );
-};
+  },
+  GET_ALL_STATUS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] };
+  }
+);
 
 export default Dashboard;

app/containers/EditAccount/index.js

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
-import { useMutation, useQuery, gql } from '@apollo/client';
-import { notification, Alert } from 'antd';
-import { EditAccount as EditAccountPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { useMutation, gql } from '@apollo/client';
+import { notification } from 'antd';
+import { EditAccount as EditAccountPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { withQuery } from 'containers/QueryWrapper';
 
 import UserContext from 'contexts/UserContext';
 
@@ -43,9 +44,9 @@ const UPDATE_USER = gql`
   }
 `;
 
-const EditAccount = () => {
+const EditAccount = withQuery(
+  ({ data }) => {
     const { id, email } = useContext(UserContext);
-  const { loading, error, data } = useQuery(GET_USER, { variables: { id } });
     const [updateUser] = useMutation(UPDATE_USER);
 
     const handleSubmit = newPassword => {
@@ -75,15 +76,13 @@ const EditAccount = () => {
         );
     };
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load User." type="error" showIcon />;
-  }
-
     return <EditAccountPage onSubmit={handleSubmit} email={email} />;
-};
+  },
+  GET_USER,
+  () => {
+    const { id } = useContext(UserContext);
+    return { id };
+  }
+);
 
 export default EditAccount;

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

@@ -2,12 +2,9 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 import { useQuery, useMutation, gql } from '@apollo/client';
-import { Alert, notification } from 'antd';
+import { notification } from 'antd';
 import moment from 'moment';
-import {
-  AccessPointDetails as AccessPointDetailsPage,
-  Loading,
-} from '@tip-wlan/wlan-cloud-ui-library';
+import { AccessPointDetails as AccessPointDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { FILTER_SERVICE_METRICS, GET_ALL_FIRMWARE, GET_ALL_PROFILES } from 'graphql/queries';
 import {
@@ -17,6 +14,7 @@ import {
 } from 'graphql/mutations';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
 
 const GET_EQUIPMENT = gql`
   query GetEquipment($id: ID!) {
@@ -126,16 +124,11 @@ const UPDATE_EQUIPMENT = gql`
 const toTime = moment();
 const fromTime = moment().subtract(1, 'hour');
 
-const AccessPointDetails = ({ locations }) => {
+const AccessPointDetails = withQuery(
+  ({ data, refetch, locations }) => {
     const { id } = useParams();
     const { customerId } = useContext(UserContext);
 
-  const { loading, error, data, refetch } = useQuery(GET_EQUIPMENT, {
-    variables: {
-      id,
-    },
-  });
-
     const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
       GET_ALL_FIRMWARE,
       {
@@ -316,21 +309,6 @@ const AccessPointDetails = ({ locations }) => {
       return true;
     };
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return (
-      <Alert
-        message="Error"
-        description="Failed to load Access Point data."
-        type="error"
-        showIcon
-      />
-    );
-  }
-
     return (
       <AccessPointDetailsPage
         handleRefresh={refetchData}
@@ -355,7 +333,13 @@ const AccessPointDetails = ({ locations }) => {
         isLastProfilesPage={dataProfiles?.getAllProfiles?.context?.lastPage}
       />
     );
-};
+  },
+  GET_EQUIPMENT,
+  () => {
+    const { id } = useParams();
+    return { id };
+  }
+);
 
 AccessPointDetails.propTypes = {
   locations: PropTypes.instanceOf(Array).isRequired,

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

@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
-import { useParams } from 'react-router-dom';
+import { useParams, Redirect } from 'react-router-dom';
 import { useQuery, useMutation } from '@apollo/client';
 import { BulkEditAccessPoints, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
@@ -348,6 +348,12 @@ 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 />
     );

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

@@ -2,25 +2,21 @@ import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import moment from 'moment';
-import { Alert, notification } from 'antd';
-import {
-  Loading,
-  ClientDeviceDetails as ClientDevicesDetailsPage,
-} from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { ClientDeviceDetails as ClientDevicesDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 import { GET_CLIENT_SESSION, FILTER_SERVICE_METRICS } from 'graphql/queries';
+import { withQuery } from 'containers/QueryWrapper';
 
 const toTime = moment();
 const fromTime = moment().subtract(4, 'hours');
 
-const ClientDeviceDetails = () => {
+const ClientDeviceDetails = withQuery(
+  ({ data, refetch }) => {
     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,
@@ -54,16 +50,6 @@ const ClientDeviceDetails = () => {
         );
     };
 
-  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]}
@@ -76,6 +62,13 @@ const ClientDeviceDetails = () => {
         historyDate={{ toTime, fromTime }}
       />
     );
-};
+  },
+  GET_CLIENT_SESSION,
+  () => {
+    const { id } = useParams();
+    const { customerId } = useContext(UserContext);
+    return { customerId, macAddress: id, errorPolicy: 'all' };
+  }
+);
 
 export default ClientDeviceDetails;

app/containers/Network/index.js

@@ -1,15 +1,16 @@
 import React, { useMemo, useContext, useState } from 'react';
 import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
 import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
-import { Alert, notification } from 'antd';
+import { notification } from 'antd';
 import _ from 'lodash';
-import { Network as NetworkPage, PopoverMenu, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { Network as NetworkPage, PopoverMenu } from '@tip-wlan/wlan-cloud-ui-library';
 
 import AccessPointDetails from 'containers/Network/containers/AccessPointDetails';
 import AccessPoints from 'containers/Network/containers/AccessPoints';
 import ClientDevices from 'containers/Network/containers/ClientDevices';
 import ClientDeviceDetails from 'containers/Network/containers/ClientDeviceDetails';
 import BulkEditAccessPoints from 'containers/Network/containers/BulkEditAccessPoints';
+import { withQuery } from 'containers/QueryWrapper';
 
 import UserContext from 'contexts/UserContext';
 import {
@@ -26,12 +27,11 @@ import {
 } from 'graphql/mutations';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
 
-const Network = () => {
+const Network = withQuery(
+  ({ data, refetch }) => {
     const { path } = useRouteMatch();
     const { customerId } = useContext(UserContext);
-  const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
-    variables: { customerId },
-  });
+
     const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
       GET_ALL_PROFILES(),
       {
@@ -254,14 +254,6 @@ const Network = () => {
       data,
     ]);
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load locations." type="error" showIcon />;
-  }
-
     return (
       <NetworkPage
         onSelect={onSelect}
@@ -281,7 +273,9 @@ const Network = () => {
         onEditLocation={handleEditLocation}
         onDeleteLocation={handleDeleteLocation}
         onCreateEquipment={handleCreateEquipment}
-      profiles={(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []}
+        profiles={
+          (apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []
+        }
         loadingProfile={loadingProfile}
         errorProfile={errorProfile}
         onFetchMoreProfiles={handleFetchProfiles}
@@ -321,6 +315,12 @@ const Network = () => {
         </Switch>
       </NetworkPage>
     );
-};
+  },
+  GET_ALL_LOCATIONS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId };
+  }
+);
 
 export default Network;

app/containers/ProfileDetails/index.js

@@ -1,13 +1,14 @@
 import React, { useState, useContext } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
 import { useQuery, useMutation, gql } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { ProfileDetails as ProfileDetailsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { ProfileDetails as ProfileDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import 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!) {
@@ -68,17 +69,13 @@ const DELETE_PROFILE = gql`
   }
 `;
 
-const ProfileDetails = () => {
+const ProfileDetails = withQuery(
+  ({ data }) => {
     const { customerId } = useContext(UserContext);
     const { id } = useParams();
 
     const [redirect, setRedirect] = useState(false);
 
-  const { loading, error, data } = useQuery(GET_PROFILE, {
-    variables: { id },
-    fetchPolicy: 'network-only',
-  });
-
     const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
       variables: { customerId, type: 'ssid' },
     });
@@ -216,16 +213,6 @@ const ProfileDetails = () => {
       return true;
     };
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return (
-      <Alert message="Error" description="Failed to load profile data." type="error" showIcon />
-    );
-  }
-
     if (redirect) {
       return <Redirect to="/profiles" />;
     }
@@ -249,6 +236,12 @@ const ProfileDetails = () => {
         onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
       />
     );
-};
+  },
+  GET_PROFILE,
+  () => {
+    const { id } = useParams();
+    return { id, fetchPolicy: 'network-only' };
+  }
+);
 
 export default ProfileDetails;

app/containers/Profiles/index.js

@@ -1,12 +1,13 @@
 import React, { useContext, useEffect } from 'react';
-import { useQuery, useMutation, gql } from '@apollo/client';
+import { useMutation, gql } from '@apollo/client';
 import { useLocation } from 'react-router-dom';
-import { Alert, notification } from 'antd';
-import { Profile as ProfilePage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { Profile as ProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { GET_ALL_PROFILES } from 'graphql/queries';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
 
 const DELETE_PROFILE = gql`
   mutation DeleteProfile($id: ID!) {
@@ -16,16 +17,10 @@ const DELETE_PROFILE = gql`
   }
 `;
 
-const Profiles = () => {
-  const { customerId } = useContext(UserContext);
-  const { loading, error, data, refetch, fetchMore } = useQuery(
-    GET_ALL_PROFILES(`equipmentCount`),
-    {
-      variables: { customerId },
-      fetchPolicy: 'network-only',
-    }
-  );
+const Profiles = withQuery(
+  ({ data, fetchMore, refetch }) => {
     const [deleteProfile] = useMutation(DELETE_PROFILE);
+    const { customerId } = useContext(UserContext);
     const location = useLocation();
 
     useEffect(() => {
@@ -86,15 +81,6 @@ const Profiles = () => {
           })
         );
     };
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <Alert message="Error" description="Failed to load profiles." type="error" showIcon />;
-  }
-
     return (
       <ProfilePage
         data={data.getAllProfiles.items}
@@ -104,6 +90,12 @@ const Profiles = () => {
         onLoadMore={handleLoadMore}
       />
     );
-};
+  },
+  GET_ALL_PROFILES(`equipmentCount`),
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { customerId, fetchPolicy: 'network-only' };
+  }
+);
 
 export default Profiles;

app/containers/QueryWrapper/index.js

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

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

@@ -1,17 +1,16 @@
 import React, { useContext } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { notification } from 'antd';
+import { AutoProvision as AutoProvisionPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 import { GET_CUSTOMER, GET_ALL_LOCATIONS, GET_ALL_PROFILES } from 'graphql/queries';
 import { UPDATE_CUSTOMER } from 'graphql/mutations';
+import { withQuery } from 'containers/QueryWrapper';
 
-const AutoProvision = () => {
+const AutoProvision = withQuery(
+  ({ data, refetch }) => {
     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(
@@ -60,16 +59,6 @@ const AutoProvision = () => {
         );
     };
 
-  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}
@@ -82,6 +71,12 @@ const AutoProvision = () => {
         onUpdateCustomer={handleUpdateCustomer}
       />
     );
-};
+  },
+  GET_CUSTOMER,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return { id: customerId };
+  }
+);
 
 export default AutoProvision;

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

@@ -1,16 +1,15 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
-import { Alert, notification } from 'antd';
-import { BlockedList as BlockedListPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { useMutation } from '@apollo/client';
+import { notification } from 'antd';
+import { BlockedList as BlockedListPage } from '@tip-wlan/wlan-cloud-ui-library';
 import { GET_BLOCKED_CLIENTS } from 'graphql/queries';
 import { UPDATE_CLIENT, ADD_BLOCKED_CLIENT } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
+import { withQuery } from 'containers/QueryWrapper';
 
-const BlockedList = () => {
+const BlockedList = withQuery(
+  ({ refetch, data }) => {
     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);
 
@@ -59,13 +58,6 @@ const BlockedList = () => {
         );
     };
 
-  if (loading) return <Loading />;
-
-  if (error)
-    return (
-      <Alert message="Error" description="Failed to load Client Data." type="error" showIcon />
-    );
-
     return (
       <BlockedListPage
         data={data && data.getBlockedClients}
@@ -73,6 +65,12 @@ const BlockedList = () => {
         onAddClient={handleAddClient}
       />
     );
-};
+  },
+  GET_BLOCKED_CLIENTS,
+  () => {
+    const { customerId } = useContext(UserContext);
+    return customerId;
+  }
+);
 
 export default BlockedList;

package.json

@@ -11,7 +11,7 @@
     "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.zone3.lab.connectus.ai NODE_ENV=development 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\"",