Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion app/not-found.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@ export default function NotFound() {

<div className="max-w-md pt-8">
<p className="pb-4">Let's give it another shot:</p>
<Search autoFocus path={pathname} searchPlatforms={[]} showChatBot={false} />
<Search
autoFocus
path={pathname}
searchPlatforms={[]}
showChatBot={false}
useStoredSearchPlatforms={false}
/>
</div>
<div className="pt-8 flex gap-4">
<Button variant="solid" size="3" asChild>
Expand Down
15 changes: 13 additions & 2 deletions src/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,15 @@ type Props = {
pathname: string;
searchPlatforms: string[];
noSearch?: boolean;
useStoredSearchPlatforms?: boolean;
};

export function Header({pathname, searchPlatforms, noSearch}: Props) {
export function Header({
pathname,
searchPlatforms,
noSearch,
useStoredSearchPlatforms,
}: Props) {
return (
<header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0">
{/* define a header-height variable for consumption by other components */}
Expand Down Expand Up @@ -62,7 +68,12 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
</Link>
{!noSearch && (
<div className="hidden md:flex justify-center lg:justify-start w-full px-6">
<Search path={pathname} searchPlatforms={searchPlatforms} showChatBot />
<Search
path={pathname}
searchPlatforms={searchPlatforms}
showChatBot
useStoredSearchPlatforms={useStoredSearchPlatforms}
/>
</div>
)}
<div className="hidden lg-xl:flex justify-end flex-1 space-x-2 items-center min-w-fit">
Expand Down
2 changes: 1 addition & 1 deletion src/components/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {PlatformFilter} from './platformFilter';
export function Home() {
return (
<div className="tw-app">
<Header pathname="/" searchPlatforms={[]} />
<Header pathname="/" searchPlatforms={[]} useStoredSearchPlatforms={false} />
<div className="mt-[var(--header-height)]">
<Banner />
</div>
Expand Down
40 changes: 36 additions & 4 deletions src/components/search/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,18 +62,50 @@ type Props = {
path?: string;
searchPlatforms?: string[];
showChatBot?: boolean;
useStoredSearchPlatforms?: boolean;
};

export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Props) {
const STORAGE_KEY = 'sentry-docs-search-platforms';

export function Search({
path,
autoFocus,
searchPlatforms = [],
showChatBot,
useStoredSearchPlatforms = true,
}: Props) {
const ref = useRef<HTMLDivElement>(null);
const [query, setQuery] = useState(``);
const [results, setResults] = useState([] as Result[]);
const [inputFocus, setInputFocus] = useState(false);
const [showOffsiteResults, setShowOffsiteResults] = useState(false);
const [loading, setLoading] = useState(true);

const [currentSearchPlatforms, setCurrentSearchPlatforms] = useState(searchPlatforms);
const pathname = usePathname();

// Load stored platforms on mount
useEffect(() => {
const storedPlatforms = localStorage.getItem(STORAGE_KEY) ?? '[]';
if (!storedPlatforms) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(searchPlatforms));
} else if (
storedPlatforms &&
searchPlatforms.length === 0 &&
useStoredSearchPlatforms
) {
const platforms = JSON.parse(storedPlatforms);
setCurrentSearchPlatforms(platforms);
}
}, [useStoredSearchPlatforms, searchPlatforms]);

// Update stored platforms when they change
useEffect(() => {
if (searchPlatforms.length > 0) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(searchPlatforms));
setCurrentSearchPlatforms(searchPlatforms);
}
}, [searchPlatforms]);

const handleClickOutside = useCallback((ev: MouseEvent) => {
// don't close the search results if the user is clicking the expand button
if (
Expand Down Expand Up @@ -143,7 +175,7 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
inputQuery,
{
path,
platforms: searchPlatforms.map(
platforms: currentSearchPlatforms.map(
platform => standardSDKSlug(platform)?.slug ?? ''
),
searchAllIndexes: showOffsiteResults,
Expand All @@ -163,7 +195,7 @@ export function Search({path, autoFocus, searchPlatforms = [], showChatBot}: Pro
setResults(queryResults);
}
},
[path, searchPlatforms, showOffsiteResults, loading]
[path, currentSearchPlatforms, showOffsiteResults, loading]
);

const totalHits = results.reduce((a, x) => a + x.hits.length, 0);
Expand Down
Loading