mohiit1502/lucide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: use memoization and native NextJS router queries to reduce re-renders (#85)

Browse Source 
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
This commit is contained in:
Frank Riccobono
2020-10-07 11:47:41 -04:00
committed by GitHub
parent dad9648e20
commit a55620d6ba
11 changed files with 199 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/site/.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["next/babel"]
}

7
packages/site/jest.config.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/../../node_modules/babel-jest',
},
};

14
packages/site/package.json
View File

@@ -7,7 +7,8 @@
"dev": "next dev",
"build": "next build",
"export": "next export -o build",
"deploy": "yarn build && yarn export"
"deploy": "yarn build && yarn export",
"test": "jest"
},
"dependencies": {
"@chakra-ui/core": "^0.8.0",
@@ -18,15 +19,20 @@
"fuse.js": "^6.0.4",
"jszip": "^3.4.0",
"next": "^9.4.4",
"query-string": "^6.13.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"use-query-params": "^1.1.3"
"react-dom": "^16.13.1"
},
"devDependencies": {
"@testing-library/dom": "^7.24.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/react-hooks": "^3.4.2",
"@types/node": "^14.0.11",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"babel-jest": "^26.5.2",
"jest": "^26.5.2",
"react-test-renderer": "^16.13.1",
"typescript": "^3.9.5"
}
}

1
packages/site/setupTests.js Normal file
View File

@@ -0,0 +1 @@
import "@testing-library/jest-dom/extend-expect";

10
packages/site/src/components/Layout.tsx
View File

@@ -1,11 +1,17 @@
import { Box, Divider, Flex, Text, Link, Icon, useColorMode } from "@chakra-ui/core";
import { StringParam, useQueryParam } from "use-query-params";
import { useKeyBindings } from "../lib/key";
import {useRouter} from "next/router";
const Layout = ({ children }) => {
const [, setQuery] = useQueryParam("query", StringParam);
const router = useRouter();
const { colorMode, toggleColorMode } = useColorMode();
function setQuery(query){
router.push({
pathname: '/',
query: { query: query }
}).then();
}
useKeyBindings({
Escape: {
fn: () => setQuery(""),

38
packages/site/src/lib/search.tsx
View File

@@ -1,21 +1,31 @@
import Fuse from "fuse.js";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from 'react';
import { useDebounce } from './useDebounce';
function useSearch(icons, query) {
const fuse = new Fuse(Object.values(icons), {
threshold: 0.2,
keys: ["name", "tags"],
});
function useSearch(icons: Object, query: string | string[]) {
let iconList = useMemo(() => Object.values(icons), [icons]);
const [results, setResults] = useState(iconList);
// query can be an array because this is a valid query string ?query=xyz&query=abc
const debouncedQuery = useDebounce(
typeof query === 'string' ? query.trim() : typeof query === 'undefined' ? '' : query[0].trim(),
300
);
const [results, setResults] = useState(Object.values(icons));
async function doSearch() {
if (debouncedQuery) {
const Fuse = (await import('fuse.js')).default;
const fuse = new Fuse(iconList, {
threshold: 0.2,
keys: ['name', 'tags'],
});
return fuse.search(debouncedQuery);
} else {
return iconList;
}
}
useEffect(() => {
if (query.trim()) {
setResults(fuse.search(query.trim()));
} else {
setResults(Object.values(icons));
}
}, [query]);
doSearch().then(setResults);
}, [debouncedQuery]);
return results;
}

17
packages/site/src/lib/useDebounce.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { useEffect, useState } from 'react';
export function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value]);
return debouncedValue;
}

44
packages/site/src/pages/_app.tsx
View File

@@ -1,30 +1,6 @@
import { CSSReset, ThemeProvider, ColorModeProvider } from "@chakra-ui/core";
import { useRouter } from "next/router";
import { QueryParamProvider } from "use-query-params";
import customTheme from "../lib/theme";
import Head from "next/head";
const QueryProvider = ({ children }) => {
const router = useRouter();
const history = {
push: ({ search }: Location) =>
router.push({ search, pathname: router.pathname }),
replace: ({ search }: Location) =>
router.replace({ search, pathname: router.pathname }),
};
const location = {
search: router.asPath.replace(/[^?]+/u, ""),
} as Location;
return (
<QueryParamProvider history={history} location={location}>
{children}
</QueryParamProvider>
);
};
import { CSSReset, ThemeProvider, ColorModeProvider } from '@chakra-ui/core';
import customTheme from '../lib/theme';
import Head from 'next/head';
const App = ({ Component, pageProps }) => {
return (
@@ -32,14 +8,12 @@ const App = ({ Component, pageProps }) => {
<Head>
<title>Featherity</title>
</Head>
<QueryProvider>
<ThemeProvider theme={customTheme}>
<ColorModeProvider>
<CSSReset />
<Component {...pageProps} />
</ColorModeProvider>
</ThemeProvider>
</QueryProvider>
<ThemeProvider theme={customTheme}>
<ColorModeProvider>
<CSSReset />
<Component {...pageProps} />
</ColorModeProvider>
</ThemeProvider>
</>
);
};

72
packages/site/src/pages/index.tsx
View File

@@ -9,15 +9,16 @@ import {
Stack,
Text,
useToast,
} from "@chakra-ui/core";
import copy from "copy-to-clipboard";
import download from "downloadjs";
import JSZip from "jszip";
import { useEffect, useRef, useState } from "react";
import { StringParam, useQueryParam } from "use-query-params";
import Layout from "../components/Layout";
import { getAllData } from "../lib/icons";
import useSearch from "../lib/search";
} from '@chakra-ui/core';
import copy from 'copy-to-clipboard';
import download from 'downloadjs';
import JSZip from 'jszip';
import { useEffect, useRef, useState } from 'react';
import Layout from '../components/Layout';
import { getAllData } from '../lib/icons';
import useSearch from '../lib/search';
import { useRouter } from 'next/router';
import { useDebounce } from '../lib/useDebounce';
function generateZip(icons) {
const zip = new JSZip();
@@ -25,25 +26,39 @@ function generateZip(icons) {
// @ts-ignore
zip.file(`${icon.name}.svg`, icon.src)
);
return zip.generateAsync({ type: "blob" });
return zip.generateAsync({ type: 'blob' });
}
const IndexPage = ({ data }) => {
const [query, setQuery] = useQueryParam("query", StringParam);
const results = useSearch(data, query || "");
const router = useRouter();
const { query } = router.query;
const [queryText, setQueryText] = useState(query || '');
const toast = useToast();
const debouncedQuery = useDebounce(queryText, 1000);
const results = useSearch(data, queryText);
useEffect(() => {
setQueryText(query);
}, [query]);
useEffect(() => {
router.push({
pathname: '/',
query: { query: debouncedQuery },
});
}, [debouncedQuery]);
const inputElement = useRef(null);
function handleKeyDown(event) {
if (event.key === "/" && inputElement.current !== document.activeElement) {
if (event.key === '/' && inputElement.current !== document.activeElement) {
event.preventDefault();
inputElement.current.focus();
}
}
useEffect(() => {
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
return (
@@ -56,7 +71,7 @@ const IndexPage = ({ data }) => {
<Button
onClick={async () => {
const zip = await generateZip(data);
download(zip, "feather.zip");
download(zip, 'feather.zip');
}}
>
Download all
@@ -67,19 +82,14 @@ const IndexPage = ({ data }) => {
<InputLeftElement children={<Icon name="search" />} />
<Input
ref={inputElement}
placeholder={`Search ${
Object.keys(data).length
} icons (Press "/" to focus)`}
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder={`Search ${Object.keys(data).length} icons (Press "/" to focus)`}
value={queryText}
onChange={(event) => setQueryText(event.target.value)}
marginBottom={5}
/>
</InputGroup>
{results.length > 0 ? (
<Grid
templateColumns={`repeat(auto-fill, minmax(160px, 1fr))`}
gap={5}
>
<Grid templateColumns={`repeat(auto-fill, minmax(160px, 1fr))`} gap={5}>
{results.map((icon) => {
// @ts-ignore
const actualIcon = icon.item ? icon.item : icon;
@@ -93,17 +103,13 @@ const IndexPage = ({ data }) => {
if (event.shiftKey) {
copy(actualIcon.src);
toast({
title: "Copied!",
title: 'Copied!',
description: `Icon "${actualIcon.name}" copied to clipboard.`,
status: "success",
status: 'success',
duration: 1500,
});
} else {
download(
actualIcon.src,
`${actualIcon.name}.svg`,
"image/svg+xml"
);
download(actualIcon.src, `${actualIcon.name}.svg`, 'image/svg+xml');
}
}}
key={actualIcon.name}
@@ -122,7 +128,7 @@ const IndexPage = ({ data }) => {
fontSize="2xl"
fontWeight="bold"
textAlign="center"
style={{ wordBreak: "break-word" }}
style={{ wordBreak: 'break-word' }}
>
No results found for "{query}"
</Text>

30
packages/site/src/tests/index.test.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { act, fireEvent, screen } from '@testing-library/react';
import Index from '../pages/index';
import React from 'react';
import { render } from './test-utils';
import { getAllData } from '../lib/icons';
import App from '../pages/_app';
import { renderHook } from '@testing-library/react-hooks';
import useSearch from '../lib/search';
describe('App', () => {
it('renders without crashing', () => {
let allData = getAllData();
render(<App Component={Index} pageProps={{ data: allData }} />);
expect(
screen.getByText('Simply beautiful open source icons, community-sourced')
).toBeInTheDocument();
});
it('can search filter icons', async () => {
let allData = getAllData();
const { result: result1, waitForNextUpdate: wait1 } = renderHook(() => useSearch(allData, ''));
expect(result1.current).toHaveLength(allData.length);
const { result: result2, waitForNextUpdate: wait2 } = renderHook(() =>
useSearch(allData, 'airplay')
);
await wait2();
expect(result2.current).toHaveLength(2);
});
});

51
packages/site/src/tests/test-utils.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import { render as defaultRender } from '@testing-library/react';
import { RouterContext } from 'next/dist/next-server/lib/router-context';
import { NextRouter } from 'next/router';
export * from '@testing-library/react';
// --------------------------------------------------
// Override the default test render with our own
//
// You can override the router mock like this:
//
// const { baseElement } = render(<MyComponent />, {
// router: { pathname: '/my-custom-pathname' },
// });
// --------------------------------------------------
type DefaultParams = Parameters<typeof defaultRender>;
type RenderUI = DefaultParams[0];
type RenderOptions = DefaultParams[1] & { router?: Partial<NextRouter> };
export function render(ui: RenderUI, { wrapper, router, ...options }: RenderOptions = {}) {
if (!wrapper) {
wrapper = ({ children }) => (
<RouterContext.Provider value={{ ...mockRouter, ...router }}>
{children}
</RouterContext.Provider>
);
}
return defaultRender(ui, { wrapper, ...options });
}
const mockRouter: NextRouter = {
basePath: '',
pathname: '/',
route: '/',
asPath: '/',
query: {},
push: jest.fn(),
replace: jest.fn(),
reload: jest.fn(),
back: jest.fn(),
prefetch: jest.fn(),
beforePopState: jest.fn(),
events: {
on: jest.fn(),
off: jest.fn(),
emit: jest.fn(),
},
isFallback: false,
};