@duongtrungnguyen/next-helper/dist/esm/hooks/use-listing.js

Helper library for Next.js 15

"use client";
import { useCallback, useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce";
const useListing = (dataSource = []) => {
  const [displayItems, setDisplayItems] = useState([]);
  useEffect(() => {
    if (dataSource) {
      setDisplayItems(dataSource);
    }
  }, [dataSource]);
  const onSearchChange = useCallback(
    useDebouncedCallback((query) => {
      if (query) {
        setDisplayItems(searchFilterByStringQuery(query, dataSource));
      } else {
        setDisplayItems(dataSource);
      }
    }, 300),
    [dataSource]
  );
  const onFieldFilterChange = useCallback(
    (fieldName, query) => {
      if (query === "-") {
        setDisplayItems(dataSource);
      } else {
        setDisplayItems(searchFilterByField(query, fieldName, dataSource));
      }
    },
    [dataSource]
  );
  const swapItems = useCallback((selfId, targetId, compareByField) => {
    setDisplayItems((prevItems) => {
      const newItems = [...prevItems];
      const index1 = newItems.findIndex((item) => compareByField(item) === selfId);
      const index2 = newItems.findIndex((item) => compareByField(item) === targetId);
      if (index1 >= 0 && index2 >= 0) {
        [newItems[index1], newItems[index2]] = [newItems[index2], newItems[index1]];
      }
      return newItems;
    });
  }, []);
  const insertAfter = useCallback((selfId, targetId, compareByField) => {
    setDisplayItems((prevItems) => {
      const newItems = [...prevItems];
      const indexSelf = newItems.findIndex((item) => compareByField(item) === selfId);
      const indexTarget = newItems.findIndex((item) => compareByField(item) === targetId);
      if (indexSelf >= 0 && indexTarget >= 0 && indexSelf !== indexTarget) {
        const [itemToMove] = newItems.splice(indexSelf, 1);
        newItems.splice(indexTarget + 1, 0, itemToMove);
      }
      return newItems;
    });
  }, []);
  const groupSort = useCallback((groupByField, groupOrder) => {
    setDisplayItems((prevItems) => {
      const newItems = [...prevItems].sort((a, b) => {
        const groupA = groupByField(a);
        const groupB = groupByField(b);
        const indexA = groupOrder.indexOf(groupA);
        const indexB = groupOrder.indexOf(groupB);
        const adjustedIndexA = indexA === -1 ? groupOrder.length : indexA;
        const adjustedIndexB = indexB === -1 ? groupOrder.length : indexB;
        return adjustedIndexA - adjustedIndexB;
      });
      return newItems;
    });
  }, []);
  const searchFilterByStringQuery = (query, dataSource2) => {
    return (prevState) => {
      return (dataSource2 || prevState).filter((item) => {
        return Object.values(item).some(
          (fieldValue) => fieldValue == null ? void 0 : fieldValue.toString().toLowerCase().includes(query.toLowerCase())
        );
      });
    };
  };
  const searchFilterByField = (query, field, dataSource2) => {
    return (prevState) => {
      return (dataSource2 || prevState).filter((item) => {
        var _a;
        return (_a = item[field]) == null ? void 0 : _a.toString().toLowerCase().includes(query.toLowerCase());
      });
    };
  };
  return {
    displayItems,
    setDisplayItems,
    onSearchChange,
    onFieldFilterChange,
    swapItems,
    insertAfter,
    groupSort
  };
};
export {
  useListing
};
//# sourceMappingURL=use-listing.js.map