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 | import { ChevronDownIcon } from "@chakra-ui/icons";
import {
Flex,
Text,
Menu,
MenuButton,
MenuList,
MenuItem,
Button,
} from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { SEARCH_ANALYTICS, SORT_RENDER_MAP } from "./constants";
import testIds from "./testIds";
import { useSort } from "./useSearchParam";
import { useUpdateSearchParam } from "./useUpdateSearchParam";
import { CatalogSearchSort } from "../../api/catalog-search/constants";
import { eventName } from "../../contexts/Analytics";
export const SortedBy: FunctionComponent = () => {
const sort = useSort();
const updateSearch = useUpdateSearchParam();
const selected = sort ? SORT_RENDER_MAP[sort] : "Relevance";
return (
<Flex align="center">
<Text>Sorted by</Text>
<Menu>
<MenuButton
as={Button}
color="link"
data-event={eventName(SEARCH_ANALYTICS.SORT, "Menu")}
data-testid={testIds.sortButton}
ml={2}
pl={2} // For some reason, the px shorthand doesn't work on this Button
pr={2}
py={1}
rightIcon={<ChevronDownIcon />}
variant="link"
>
{selected}
</MenuButton>
<MenuList data-testid={testIds.sortDropdown} minW="180" zIndex="sticky">
<MenuItem
data-event={eventName(SEARCH_ANALYTICS.SORT, "Option", "Relevance")}
data-testid={testIds.sortItem}
data-value=""
key="Relevance"
onClick={() => updateSearch({ sort: undefined })}
>
Relevance
</MenuItem>
{Object.entries(SORT_RENDER_MAP).map(([value, display]) => (
<MenuItem
data-event={eventName(SEARCH_ANALYTICS.SORT, "Option", display)}
data-testid={testIds.sortItem}
data-value={value}
key={value}
onClick={() => updateSearch({ sort: value as CatalogSearchSort })}
>
{display}
</MenuItem>
))}
</MenuList>
</Menu>
</Flex>
);
};
|