replace next/router with next/navigation

timlrx · Jul 16, 2023 · 459c5d8 · 459c5d8
1 parent 43c6929
commit 459c5d8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 146 deletions.
diff --git a/.changeset/unlucky-keys-join.md b/.changeset/unlucky-keys-join.md
@@ -0,0 +1,5 @@
+---
+'pliny': patch
+---
+
+Update to use next 13 app dir navigation router
diff --git a/packages/pliny/src/search/Algolia.tsx b/packages/pliny/src/search/Algolia.tsx
@@ -1,10 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react'
-import { AnchorHTMLAttributes, DetailedHTMLProps } from 'react'
+import { AnchorHTMLAttributes } from 'react'
 import { createPortal } from 'react-dom'
-import { useRouter } from 'next/router.js'
+import { useRouter } from 'next/navigation.js'
 import Link from 'next/link.js'
 import Head from 'next/head.js'
 import { useDocSearchKeyboardEvents } from '@docsearch/react'
+import type { LinkProps } from 'next/link'
 import type {
   DocSearchModal as DocSearchModalType,
   DocSearchProps,
@@ -32,19 +33,12 @@ export interface AlgoliaSearchContext {
 
 let DocSearchModal: typeof DocSearchModalType | null = null
 
-const CustomLink = ({
-  href,
-  ...rest
-}: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => {
+const CustomLink = ({ href, ...rest }: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>) => {
   const isInternalLink = href && href.startsWith('/')
   const isAnchorLink = href && href.startsWith('#')
 
   if (isInternalLink) {
-    return (
-      <Link href={href}>
-        <a {...rest} />
-      </Link>
-    )
+    return <Link href={href} {...rest} />
   }
 
   if (isAnchorLink) {
@@ -64,137 +58,6 @@ function Hit({
   return <CustomLink href={hit.url}>{children}</CustomLink>
 }
 
-// export function AlgoliaSearch({
-//   ButtonChildren,
-//   algoliaConfig,
-//   className: buttonClassName,
-// }: AlgoliaSearchProps) {
-//   const router = useRouter()
-//   const searchButtonRef = useRef<HTMLButtonElement>(null)
-//   const [isOpen, setIsOpen] = useState(false)
-//   const [initialQuery, setInitialQuery] = useState<string | undefined>(undefined)
-
-//   const importDocSearchModalIfNeeded = useCallback(() => {
-//     if (DocSearchModal) {
-//       return Promise.resolve()
-//     }
-
-//     return Promise.all([
-//       import('./AlgoliaModal'),
-//       //   import('@docsearch/react/style'),
-//     ]).then(([{ default: Modal }]) => {
-//       DocSearchModal = Modal
-//     })
-//   }, [])
-
-//   const onOpen = useCallback(() => {
-//     importDocSearchModalIfNeeded().then(() => {
-//       setIsOpen(true)
-//     })
-//   }, [importDocSearchModalIfNeeded, setIsOpen])
-
-//   const onClose = useCallback(() => {
-//     setIsOpen(false)
-//   }, [setIsOpen])
-
-//   const onInput = useCallback(
-//     (event: KeyboardEvent) => {
-//       importDocSearchModalIfNeeded().then(() => {
-//         setIsOpen(true)
-//         setInitialQuery(event.key)
-//       })
-//     },
-//     [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery]
-//   )
-
-//   const navigator = useRef({
-//     navigate({ itemUrl }: { itemUrl?: string }) {
-//       // Algolia results could contain URL's from other domains which cannot
-//       // be served through history and should navigate with window.location
-//       const isInternalLink = itemUrl.startsWith('/')
-//       const isAnchorLink = itemUrl.startsWith('#')
-//       if (!isInternalLink && !isAnchorLink) {
-//         window.location.href = itemUrl
-//       } else {
-//         router.push(itemUrl)
-//       }
-//     },
-//   }).current
-
-//   const transformItems = useRef<DocSearchModalProps['transformItems']>((items) =>
-//     items.map((item) => {
-//       // If Algolia contains a external domain, we should navigate without
-//       // relative URL
-//       const isInternalLink = item.url.startsWith('/')
-//       const isAnchorLink = item.url.startsWith('#')
-//       if (!isInternalLink && !isAnchorLink) {
-//         return item
-//       }
-
-//       // We transform the absolute URL into a relative URL.
-//       const url = new URL(item.url)
-//       return {
-//         ...item,
-//         // url: withBaseUrl(`${url.pathname}${url.hash}`),
-//         url: `${url.pathname}${url.hash}`,
-//       }
-//     })
-//   ).current
-
-//   const SearchButton = useCallback(() => {
-//     return (
-//       <button
-//         aria-label="Search"
-//         onTouchStart={importDocSearchModalIfNeeded}
-//         onFocus={importDocSearchModalIfNeeded}
-//         onMouseOver={importDocSearchModalIfNeeded}
-//         onClick={onOpen}
-//         className={buttonClassName}
-//       >
-//         <ButtonChildren />
-//       </button>
-//     )
-//   }, [ButtonChildren, importDocSearchModalIfNeeded, onOpen])
-
-//   useDocSearchKeyboardEvents({
-//     isOpen,
-//     onOpen,
-//     onClose,
-//     onInput,
-//     searchButtonRef,
-//   })
-
-//   return (
-//     <>
-//       <Head>
-//         {/* This hints the browser that the website will load data from Algolia,
-//         and allows it to preconnect to the DocSearch cluster. It makes the first
-//         query faster, especially on mobile. */}
-//         <link
-//           rel="preconnect"
-//           href={`https://${algoliaConfig.appId}-dsn.algolia.net`}
-//           crossOrigin="anonymous"
-//         />
-//       </Head>
-//       {ButtonChildren && <SearchButton />}
-//       {isOpen &&
-//         DocSearchModal &&
-//         createPortal(
-//           <DocSearchModal
-//             onClose={onClose}
-//             initialScrollY={window.scrollY}
-//             initialQuery={initialQuery}
-//             navigator={navigator}
-//             transformItems={transformItems}
-//             hitComponent={Hit}
-//             {...algoliaConfig}
-//           />,
-//           document.body
-//         )}
-//     </>
-//   )
-// }
-
 export const AlgoliaSearchContext = React.createContext<AlgoliaSearchContext>(
   {} as AlgoliaSearchContext
 )

diff --git a/packages/pliny/src/search/KBar.tsx b/packages/pliny/src/search/KBar.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, FC, ReactNode } from 'react'
 import type { Action } from 'kbar'
-import Router from 'next/router.js'
+import { useRouter } from 'next/navigation.js'
 import { KBarModal as KBarModalType } from './KBarModal'
 
 export interface KBarSearchProps {
@@ -19,6 +19,7 @@ export const KBarSearchProvider: FC<{
   children: ReactNode
   kbarConfig: KBarSearchProps
 }> = ({ kbarConfig, children }) => {
+  const router = useRouter()
   const { searchDocumentsPath, defaultActions } = kbarConfig
   const [loaded, setLoaded] = useState(false)
 
@@ -56,7 +57,7 @@ export const KBarSearchProvider: FC<{
           name: 'Homepage',
           keywords: '',
           section: 'Home',
-          perform: () => Router.push('/'),
+          perform: () => router.push('/'),
         },
       ]
 

diff --git a/packages/pliny/src/search/KBarPortal.tsx b/packages/pliny/src/search/KBarPortal.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import Router from 'next/router.js'
+import { useRouter } from 'next/navigation.js'
 import { CoreContent, MDXDocument } from '../utils/contentlayer'
 import { formatDate } from '../utils/formatDate'
 import {
@@ -20,6 +20,7 @@ let init = false
 export const Portal = ({ searchDocumentsPath }: { searchDocumentsPath: string }) => {
   const [searchActions, setSearchActions] = useState([])
   const { query } = useKBar()
+  const router = useRouter()
 
   // Display on load as we already wait for crtl+k event to load it
   useEffect(() => {
@@ -39,7 +40,7 @@ export const Portal = ({ searchDocumentsPath }: { searchDocumentsPath: string })
           keywords: post?.summary || '',
           section: 'Content',
           subtitle: formatDate(post.date, 'en-US'),
-          perform: () => Router.push('/' + post.path),
+          perform: () => router.push('/' + post.path),
         })
       }
       return actions