device.view.table.tsx

import { insertMarkTags } from "@helper/text";
import { useAppSelector } from "@hooks";
import DOMPurify from 'dompurify';
import { MutableRefObject, useCallback, useRef } from "react";
import { OverlayTrigger, Table, Tooltip } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { useDeviceTableViewModel } from "../view_model/device.table.viewmodel";

const cropUUID = (uuid: string): string => {
    return uuid.substring(0, 3) + "..." + uuid.substring(uuid.length - 3, uuid.length);
}

export const DeviceViewTable = (searchRef: MutableRefObject<HTMLInputElement>) => {
    const { devices, pnds, selected: selectedDevice } = useAppSelector(state => state.device);
    const { t } = useTranslation('common');
    const tableRef = useRef();
    const { trClickHandler } = useDeviceTableViewModel(searchRef, tableRef);

    const getDeviceTable = useCallback(() => {
        const search = searchRef.current?.value;
        let filtered = devices

        // filter if something is in search
        if (search) {
            filtered = devices.filter((device) => {
                const user = pnds.find(pnd => pnd.id === device.pid);

                return device.id?.includes(search) ||
                    device.name?.includes(search) ||
                    user?.name?.includes(search);
            })
        }

        return filtered.map((device, index) => {
            const user = pnds.find(pnd => pnd.id === device.pid);

            const username = user?.name || ''
            const deviceId = device.id!;
            const cropedId = cropUUID(deviceId)
            const devicename = device.name || '';

            const rowData = username + ";" + deviceId + ";" + devicename

            return (
                <tr data-copy-value={rowData} key={index} onClick={() => trClickHandler(device)} className={selectedDevice?.device.id === deviceId ? 'active' : ''}>
                    <td data-copy-value={devicename} dangerouslySetInnerHTML={{ __html: search ? insertMarkTags(devicename, search) : DOMPurify.sanitize(devicename) }}></td>
                    <OverlayTrigger overlay={<Tooltip id={device.id}>{deviceId}</Tooltip>}>
                        <td data-copy-value={deviceId} dangerouslySetInnerHTML={{ __html: search ? insertMarkTags(cropedId, search) : DOMPurify.sanitize(cropedId) }}></td>
                    </OverlayTrigger>
                    <td data-copy-value={username} dangerouslySetInnerHTML={{ __html: search ? insertMarkTags(username, search) : DOMPurify.sanitize(username) }}></td>
                </tr>
            )
        })
    }, [devices, searchRef, pnds, selectedDevice, trClickHandler]);

    return (
        <Table striped responsive className="device-table" ref={tableRef}>
            <thead>
                <tr>
                    <th>{t('device.table.header.name')}</th>
                    <th>{t('device.table.header.uuid')}</th>
                    <th>{t('device.table.header.user')}</th>
                </tr>
            </thead>
            <tbody>
                {getDeviceTable()}
            </tbody>
        </Table>
    )
}