state-management-utilities
Version:
State management utilities
37 lines (36 loc) • 1.4 kB
JavaScript
import debounce from "lodash.debounce";
import React from "react";
import { useLogs } from "./LogsProvider";
export function FilteredLogsProvider({ children, }) {
const { logs } = useLogs();
const [filteredLogs, setFilteredLogs] = React.useState(logs);
const [filter, setFilter] = React.useState("");
const [isFiltering, setIsFiltering] = React.useState(false);
React.useEffect(() => {
if (!filter)
return setFilteredLogs(logs);
filterLogs({ logs, filter, setIsFiltering, setFilteredLogs }).catch(console.error);
}, [logs, filter]);
return (React.createElement(FilteredLogsContext.Provider, { value: { filteredLogs, isFiltering, filter, setFilter } }, children));
}
const FilteredLogsContext = React.createContext({
filteredLogs: [],
isFiltering: false,
filter: "",
setFilter: () => { },
});
export function useFilteredLogs() {
const context = React.useContext(FilteredLogsContext);
if (!context) {
throw new Error("useFilteredLogs must be used within a FilteredLogsProvider");
}
return context;
}
const filterLogs = debounce(async ({ logs, filter, setIsFiltering, setFilteredLogs, }) => {
setIsFiltering(true);
setFilteredLogs(logs.filter((log) => log.updatedUID.toLowerCase().includes(filter.toLowerCase())));
setIsFiltering(false);
}, 500, {
leading: true,
trailing: true,
});