device.viewmodel.ts

import { api, NetworkelementFlattenedManagedNetworkElement, NetworkelementGetAllFlattenedResponse, NetworkElementServiceGetAllFlattenedApiArg } from "@api/api";
import { useAppSelector } from "@hooks";
import { setDevices } from "@reducer/device.reducer";
import { QueryActionCreatorResult } from "@reduxjs/toolkit/query";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "src/stores";

const FETCH_DEVICES_INTERVAL = 15000; // in ms


export const useDeviceViewModel = () => {
    const { user } = useAppSelector(state => state.user);
    const [triggerFetchDevices] = api.endpoints.networkElementServiceGetAllFlattened.useLazyQuerySubscription({
        pollingInterval: FETCH_DEVICES_INTERVAL,
        skipPollingIfUnfocused: true
    });
    const dispatch = useDispatch<AppDispatch>();


    // TODO figure out how we get the proper response type here
    let fetchDevicesSubscription: QueryActionCreatorResult<any> | undefined;


    useEffect(() => {
        fetchDevices();

        return () => {
            fetchDevicesSubscription?.unsubscribe();
        }
    }, [])

    const fetchDevices = () => {
        const payload: NetworkElementServiceGetAllFlattenedApiArg = {
            pid: Object.keys(user?.roles)[0],
            timestamp: new Date().getTime().toString(),
        }

        fetchDevicesSubscription = triggerFetchDevices(payload);
        fetchDevicesSubscription.then((response) => {
            const { mne } = response.data as NetworkelementGetAllFlattenedResponse;
            dispatch(setDevices(mne));
        });
    }

    return {
    }
}