import {type NextPage} from "next"; import Head from "next/head"; // @ts-ignore import iconList from "@utils/iconList"; import {useEffect, useMemo, useState} from "react"; import {useDebounce} from "usehooks-ts"; import {useHotkeys} from 'react-hotkeys-hook' import {AiOutlineLoading3Quarters} from "react-icons/ai"; import IconCatalog from "@components/render/IconCatalog"; import NoSSR from 'react-no-ssr'; import InfiniteScroll from "react-infinite-scroll-component"; import useFocus from "@utils/useFocus"; import { OGP } from "react-ogp"; import {env} from "../env.mjs"; export type IconIdentifierPair = { id: string, setId: string }; const icons = iconList as IconIdentifierPair[]; const Home: NextPage = () => { const [query, setQuery] = useState(""); const [showLoading, setShowLoading] = useState(false); const [timing, setTiming] = useState(0); const debouncedQuery = useDebounce(query, 800); useEffect(() => { setShowLoading(query.length != 0); }, [query]); const allFilteredIcons = useMemo(() => { const start = new Date(); const results = debouncedQuery.length == 0 ? [] : icons.filter(({id}) => id.toLowerCase().indexOf(query) !== -1); const end = new Date(); // const results = fuse.search(query, {limit: maximumResults}); setShowLoading(false); setTiming(end.getTime() - start.getTime()); return results; }, [debouncedQuery]); useEffect(() => { setLazyIcons(allFilteredIcons.slice(0, 100)) }, [allFilteredIcons]); useHotkeys(['ctrl+k', 'ctrl+/'], () => { focusSearch(); }, {preventDefault: true}) const [searchRef, focusSearch] = useFocus() const [lazyIcons, setLazyIcons] = useState([]); const infiniteScroll = useMemo(() => Loading...} dataLength={lazyIcons.length} next={() => { const newLength = Math.min(lazyIcons.length + 300, allFilteredIcons.length) setLazyIcons(allFilteredIcons.slice(0, newLength)) }}> , [lazyIcons]); return ( <> Icons
setQuery(value)} value={query} /> {showLoading ? : (query.length == 0 ? icons.length : allFilteredIcons.length)} { timing !== 0 ? {timing}ms : null }
{infiniteScroll}
); }; export default Home;