diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx index ea42fc9866..a9d0527371 100644 --- a/components/DefaultLayout.tsx +++ b/components/DefaultLayout.tsx @@ -8,19 +8,17 @@ import { SupportSection } from 'components/SupportSection' import { DeprecationBanner } from 'components/DeprecationBanner' import { useMainContext } from 'components/context/MainContext' import { useTranslation } from './hooks/useTranslation' -import { useVersion } from './hooks/useVersion' type Props = { children?: React.ReactNode } export const DefaultLayout = (props: Props) => { - const { builtAssets, expose, page, error } = useMainContext() - const { currentVersion } = useVersion() + const { builtAssets, expose, page, error, isHomepageVersion } = useMainContext() const { t } = useTranslation('errors') return (
{error === '404' ? ( {t('oops')} - ) : currentVersion !== 'homepage' && page.fullTitle ? ( + ) : !isHomepageVersion && page.fullTitle ? ( {page.fullTitle} ) : null} diff --git a/components/Header.tsx b/components/Header.tsx index 827630258a..a2d1acd562 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -80,7 +80,7 @@ export const Header = () => { > {/* */} - {currentProduct.name} + {currentProduct?.name}
@@ -94,12 +94,16 @@ export const Header = () => { {showVersionPicker && } {/* */} -
+
{/* */} - {relativePath !== 'index.md' && error !== '404' && } + {relativePath !== 'index.md' && error !== '404' && ( +
+ +
+ )}
diff --git a/components/MobileProductDropdown.tsx b/components/MobileProductDropdown.tsx index 9a025ea27a..47eed59ccd 100644 --- a/components/MobileProductDropdown.tsx +++ b/components/MobileProductDropdown.tsx @@ -22,7 +22,7 @@ export const MobileProductDropdown = () => { href={`${product.external ? '' : `/${router.locale}`}${product.href}`} className={cx( 'd-block py-2', - product.id === currentProduct.id + product.id === currentProduct?.id ? 'color-text-link text-underline active' : 'Link--primary no-underline' )} diff --git a/components/Search.tsx b/components/Search.tsx index 2c8c2b4d38..667fb9e505 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -1,4 +1,5 @@ -import { useState, useEffect, useRef } from 'react' +import { useState, useEffect, useRef, Children, ReactNode } from 'react' +import cx from 'classnames' import { useRouter } from 'next/router' import debounce from 'lodash/debounce' import { useTranslation } from 'components/hooks/useTranslation' @@ -14,9 +15,14 @@ type SearchResult = { content: string } +type Props = { + isStandalone?: boolean + updateSearchParams?: boolean + children?: (props: { SearchInput: ReactNode; SearchResults: ReactNode }) => ReactNode +} // Homepage and 404 should be `isStandalone`, all others not // `updateSearchParams` should be false on the GraphQL explorer page -export function Search({ isStandalone = false, updateSearchParams = true }) { +export function Search({ isStandalone = false, updateSearchParams = true, children }: Props) { const [query, setQuery] = useState('') const [results, setResults] = useState>([]) const [activeHit, setActiveHit] = useState(0) @@ -26,11 +32,13 @@ export function Search({ isStandalone = false, updateSearchParams = true }) { // Figure out language and version for index const { expose } = useMainContext() - const { searchOptions: { languages, versions, nonEnterpriseDefaultVersion } } = JSON.parse(expose) + const { + searchOptions: { languages, versions, nonEnterpriseDefaultVersion }, + } = JSON.parse(expose) const router = useRouter() // fall back to the non-enterprise default version (FPT currently) on the homepage, 404 page, etc. const version = versions[currentVersion] || versions[nonEnterpriseDefaultVersion] - const language = languages.includes(router.locale) && router.locale || 'en' + const language = (languages.includes(router.locale) && router.locale) || 'en' // If the user shows up with a query in the URL, go ahead and search for it useEffect(() => { @@ -40,7 +48,6 @@ export function Search({ isStandalone = false, updateSearchParams = true }) { setQuery(xquery) /* await */ fetchSearchResults(xquery) } - return () => setQuery('') }, []) // Search with your keyboard @@ -49,7 +56,7 @@ export function Search({ isStandalone = false, updateSearchParams = true }) { return () => document.removeEventListener('keydown', searchWithYourKeyboard) }, [results, activeHit]) - function searchWithYourKeyboard (event: KeyboardEvent) { + function searchWithYourKeyboard(event: KeyboardEvent) { switch (event.key) { case '/': // when the input is focused, `/` should have no special behavior @@ -100,7 +107,7 @@ export function Search({ isStandalone = false, updateSearchParams = true }) { // If there's a query, call the endpoint // Otherwise, there's no results by default - async function fetchSearchResults (xquery: string) { + async function fetchSearchResults(xquery: string) { if (xquery) { const endpointUrl = new URL(location.origin) endpointUrl.pathname = '/search' @@ -124,57 +131,34 @@ export function Search({ isStandalone = false, updateSearchParams = true }) { if (xquery) { sendEvent({ type: 'search', - search_query: xquery + search_query: xquery, // search_context }) } } // Close panel if overlay is clicked - function closeSearch () { + function closeSearch() { setQuery('') setResults([]) } // Prevent the page from refreshing when you "submit" the form - function preventRefresh (evt: React.FormEvent) { + function preventRefresh(evt: React.FormEvent) { evt.preventDefault() } - return ( -
- + const SearchResults = ( + <>
{Boolean(results.length) && (
    {results.map(({ url, breadcrumbs, heading, title, content }, index) => ( -
  1. +
  2. {/* Breadcrumbs in search records don't include the page title. These fields may contain elements that we need to render */} @@ -184,7 +168,9 @@ export function Search({ isStandalone = false, updateSearchParams = true }) { />
    )}
    -
    +
    + + ) + + const SearchInput = ( + ) + + return ( + <> + {typeof children === 'function' ? ( + children({ SearchInput, SearchResults }) + ) : ( + <> + {SearchInput} + {SearchResults} + + )} + + ) } diff --git a/components/SidebarNav.tsx b/components/SidebarNav.tsx index 84ae53d347..912185bffc 100644 --- a/components/SidebarNav.tsx +++ b/components/SidebarNav.tsx @@ -11,8 +11,7 @@ import { useVersion } from './hooks/useVersion' type Props = {} export const SidebarNav = (props: Props) => { const router = useRouter() - const { currentVersion } = useVersion() - const { error, relativePath } = useMainContext() + const { error, relativePath, isHomepageVersion } = useMainContext() const { t } = useTranslation('header') return ( @@ -41,7 +40,7 @@ export const SidebarNav = (props: Props) => {