wlan-cloud-ucentralgw-ui/src/components/WifiScanResultModal/index.js

/* eslint-disable-rule prefer-destructuring */
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CButton, CModal, CModalHeader, CModalBody, CModalTitle, CPopover } from '@coreui/react';
import CIcon from '@coreui/icons-react';
import { cilCloudDownload, cilX } from '@coreui/icons';
import PropTypes from 'prop-types';
import { prettyDate, prettyDateForFile } from 'utils/helper';
import { useDevice } from 'ucentral-libs';
import { CSVLink } from 'react-csv';
import WifiChannelTable from './WifiChannelTable';
import IeDisplay from './IeDisplay';

const WifiScanResultModal = ({ show, toggle, scanResults, date }) => {
  const { t } = useTranslation();
  const { deviceSerialNumber } = useDevice();
  const [selectedIes, setSelectedIes] = useState(undefined);

  const getData = useMemo(() => {
    if (scanResults === null || scanResults.length === 0) return [];
    const dbmNumber = 4294967295;
    const listOfChannels = [];
    const listCsv = [];

    scanResults.forEach((scan) => {
      if (!listOfChannels.includes(scan.channel)) {
        listOfChannels.push(scan.channel);
      }
    });

    listOfChannels.forEach((channelNumber) => {
      const channel = {
        channel: channelNumber,
        devices: [],
      };
      scanResults.forEach((device) => {
        if (device.channel === channelNumber) {
          const deviceToAdd = {};
          if (device.ssid && device.ssid.length > 0) deviceToAdd.SSID = device.ssid;
          else {
            deviceToAdd.SSID = device.meshid && device.meshid.length > 0 ? device.meshid : 'N/A';
          }
          deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
          channel.devices.push(deviceToAdd);
          listCsv.push({ ...deviceToAdd, ...device, ies: JSON.stringify(device.ies, null, 4) });
        }
      });
    });
    return listCsv;
  }, [scanResults]);

  const parseThroughList = useMemo(() => {
    if (!scanResults) return null;
    const dbmNumber = 4294967295;
    const listOfChannels = [];

    scanResults.forEach((scan) => {
      if (!listOfChannels.includes(scan.channel)) {
        listOfChannels.push(scan.channel);
      }
    });

    const finalList = [];
    listOfChannels.forEach((channelNumber) => {
      const channel = {
        channel: channelNumber,
        devices: [],
      };

      scanResults.forEach((device) => {
        if (device.channel === channelNumber) {
          const deviceToAdd = {};
          if (device.ssid && device.ssid.length > 0) deviceToAdd.SSID = device.ssid;
          else {
            deviceToAdd.SSID = device.meshid && device.meshid.length > 0 ? device.meshid : 'N/A';
          }
          deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
          deviceToAdd.ies = device.ies;
          channel.devices.push(deviceToAdd);
        }
      });

      finalList.push(channel);
    });
    return finalList;
  }, [scanResults]);

  useEffect(() => {
    setSelectedIes(undefined);
  }, [show]);

  return (
    <CModal size="lg" show={show} onClose={toggle}>
      <CModalHeader>
        <CModalTitle className="text-dark">
          {date !== '' ? prettyDate(date) : ''} {t('scan.results')}
        </CModalTitle>
        <div className="text-right">
          <CPopover content={t('common.download')}>
            <CSVLink
              filename={`wifi_scan_${deviceSerialNumber}_${
                date !== '' ? prettyDateForFile(date) : ''
              }.csv`}
              data={getData}
            >
              <CButton color="primary" variant="outline" className="ml-2">
                <CIcon content={cilCloudDownload} />
              </CButton>
            </CSVLink>
          </CPopover>
          <CPopover content={t('common.close')}>
            <CButton color="primary" variant="outline" className="ml-2" onClick={toggle}>
              <CIcon content={cilX} />
            </CButton>
          </CPopover>
        </div>
      </CModalHeader>
      <CModalBody>
        {selectedIes && <IeDisplay ies={selectedIes} setIes={setSelectedIes} />}
        {selectedIes || scanResults === null ? null : (
          <WifiChannelTable channels={parseThroughList} setIes={setSelectedIes} />
        )}
      </CModalBody>
    </CModal>
  );
};

WifiScanResultModal.propTypes = {
  show: PropTypes.bool.isRequired,
  toggle: PropTypes.func.isRequired,
  scanResults: PropTypes.instanceOf(Array),
  date: PropTypes.string.isRequired,
};

WifiScanResultModal.defaultProps = {
  scanResults: [],
};

export default WifiScanResultModal;