forked from OpenNeo/impress
Matchu
e300b2d342
Looks like the version of Prettier I just installed is v3, whereas our last run in the impress-2020 repo was with v2. I don't think we had any special config in that project, I think these are just changes to Prettier's defaults, and I'm comfortable accepting them! (Mostly seems like a lot of trailing commas.)
80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
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 (
|
|
<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
|
|
<TestErrorSender />
|
|
<Box>
|
|
<Box paddingX="4" paddingY="4">
|
|
<Flex as="label" align="center">
|
|
<Box fontWeight="600" flex="0 0 auto">
|
|
Add new items:
|
|
</Box>
|
|
<Box width="8" />
|
|
<SearchToolbar
|
|
query={searchQuery}
|
|
onChange={onChangeSearchQuery}
|
|
flex="0 1 100%"
|
|
suggestionsPlacement="top"
|
|
/>
|
|
<Box width="8" />
|
|
{numTotalPages != null && (
|
|
<Box flex="0 0 auto">
|
|
<PaginationToolbar
|
|
numTotalPages={numTotalPages}
|
|
currentPageNumber={1}
|
|
goToPageNumber={() => alert("TODO")}
|
|
buildPageUrl={() => null}
|
|
size="sm"
|
|
/>
|
|
</Box>
|
|
)}
|
|
</Flex>
|
|
</Box>
|
|
<Box maxHeight="32" overflow="auto">
|
|
<Box as="ul" listStyleType="disc" paddingLeft="8">
|
|
{items.map((item) => (
|
|
<Box key={item.id} as="li">
|
|
{item.name}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Sentry.ErrorBoundary>
|
|
);
|
|
}
|
|
|
|
export default SearchFooter;
|