impress/app/javascript/wardrobe-2020/WardrobePage/SearchFooter.js

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;