Update to Next 15

.github/workflows/deploy.yml

@@ -36,7 +36,7 @@ jobs:
                   cache: 'npm'
 
             - name: Install dependencies
-              run: npm ci
+              run: npm ci --legacy-peer-deps
 
             - name: Run linting
               run: npm run lint
@@ -69,7 +69,7 @@ jobs:
                   cache: 'npm'
 
             - name: Install dependencies
-              run: npm ci
+              run: npm ci --legacy-peer-deps
 
             - name: Run linting
               run: npm run lint

components/elements/AutocompleteSearch/AutocompleteSearch.tsx

@@ -1,25 +1,23 @@
-import { FC, useState, FocusEvent } from 'react';
+import { FC, useState, useRef, useEffect } from 'react';
 import Link from 'next/link';
 import algoliasearch from 'algoliasearch/lite';
 import {
     Configure,
     Highlight,
     Hits,
     InstantSearch,
-    SearchBox,
-} from 'react-instantsearch-hooks-web';
-import type { Hit } from 'instantsearch.js';
+    useSearchBox,
+} from 'react-instantsearch';
+import type { Hit, BaseHit } from 'instantsearch.js';
 import { Card } from '@components/layout';
 import classNames from 'classnames';
-import { AlgoliaSearchHelper } from 'algoliasearch-helper';
-import { useDocumentEvent } from 'hooks';
 
 const searchClient = algoliasearch(
     'V0X7Z4KE9D',
     '544bec33383dc791bcbca3e1ceaec11b',
 );
 
-interface ToolHit extends Hit {
+interface ToolHit extends Hit<BaseHit> {
     fields: {
         slug: string;
         name: string;
@@ -39,57 +37,65 @@ const Hit = (result: SearchResult) => {
     );
 };
 
-const AutocompleteSearch: FC = () => {
-    const [showResults, setShow] = useState(false);
+const CustomSearchBox: FC<{
+    onFocus: () => void;
+    onChange: (query: string) => void;
+}> = ({ onFocus, onChange }) => {
+    const { query, refine } = useSearchBox();
 
-    const handleShowResults = (e: FocusEvent<HTMLInputElement>) => {
-        if (!!e.target.value) {
-            setShow(true);
-        }
-    };
+    return (
+        <div className="ais-SearchBox">
+            <input
+                type="search"
+                placeholder="Find analysis tools, formatters, linters.."
+                value={query}
+                onFocus={onFocus}
+                onChange={(e) => {
+                    refine(e.target.value);
+                    onChange(e.target.value);
+                }}
+                className="ais-SearchBox-input"
+            />
+        </div>
+    );
+};
 
-    const handleSearch = (e: AlgoliaSearchHelper) => {
-        const shouldShow =
-            e.state.query && e.state.query.length > 0 ? true : false;
-        setShow(shouldShow);
-        if (shouldShow) {
-            e.search();
-        }
-    };
+const AutocompleteSearch: FC = () => {
+    const [showResults, setShowResults] = useState(false);
+    const searchRef = useRef<HTMLDivElement>(null);
 
-    const handleHideDropdown = (event: KeyboardEvent) => {
-        if (event.key === 'Escape') {
-            setShow(false);
-        }
-    };
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                searchRef.current &&
+                !searchRef.current.contains(event.target as Node)
+            ) {
+                setShowResults(false);
+            }
+        };
 
-    const handleClickOutside = (event: MouseEvent) => {
-        const composedPath = event.composedPath?.() || [];
-        const hasSearchContainer = composedPath.some(
-            (el) => (el as Element).className === 'autocomplete-search',
-        );
-        if (!hasSearchContainer) {
-            setShow(false);
-        }
-    };
+        const handleEscape = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setShowResults(false);
+            }
+        };
 
-    useDocumentEvent([
-        { type: 'click', callback: handleClickOutside },
-        { type: 'keydown', callback: handleHideDropdown },
-    ]);
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, []);
 
     return (
-        <InstantSearch
-            searchClient={searchClient}
-            indexName="tools"
-            searchFunction={handleSearch}>
-            <div className="autocomplete-search">
-                <Configure
-                    {...({ hitsPerPage: 10, typoTolerance: true } as any)}
-                />
-                <SearchBox
-                    placeholder="Find analysis tools, formatters, linters.."
-                    onFocus={handleShowResults}
+        <InstantSearch searchClient={searchClient} indexName="tools">
+            <div className="autocomplete-search" ref={searchRef}>
+                <Configure hitsPerPage={10} typoTolerance={true} />
+                <CustomSearchBox
+                    onFocus={() => setShowResults(true)}
+                    onChange={(query) => setShowResults(query.length > 0)}
                 />
                 <div className="relative">
                     <Card

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.