diff --git a/gatsby-config.ts b/gatsby-config.ts index 71e3a626ef..d47f50b0d8 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -58,33 +58,6 @@ const config: GatsbyConfig = { portalZIndex: undefined, }, }, - { - resolve: 'gatsby-plugin-fusejs', - options: { - query: ` - { - allSnap { - nodes { - snapId - name - summary - description { - description - } - } - } - } - `, - keys: ['snapId', 'name', 'summary', 'description'], - normalizer: ({ data }) => - data.allSnap.nodes.map((node) => ({ - snapId: node.snapId, - name: node.name, - summary: node.summary, - description: node.description.description, - })), - }, - }, { resolve: 'gatsby-plugin-robots-txt', options: { diff --git a/package.json b/package.json index 6bc398c402..5e217a4ff8 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@metamask/utils": "^8.1.0", "@reduxjs/toolkit": "^1.9.6", "framer-motion": "^10.16.2", + "fuse.js": "^7.0.0", "gatsby": "^5.12.3", "linkify-react": "^4.1.1", "linkifyjs": "^4.1.1", @@ -117,8 +118,6 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "fast-deep-equal": "^3.1.3", - "fuse.js": "^6.6.2", - "gatsby-plugin-fusejs": "^2.0.2", "gatsby-plugin-manifest": "^5.12.0", "gatsby-plugin-robots-txt": "^1.8.0", "gatsby-plugin-segment-js": "^5.0.0", diff --git a/src/features/snaps/store.ts b/src/features/snaps/store.ts index ea4146b83d..ca637a5407 100644 --- a/src/features/snaps/store.ts +++ b/src/features/snaps/store.ts @@ -15,6 +15,7 @@ export type Snap = Fields< | 'snapId' | 'name' | 'summary' + | 'description' | 'icon' | 'category' | 'gatsbyPath' diff --git a/src/hooks/useSearchResults.ts b/src/hooks/useSearchResults.ts index 310569b8e9..02c0720aa9 100644 --- a/src/hooks/useSearchResults.ts +++ b/src/hooks/useSearchResults.ts @@ -1,29 +1,63 @@ +import Fuse from 'fuse.js'; import { graphql, useStaticQuery } from 'gatsby'; -import { useGatsbyPluginFusejs } from 'react-use-fusejs'; +import { useMemo } from 'react'; import type { Snap } from '../features'; +type QueryData = { + allSnap: { + nodes: Snap[]; + }; +}; + /** - * Get the search results for the given query. This will return the search - * results for the given query, debounced by 300 milliseconds. + * Get the search results for the given query. * * @param query - The query to search for. * @returns The search results. */ export function useSearchResults(query: string) { - const { fusejs } = useStaticQuery<{ fusejs: Queries.fusejs }>(graphql` + const { allSnap } = useStaticQuery(graphql` query { - fusejs { - index - data + allSnap { + nodes { + snapId + name + summary + description { + description + } + } } } `); - const results = useGatsbyPluginFusejs(query, fusejs, { - threshold: 0.3, - distance: 300, - }); + const fuse = useMemo( + () => + new Fuse(allSnap.nodes, { + keys: [ + { + name: 'name', + weight: 1, + }, + { + name: 'summary', + weight: 0.25, + }, + { + name: 'description', + weight: 0.25, + getFn: (snap) => snap.description.description, + }, + ], + threshold: 0.3, + }), + [allSnap.nodes], + ); + + const results = useMemo(() => { + return fuse.search(query).map(({ item }) => item); + }, [fuse, query]); - return results.map(({ item }) => item); + return results; } diff --git a/yarn.lock b/yarn.lock index 1f9a470e15..17e045ea32 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5073,9 +5073,8 @@ __metadata: eslint-plugin-react-hooks: ^4.6.0 fast-deep-equal: ^3.1.3 framer-motion: ^10.16.2 - fuse.js: ^6.6.2 + fuse.js: ^7.0.0 gatsby: ^5.12.3 - gatsby-plugin-fusejs: ^2.0.2 gatsby-plugin-manifest: ^5.12.0 gatsby-plugin-robots-txt: ^1.8.0 gatsby-plugin-segment-js: ^5.0.0 @@ -12651,13 +12650,20 @@ __metadata: languageName: node linkType: hard -"fuse.js@npm:^6.0.0, fuse.js@npm:^6.6.2": +"fuse.js@npm:^6.0.0": version: 6.6.2 resolution: "fuse.js@npm:6.6.2" checksum: 17ae758ce205276ebd88bd9c9f088a100be0b4896abac9f6b09847151269d1690f41d7f98ff5813d4a58973162dbd99d0072ce807020fee6f9de60170f6b08eb languageName: node linkType: hard +"fuse.js@npm:^7.0.0": + version: 7.0.0 + resolution: "fuse.js@npm:7.0.0" + checksum: d15750efec1808370c0cae92ec9473aa7261c59bca1f15f1cf60039ba6f804b8f95340b5cabd83a4ef55839c1034764856e0128e443921f072aa0d8a20e4cacf + languageName: node + linkType: hard + "gatsby-cli@npm:^5.12.0": version: 5.12.0 resolution: "gatsby-cli@npm:5.12.0" @@ -12803,20 +12809,6 @@ __metadata: languageName: node linkType: hard -"gatsby-plugin-fusejs@npm:^2.0.2": - version: 2.0.2 - resolution: "gatsby-plugin-fusejs@npm:2.0.2" - dependencies: - fuse.js: ^6.0.0 - gatsby: ^5.0.0 - react: ^18.0.0 - peerDependencies: - fuse.js: ">=6.0.0" - gatsby: ">=5.0.0" - checksum: 1849dcc31fb084cb649d9bb6ce0454029be4b0ec82f3df8b1878119bb369f13e52066a8c8bdc431776b7187cbfc7c77806e34475ea6d01848e0b31758af5d25d - languageName: node - linkType: hard - "gatsby-plugin-manifest@npm:^5.12.0": version: 5.12.0 resolution: "gatsby-plugin-manifest@npm:5.12.0" @@ -13054,7 +13046,7 @@ __metadata: languageName: node linkType: hard -"gatsby@npm:^5.0.0, gatsby@npm:^5.12.3": +"gatsby@npm:^5.12.3": version: 5.12.3 resolution: "gatsby@npm:5.12.3" dependencies: