Загрузка данных


import { DEFAULT_TABLE_PAGINATION_LIMIT } from '@/shared/consts/constants';
import { DrawerType, DrawerTypes } from '@/shared/model/drawer/drawer.types';
import { SettingsPageTypes } from '@/widgets/Settings/types';
import {
  DeviceModel,
  SortType,
  useGetControllerModelsV2Query,
  useGetDeviceModelsV2Query,
  useGetPadletModelsQuery,
} from '@shared/api/controller/client';
import { useSetDrawerType } from '@shared/hooks/drawer/useSetDrawerType';
import { ChangeEvent, MouseEvent, useEffect, useState } from 'react';

const updateModal = new Map([
  [SettingsPageTypes.device, DrawerTypes.updateDeviceModel],
  [SettingsPageTypes.controller, DrawerTypes.updateControllerModel],
  [SettingsPageTypes.padlet, DrawerTypes.updatePadletModel],
]);

type Props = {
  pageType: SettingsPageTypes;
  searchName?: string;
};

const DEFAULT_PAGE = 1;

export const useModelTableState = ({ pageType, searchName }: Props) => {
  const setDrawerType = useSetDrawerType();
  const [page, setPage] = useState(DEFAULT_PAGE);
  const [sortType, setSortType] = useState<SortType>('asc');
  const [isDeleteModelOpen, setIsDeleteModelOpen] = useState(false);
  const [model, setModel] = useState<DeviceModel | undefined>(undefined);
  const [customPageValue, setCustomPageValue] = useState(String(page));

  const offset = page > 1 ? (page - 1) * DEFAULT_TABLE_PAGINATION_LIMIT : 0;

  const { data: deviceData, isFetching: isDeviceDataFetching } =
    useGetDeviceModelsV2Query(
      {
        sortColumn: 'name',
        sortType,
        limit: DEFAULT_TABLE_PAGINATION_LIMIT,
        offset,
        name: searchName,
      },
      { skip: pageType !== SettingsPageTypes.device },
    );

  const { data: controllerData, isFetching: isControllerDataFetching } =
    useGetControllerModelsV2Query(
      {
        sortColumn: 'name',
        sortType,
        limit: DEFAULT_TABLE_PAGINATION_LIMIT,
        offset,
        name: searchName,
      },
      { skip: pageType !== SettingsPageTypes.controller },
    );

  const { data: padletData, isFetching: isPadletDataFetching } =
    useGetPadletModelsQuery(
      {
        sortColumn: 'name',
        sortType,
        limit: DEFAULT_TABLE_PAGINATION_LIMIT,
        offset,
        name: searchName,
      },
      { skip: pageType !== SettingsPageTypes.padlet },
    );

  const handleSortTypeChange = (e: MouseEvent<HTMLElement>) => {
    // @ts-ignore
    setSortType(e.target.dataset.value as SortType);
  };

  const deviceModels = deviceData?.deviceModels || [];
  const controllerModels = controllerData?.controllerModels || [];
  const padletModels = padletData?.padletModels || [];

  const models = new Map([
    [SettingsPageTypes.device, deviceModels],
    [SettingsPageTypes.controller, controllerModels],
    [SettingsPageTypes.padlet, padletModels],
  ]);

  const paginationCount = new Map([
    [
      SettingsPageTypes.device,
      deviceData?.total
        ? Math.ceil(deviceData.total / DEFAULT_TABLE_PAGINATION_LIMIT)
        : 0,
    ],
    [
      SettingsPageTypes.controller,
      controllerData?.total
        ? Math.ceil(controllerData.total / DEFAULT_TABLE_PAGINATION_LIMIT)
        : 0,
    ],
    [
      SettingsPageTypes.padlet,
      padletData?.total
        ? Math.ceil(padletData.total / DEFAULT_TABLE_PAGINATION_LIMIT)
        : 0,
    ],
  ]);

  const isDataFetching = new Map([
    [SettingsPageTypes.device, isDeviceDataFetching],
    [SettingsPageTypes.controller, isControllerDataFetching],
    [SettingsPageTypes.padlet, isPadletDataFetching],
  ]);

  const count = paginationCount.get(pageType) || 0;

  const applyCustomPage = () => {
    setPage(Number(customPageValue));
  };

  const onPageChange = (_: ChangeEvent<unknown>, page: number) => {
    setPage(page);
  };

  const handleSwitchBackPage = () => {
    if (models?.get(pageType)?.length === 1) {
      setPage((prev) => prev - 1);
      setCustomPageValue((prev) => String(Number(prev) - 1));
    }
  };

  const handleOpenUpdateModelDrawer = (model: DeviceModel) => {
    setModel(model);
    setDrawerType(updateModal.get(pageType) as DrawerType);
  };

  const handleOpenDeleteModal = (model: DeviceModel) => {
    setModel(model);
    setIsDeleteModelOpen(true);
  };

  useEffect(() => {
    setCustomPageValue(String(page));
  }, [page]);

  useEffect(() => {
    setPage(1);
    setCustomPageValue(String(1));
  }, [searchName]);

  return {
    model,
    isDeleteModelOpen,
    setIsDeleteModelOpen,
    setModel,
    setPage,
    setCustomPageValue,
    sortType,
    models,

    isDataFetching,

    handleSwitchBackPage,
    handleSortTypeChange,
    handleOpenUpdateModelDrawer,
    handleOpenDeleteModal,

    count,
    onPageChange,
    page,
    customPageValue,
    applyCustomPage,
  };
};