Skip to content
Snippets Groups Projects
information.box.viewmodel.ts 3.15 KiB
Newer Older
  • Learn to ignore specific revisions
  • import { Device, setSelectedDevice } from "@component/devices/reducer/device.reducer";
    import { faCopy } from "@fortawesome/free-solid-svg-icons";
    import { useAppDispatch } from "@hooks";
    import { useMenu } from "@provider/menu/menu.provider";
    import { useUtils } from "@provider/utils.provider";
    import { useEffect, useState } from "react";
    import { useTranslation } from "react-i18next";
    import { toast } from "react-toastify";
    
    export const useInformationViewModel = (searchRef, listRef) => {
        const [searchTerm, setSearchTerm] = useState('');
        const dispatch = useAppDispatch();
        const { subscribe } = useMenu();
        const { toClipboard } = useUtils();
        const { t } = useTranslation('common');
    
    
        const registerMenuOptions = () => {
    
            if (!subscribe) {
                return
            }
    
    
            const subscription = subscribe({
    
                target: listRef.current,
    
                actions: [
                    {
                        key: t('device.table.actions.copy'),
                        icon: faCopy,
                        action: (clickedElement) => {
                            if (clickedElement) {
                                const text = clickedElement.dataset.copyValue
                                if (!text) {
                                    toast.warn(t('global.toast.copied_failed'))
                                    return
                                }
    
    
                                toClipboard(text)
                            }
                        }
                    },
    
                    {
                        key: t('device.table.actions.copy_row'),
                        icon: faCopy,
                        action: (clickedElement) => {
                            let parent = clickedElement;
                            while (parent && parent.tagName !== 'TR') {
                                parent = parent.parentNode;
                            }
    
                            const text = parent.dataset.copyValue
                            if (!text) {
                                toast.warn(t('global.toast.copied_failed'))
                                return
                            }
                            toClipboard(text)
                        }
                    }
                ]
            })
    
            return () => {
                subscription.unsubscribe()
            }
        }
    
        // seperate use effect to rerun this after tableref and subscribe are initialized
        useEffect(() => {
    
            if (!subscribe || !listRef.current) {
    
                return
            }
    
            const unsubscribe = registerMenuOptions()
    
            return () => {
                unsubscribe()
            }
    
        }, [listRef, subscribe])
    
    
    
        useEffect(() => {
            if (!searchRef.current) {
                return
            }
    
            const handleSearchChange = () => {
                setSearchTerm(searchRef.current.value);
            };
    
            searchRef.current.addEventListener('input', handleSearchChange);
    
            return () => {
                if (searchRef.current) {
                    searchRef.current.removeEventListener('input', handleSearchChange);
                }
            };
        }, [searchRef]);
    
        const trClickHandler = (device: Device) => {
            dispatch(setSelectedDevice({ device }));
        }
    
    
        return {
            searchTerm,
            trClickHandler
        }
    }