import React from "react"; import * as Sentry from "@sentry/react"; import { Box, Flex } from "@chakra-ui/react"; import SearchToolbar from "./SearchToolbar"; import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util"; import PaginationToolbar from "../components/PaginationToolbar"; import { useSearchResults } from "./useSearchResults"; /** * SearchFooter appears on large screens only, to let you search for new items * while still keeping the rest of the item screen open! */ function SearchFooter({ searchQuery, onChangeSearchQuery, outfitState }) { const [canUseSearchFooter, setCanUseSearchFooter] = useLocalStorage( "DTIFeatureFlagCanUseSearchFooter", false ); const { items, numTotalPages } = useSearchResults( searchQuery, outfitState, 1 ); React.useEffect(() => { if (window.location.search.includes("feature-flag-can-use-search-footer")) { setCanUseSearchFooter(true); } }, [setCanUseSearchFooter]); // TODO: Show the new footer to other users, too! if (!canUseSearchFooter) { return null; } return ( Add new items: {numTotalPages != null && ( alert("TODO")} buildPageUrl={() => null} size="sm" /> )} {items.map((item) => ( {item.name} ))} ); } export default SearchFooter;