device.view.table.tsx

import { useAppSelector } from "@hooks";
import { useDeviceTableViewModel } from "@viewmodel/device.table.viewmodel";
import { MutableRefObject, useCallback } from "react";
import { OverlayTrigger, Table, Tooltip } from "react-bootstrap";
import { useTranslation } from "react-i18next";

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


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

    const getDeviceTable = useCallback(() => {
        return devices.filter((device) => {
            if (!searchRef.current?.value) {
                return true;
            }

            const searchInput = searchRef.current!.value;
            const user = pnds.find(pnd => pnd.id === device.pid);

            return device.id.includes(searchInput) || device.name.includes(searchInput) || user?.name.includes(searchInput);
        }).map((device, index) => {
            const user = pnds.find(pnd => pnd.id === device.pid);

            return (
                <tr key={index} onClick={() => trClickHandler(device)}>
                    <td>{device.name}</td>
                    <OverlayTrigger overlay={<Tooltip id={device.id}>{device.id}</Tooltip>}>
                        <td>{cropUUID(device.id)}</td>
                    </OverlayTrigger>
                    <td>{user?.name || ''}</td>
                    <td></td>
                </tr>
            )
        })
    }, [searchTerm, devices, pnds]);


    return (
        <Table striped responsive>
            <thead>
                <tr>
                    <th>{t('device.table.header.name')}</th>
                    <th>{t('device.table.header.uuid')}</th>
                    <th>{t('device.table.header.user')}</th>
                    <th>{t('device.table.header.last_updated')}</th>
                </tr>
            </thead>
            <tbody>
                {getDeviceTable()}
            </tbody>
        </Table>
    )
}