Newer
Older
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 = () => {
const subscription = subscribe({
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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(() => {
return
}
const unsubscribe = registerMenuOptions()
return () => {
unsubscribe()
}
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
}
}