@resourge/react-fetch/dist/hooks/useFilterSearchParams.js

[](LICENSE)

/**
 * react-fetch v1.43.1
 *
 * Copyright (c) resourge.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
 *
 * @license MIT
 */
import { useMemo, useEffect } from 'react';
import { HistoryStore } from '@resourge/history-store';
import { parseParams, createNewUrlWithSearch, parseSearchParams } from '@resourge/history-store/utils';
import { deepCompare } from '../utils/comparationUtils';
import { useEffectEvent } from './useEffectEvent';

const useFilterSearchParams = ({
  defaultFilter,
  initialPage,
  initialPerPage,
  defaultSort,
  fetch,
  preloadRef,
  hash,
  deps,
  filterKeysRef,
  fId,
  enable
}) => {
  const _fetch = useEffectEvent(fetch);
  function getParams(url) {
    let searchParams = url.searchParams;
    if (hash) {
      const hashUrl = new URL(url.hash.slice(1), window.location.origin);
      searchParams = hashUrl.searchParams;
    }
    return parseSearchParams(searchParams, {
      f: defaultFilter,
      page: initialPage,
      perPage: initialPerPage,
      sort: defaultSort
    });
  }
  function getDataFromParams() {
    var _params$fId;
    const [url] = HistoryStore.getValue();
    const params = getParams(url);
    const {
      sort = defaultSort,
      page = initialPage,
      perPage = initialPerPage,
      f: filter = defaultFilter
    } = fId ? (_params$fId = params[fId]) != null ? _params$fId : {} : params;
    return {
      filter,
      sort,
      pagination: {
        page,
        perPage,
        totalItems: 0,
        totalPages: 0
      },
      url
    };
  }
  const data = useMemo(getDataFromParams, deps);
  const setParams = newFilter => {
    const [url] = HistoryStore.getValue();
    const params = getParams(url);
    const newSearch = parseParams({
      ...params,
      ...(fId ? {
        [fId]: newFilter
      } : newFilter)
    });
    if (url.search !== newSearch) {
      const newURL = createNewUrlWithSearch(url, newSearch, hash);
      HistoryStore.navigate(newURL, {
        replace: true
      });
    }
  };
  const setFilter = ({
    page = initialPage,
    perPage = data.pagination.perPage,
    sort = data.sort,
    ...filter
  }) => {
    setParams({
      sort,
      page,
      perPage,
      f: {
        ...data.filter,
        ...filter
      }
    });
  };
  const sortTable = (orderBy, orderColumn) => {
    if (Array.isArray(orderBy)) {
      setFilter({
        page: initialPage,
        sort: orderBy
      });
      return;
    }
    const sort = data.sort ? [...data.sort] : [];
    const index = sort.findIndex(val => val.orderColumn === orderColumn);
    if (index > -1) {
      sort[index] = {
        orderBy,
        orderColumn
      };
    } else {
      sort.push({
        orderBy,
        orderColumn
      });
    }
    setFilter({
      page: initialPage,
      sort
    });
  };
  useEffect(() => {
    if (enable === false) {
      return;
    }
    return HistoryStore.subscribe(() => {
      const {
        filter,
        pagination: {
          page,
          perPage
        },
        sort,
        url: subscribeURL
      } = getDataFromParams();
      const whatChanged = new Set();
      if (perPage !== undefined && data.pagination.perPage !== perPage) {
        preloadRef.current = {};
        whatChanged.add('pagination');
        data.pagination.perPage = perPage;
      }
      if (page !== undefined && data.pagination.page !== page) {
        whatChanged.add('pagination');
        data.pagination.page = page;
      }
      if (!deepCompare(sort, data.sort)) {
        whatChanged.add('sort');
        preloadRef.current = {};
        data.sort = sort;
      }
      if (!deepCompare(filter, data.filter, filterKeysRef.current.state)) {
        whatChanged.add('filter');
        preloadRef.current = {};
        data.filter = filter;
      }
      if (whatChanged.size) {
        if (hash) {
          const newRenderURL = new URL(data.url.hash.slice(1), window.location.origin);
          const newSubscribeURL = new URL(subscribeURL.hash.slice(1), window.location.origin);
          if (newRenderURL.hash !== newSubscribeURL.hash) {
            return;
          }
        } else if (data.url.pathname !== subscribeURL.pathname) {
          return;
        }
        _fetch(data, whatChanged);
      }
    });
  }, [data, enable]);
  return {
    pagination: data.pagination,
    filter: data.filter,
    sort: data.sort,
    setParams,
    setFilter,
    sortTable: sortTable
  };
};

export { useFilterSearchParams };
//# sourceMappingURL=useFilterSearchParams.js.map