diff --git a/package-lock.json b/package-lock.json index d63ba22a..4710fb22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1841,6 +1841,15 @@ } } }, + "@loadable/component": { + "version": "5.10.3", + "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.10.3.tgz", + "integrity": "sha512-/aSO+tXw4vFMwZ6fgLaNQgLuEa7bgTpoBE4PxNzf08/ewAjymrCS3J7v3SbGE7IjGmmKL6vVwkpb7S3cYrk+ag==", + "requires": { + "@babel/runtime": "^7.6.0", + "hoist-non-react-statics": "^3.3.0" + } + }, "@mapbox/hast-util-table-cell-style": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz", @@ -2382,6 +2391,15 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz", "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==" }, + "@types/loadable__component": { + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.10.0.tgz", + "integrity": "sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/lunr": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@types/lunr/-/lunr-2.3.2.tgz", diff --git a/package.json b/package.json index 2024b97a..3de6166a 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "not op_mini all" ], "dependencies": { + "@loadable/component": "^5.10.3", "classnames": "^2.2.6", "date-fns": "^2.8.1", "dms2dec": "^1.1.0", @@ -92,6 +93,7 @@ "@testing-library/react": "^9.3.2", "@types/classnames": "^2.2.9", "@types/jest": "^24.0.21", + "@types/loadable__component": "^5.10.0", "@types/lunr": "^2.3.2", "@types/node": "^12.12.11", "@types/react": "^16.9.11", diff --git a/src/components/atoms/Copy.tsx b/src/components/atoms/Copy.tsx index 2b903838..714f7e81 100644 --- a/src/components/atoms/Copy.tsx +++ b/src/components/atoms/Copy.tsx @@ -1,9 +1,10 @@ import React from 'react' -import Clipboard from 'react-clipboard.js' - +import loadable from '@loadable/component' import styles from './Copy.module.scss' import Icon from './Icon' +const Clipboard = loadable(() => import('react-clipboard.js')) + const onCopySuccess = (e: any) => { e.trigger.classList.add(styles.copied) } diff --git a/src/components/atoms/Time.tsx b/src/components/atoms/Time.tsx index b7f54ec9..c46e3d3e 100644 --- a/src/components/atoms/Time.tsx +++ b/src/components/atoms/Time.tsx @@ -1,15 +1,21 @@ import React from 'react' -import { format, formatDistance } from 'date-fns' +import loadable from '@loadable/component' + +const LazyDate = loadable.lib(() => import('date-fns')) export default function Time({ date }: { date: string }) { const dateNew = new Date(date) return ( - + + {({ format, formatDistance }) => ( + + )} + ) } diff --git a/src/components/molecules/Search/SearchResultsEmpty.tsx b/src/components/molecules/Search/SearchResultsEmpty.tsx index d987ae4f..851684b0 100644 --- a/src/components/molecules/Search/SearchResultsEmpty.tsx +++ b/src/components/molecules/Search/SearchResultsEmpty.tsx @@ -12,10 +12,8 @@ const SearchResultsEmpty = ({

- {searchQuery.length > 1 && results.length === 0 + {searchQuery.length > 0 && results.length === 0 ? 'No results found' - : searchQuery.length === 1 - ? 'Just one more character' : 'Awaiting your input'}

diff --git a/src/components/molecules/Search/index.tsx b/src/components/molecules/Search/index.tsx index 7848e5d1..a2d6810f 100644 --- a/src/components/molecules/Search/index.tsx +++ b/src/components/molecules/Search/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import { Helmet } from 'react-helmet' import { CSSTransition } from 'react-transition-group' import SearchInput from './SearchInput' @@ -7,30 +7,30 @@ import SearchResults from './SearchResults' import styles from './index.module.scss' -function getSearchResults(query: string, lng: string) { - if (!query || !window.__LUNR__) return [] - const lunrIndex = window.__LUNR__[lng] - const results = lunrIndex.index.search(query) - return results.map(({ ref }: { ref: string }) => lunrIndex.store[ref]) -} - -export default function Search({ lng }: { lng: string }) { +export default function Search() { const [searchOpen, setSearchOpen] = useState(false) const [query, setQuery] = useState('') const [results, setResults] = useState([]) + useEffect(() => { + if (!query || !window.__LUNR__) { + setResults([]) + return + } + + const lunrIndex = window.__LUNR__['en'] + const searchResults = lunrIndex.index.search(query) + setResults( + searchResults.map(({ ref }) => { + return lunrIndex.store[ref] + }) + ) + }, [query]) + const toggleSearch = () => { setSearchOpen(!searchOpen) } - const search = (event: any) => { - const query = event.target.value - // wildcard search https://lunrjs.com/guides/searching.html#wildcards - const results = query.length > 1 ? getSearchResults(`${query}*`, lng) : [] - setQuery(query) - setResults(results) - } - return ( <> @@ -50,7 +50,7 @@ export default function Search({ lng }: { lng: string }) {
search(e)} + onChange={(e: any) => setQuery(e.target.value)} onToggle={toggleSearch} />
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx index 60227d04..d4128d32 100644 --- a/src/components/organisms/Header.tsx +++ b/src/components/organisms/Header.tsx @@ -20,7 +20,7 @@ export default class Header extends PureComponent {