Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | import { Box, Stack } from "@chakra-ui/react";
import { FunctionComponent, useEffect } from "react";
import { LIMIT, SEARCH_ANALYTICS } from "./constants";
import { PageControls } from "./PageControls";
import { SearchBar } from "./SearchBar";
import { SearchDetails } from "./SearchDetails";
import { SortAndFilterDrawer } from "./SortAndFilterDrawer";
import { SortedBy } from "./SortedBy";
import {
useCdkType,
useCdkMajor,
useKeywords,
useLanguages,
useOffset,
useSearchQuery,
useSort,
useTags,
} from "./useSearchParam";
import { useUpdateSearchParam } from "./useUpdateSearchParam";
import { PackageList } from "../../components/PackageList";
import { Page } from "../../components/Page";
import { useCatalogResults } from "../../hooks/useCatalogResults";
export const SearchResults: FunctionComponent = () => {
const updateSearch = useUpdateSearchParam();
const offset = useOffset();
const query = useSearchQuery();
const keywords = useKeywords();
const languages = useLanguages();
const cdkMajor = useCdkMajor();
const cdkType = useCdkType();
const sort = useSort();
const tags = useTags();
const { page, pageLimit, results } = useCatalogResults({
offset,
limit: LIMIT,
query,
keywords,
languages,
cdkMajor,
cdkType,
sort,
tags,
});
// Resets the page number to 1 if query param offset is below 0, or to the last page if offset is higher than page count
useEffect(() => {
// If the query has results but the page has nothing to show...
if (results.length && (offset < 0 || offset > pageLimit)) {
// Handle an out of bounds offset
if (offset < 0) {
updateSearch({ offset: 0 });
} else {
// Offset is too large, just take last page
updateSearch({ offset: pageLimit });
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [results, offset, pageLimit]);
// Scroll to top on page change
useEffect(() => {
window.scrollTo(0, 0);
}, [page]);
return (
<Page
meta={{
title: query || "Search",
description: query
? `${results.length} results for ${query} at Construct Hub`
: "Search reusable components for your cloud application",
}}
pageName="search"
>
<Stack direction="column" maxW="100vw" pb={4} px={4} spacing={4}>
<SearchBar />
<Stack
align={{ base: "start", lg: "center" }}
direction={{ base: "column-reverse", lg: "row" }}
justify={{ base: "initial", lg: "space-between" }}
spacing={4}
>
<SearchDetails
count={results.length}
filtered={!!query}
limit={LIMIT}
offset={offset}
query={query}
/>
<Box display={{ base: "none", md: "initial" }}>
<SortedBy />
</Box>
<Box display={{ md: "none" }}>
<SortAndFilterDrawer />
</Box>
</Stack>
<PackageList data-event={SEARCH_ANALYTICS.RESULTS} items={page} />
<Box w="full">
<PageControls offset={offset} pageLimit={pageLimit} />
</Box>
</Stack>
</Page>
);
};
|