wlan-cloud-ui/app/containers/Network/containers/ClientDevices/index.js

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 { ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
import UserContext from 'contexts/UserContext';
import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';

const clientDevicesTableColumns = [
  {
    title: '',
    dataIndex: 'name',
  },
  {
    title: 'MAC',
    dataIndex: 'macAddress',
  },
  { title: 'MANUFACTURER', dataIndex: 'manufacturer' },
  { title: 'IP', dataIndex: 'ipAddress' },
  { title: 'HOST NAME', dataIndex: 'hostname' },
  { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
  { title: 'SSID', dataIndex: 'ssid' },
  {
    title: 'BAND',
    dataIndex: 'radioType',
    render: band => USER_FRIENDLY_RADIOS[band],
  },
  { title: 'SIGNAL', dataIndex: 'signal' },
  {
    title: 'STATUS',
    dataIndex: ['details', 'associationState'],
    render: text => {
      if (text === 'Active_Data') {
        return 'Connected';
      }
      if (text === 'Disconnected') {
        return 'Disconnected';
      }
      return 'N/A';
    },
  },
];

const ClientDevices = ({ checkedLocations }) => {
  const { customerId } = useContext(UserContext);
  const [filterClientSessions, { loading, error, data, refetch, fetchMore }] = useLazyQuery(
    FILTER_CLIENT_SESSIONS,
    {
      errorPolicy: 'all',
    }
  );

  const handleLoadMore = () => {
    if (!data.filterClientSessions.context.lastPage) {
      fetchMore({
        variables: { context: data.filterClientSessions.context },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          const previousEntry = previousResult.filterClientSessions;
          const newItems = fetchMoreResult.filterClientSessions.items;

          return {
            filterClientSessions: {
              context: fetchMoreResult.filterClientSessions.context,
              items: [...previousEntry.items, ...newItems],
              __typename: previousEntry.__typename,
            },
          };
        },
      });
    }
  };

  const fetchFilterClientSessions = async () => {
    filterClientSessions({
      variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
    });
  };

  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]);

  return (
    <NetworkTableContainer
      activeTab={ROUTES.clientDevices}
      tableColumns={clientDevicesTableColumns}
      tableData={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.'}
    />
  );
};

ClientDevices.propTypes = {
  checkedLocations: PropTypes.instanceOf(Array).isRequired,
};

export default ClientDevices;