blocked list page

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

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+import { Alert, notification } from 'antd';
+import { GET_BLOCKED_CLIENTS } from 'graphql/queries';
+import { UPDATE_CLIENT } from 'graphql/mutations';
+import { BlockedList as BlockedListPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import UserContext from 'contexts/UserContext';
+
+const BlockedList = () => {
+  const { customerId } = useContext(UserContext);
+  const { data, error, loading, refetch } = useQuery(GET_BLOCKED_CLIENTS, {
+    variables: { customerId },
+  });
+
+  const [updateClient] = useMutation(UPDATE_CLIENT);
+
+  const handleUpdateClient = (macAddress, details) => {
+    updateClient({
+      variables: {
+        customerId,
+        macAddress,
+        details,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Client Blocked List settings successfully updated.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Client Blocked List settings could not be updated.',
+        })
+      );
+  };
+
+  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} onUpdateClient={handleUpdateClient} />
+  );
+};
+
+export default BlockedList;

app/containers/System/index.js

@@ -6,6 +6,7 @@ import { System as SystemPage } from '@tip-wlan/wlan-cloud-ui-library';
 import Manufacturer from 'containers/System/containers/Manufacturer';
 import Firmware from 'containers/System/containers/Firmware';
 import AutoProvision from 'containers/System/containers/AutoProvision';
+import BlockedList from 'containers/System/containers/BlockedList';
 
 const System = () => {
   const { path } = useRouteMatch();
@@ -16,6 +17,7 @@ const System = () => {
         <Route exact path={`${path}/manufacturer`} component={Manufacturer} />
         <Route exact path={`${path}/firmware`} component={Firmware} />
         <Route exact path={`${path}/autoprovision`} component={AutoProvision} />
+        <Route exact path={`${path}/blockedlist`} component={BlockedList} />
 
         <Redirect from={path} to={`${path}/manufacturer`} />
       </Switch>

app/graphql/mutations.js

@@ -265,3 +265,27 @@ export const UPDATE_CUSTOMER = gql`
     }
   }
 `;
+
+export const UPDATE_CLIENT = gql`
+  mutation UpdateClient(
+    $customerId: ID!
+    $macAddress: String
+    $details: JSONObject
+    $createdTimestamp: String
+    $lastModifiedTimestamp: String
+  ) {
+    updateClient(
+      customerId: $customerId
+      macAddress: $macAddress
+      details: $details
+      createdTimestamp: $createdTimestamp
+      lastModifiedTimestamp: $lastModifiedTimestamp
+    ) {
+      customerId
+      macAddress
+      createdTimestamp
+      lastModifiedTimestamp
+      details
+    }
+  }
+`;

app/graphql/queries.js

@@ -317,3 +317,15 @@ export const FILTER_SYSTEM_EVENTS = gql`
     }
   }
 `;
+
+export const GET_BLOCKED_CLIENTS = gql`
+  query GetBlockedClients($customerId: ID!) {
+    getBlockedClients(customerId: $customerId) {
+      customerId
+      macAddress
+      createdTimestamp
+      lastModifiedTimestamp
+      details
+    }
+  }
+`;