Matchu
81b2a2b4a2
We add jsbuilding-rails to get esbuild running in the app, and then we copy-paste the files we need from impress-2020 into here! I stopped at the point where it was building successfully, but it's not running correctly: it's not sure about `process.env` in `next`, and I think the right next step is to delete the NextJS deps altogether and use React Router instead.
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;
|