updated changes

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

@@ -1,17 +1,17 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation, useLazyQuery } 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 { GET_BLOCKED_CLIENTS, GET_CLIENTS } from 'graphql/queries';
+import { UPDATE_CLIENT } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
 
 const BlockedList = () => {
   const { customerId } = useContext(UserContext);
+  const [mac, setMac] = useState('');
   const { data, error, loading, refetch } = useQuery(GET_BLOCKED_CLIENTS, {
     variables: { customerId },
   });
-
   const [updateClient] = useMutation(UPDATE_CLIENT);
 
   const handleUpdateClient = (macAddress, details) => {
@@ -37,6 +37,32 @@ const BlockedList = () => {
       );
   };
 
+  const [getClients] = useLazyQuery(GET_CLIENTS, {
+    onCompleted: value => {
+      if (value.getClients.length) {
+        const client = { ...value.getClients[0] };
+        client.details.blocklistDetails.enabled = true;
+        handleUpdateClient(client.macAddress, client.details);
+      } else {
+        const details = {
+          blocklistDetails: { enabled: true },
+          model_type: 'ClientInfoDetails',
+        };
+        handleUpdateClient(mac, details);
+      }
+    },
+  });
+
+  const handleGetClients = macAddress => {
+    getClients({
+      variables: {
+        customerId,
+        macAddress: [macAddress],
+      },
+    });
+    setMac(macAddress);
+  };
+
   if (loading) return <Loading />;
 
   if (error)
@@ -45,7 +71,11 @@ const BlockedList = () => {
     );
 
   return (
-    <BlockedListPage data={data && data.getBlockedClients} onUpdateClient={handleUpdateClient} />
+    <BlockedListPage
+      data={data && data.getBlockedClients}
+      onUpdateClient={handleUpdateClient}
+      onGetClients={handleGetClients}
+    />
   );
 };
 

app/graphql/queries.js

@@ -329,3 +329,15 @@ export const GET_BLOCKED_CLIENTS = gql`
     }
   }
 `;
+
+export const GET_CLIENTS = gql`
+  query GetClients($customerId: ID!, $macAddress: [String]) {
+    getClients(customerId: $customerId, macAddress: $macAddress) {
+      customerId
+      macAddress
+      createdTimestamp
+      lastModifiedTimestamp
+      details
+    }
+  }
+`;