From 0e1c7f4af50d97db46b84129c67725e9f9673771 Mon Sep 17 00:00:00 2001 From: Xevion Date: Fri, 17 Feb 2023 02:18:27 -0600 Subject: [PATCH] Improve scaling on multiple viewports - fix improper variable being used - extract useMemo into variable --- src/components/render/IconCatalog.tsx | 2 +- src/pages/index.tsx | 26 ++++++++++++++------------ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/render/IconCatalog.tsx b/src/components/render/IconCatalog.tsx index 9956e91..a1f80ec 100644 --- a/src/components/render/IconCatalog.tsx +++ b/src/components/render/IconCatalog.tsx @@ -7,7 +7,7 @@ type Props = { const IconCatalog: FunctionComponent = ({icons}) => { return
{icons.map(({id, setId}) => { + className="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-8 lg:grid-cols-9 xl:grid-cols-11 rounded gap-4 p-1.5 rounded overflow-x-clip mb-5">{icons.map(({id, setId}) => { return })}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6ad7c87..2e8a9b5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,7 +4,7 @@ import Head from "next/head"; import iconList from "@utils/iconList"; import {useEffect, useMemo, useState} from "react"; import {useDebounce} from "usehooks-ts"; -import { useHotkeys } from 'react-hotkeys-hook' +import {useHotkeys} from 'react-hotkeys-hook' import {AiOutlineLoading3Quarters} from "react-icons/ai"; import IconCatalog from "@components/render/IconCatalog"; import NoSSR from 'react-no-ssr'; @@ -37,7 +37,7 @@ const Home: NextPage = () => { }, [debouncedQuery]); useEffect(() => { - setLazyIcons(icons.slice(0, 100)) + setLazyIcons(allFilteredIcons.slice(0, 100)) }, [allFilteredIcons]); useHotkeys(['ctrl+k', 'ctrl+/'], () => { @@ -46,6 +46,16 @@ const Home: NextPage = () => { 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 ( <> @@ -53,7 +63,7 @@ const Home: NextPage = () => { -
+
{
- {useMemo(() => Loading...} - dataLength={lazyIcons.length} - next={() => { - const newLength = Math.min(lazyIcons.length + 300, allFilteredIcons.length) - setLazyIcons(allFilteredIcons.slice(0, newLength)) - }}> - - , [lazyIcons])} + {infiniteScroll}