Emi Matchu
0e314482f7
I haven't been running Prettier consistently on things in this project. Now, it's quick-runnable, and I've got it on everything! Also, I just think tabs are the right default for this kind of thing, and I'm glad to get to switch over to it! (In `package.json`.)
92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
|
|
import * as Sentry from "@sentry/react";
|
|
|
|
import ItemsPanel from "./ItemsPanel";
|
|
import SearchToolbar, { searchQueryIsEmpty } from "./SearchToolbar";
|
|
import SearchPanel from "./SearchPanel";
|
|
import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util";
|
|
|
|
/**
|
|
* ItemsAndSearchPanels manages the shared layout and state for:
|
|
* - ItemsPanel, which shows the items in the outfit now, and
|
|
* - SearchPanel, which helps you find new items to add.
|
|
*
|
|
* These panels don't share a _lot_ of concerns; they're mainly intertwined by
|
|
* the fact that they share the SearchToolbar at the top!
|
|
*
|
|
* We try to keep the search concerns in the search components, by avoiding
|
|
* letting any actual _logic_ live at the root here; and instead just
|
|
* performing some wiring to help them interact with each other via simple
|
|
* state and refs.
|
|
*/
|
|
function ItemsAndSearchPanels({
|
|
loading,
|
|
searchQuery,
|
|
onChangeSearchQuery,
|
|
outfitState,
|
|
outfitSaving,
|
|
dispatchToOutfit,
|
|
}) {
|
|
const scrollContainerRef = React.useRef();
|
|
const searchQueryRef = React.useRef();
|
|
const firstSearchResultRef = React.useRef();
|
|
|
|
const hasRoomForSearchFooter = useBreakpointValue({ base: false, md: true });
|
|
const [canUseSearchFooter] = useLocalStorage(
|
|
"DTIFeatureFlagCanUseSearchFooter",
|
|
false,
|
|
);
|
|
const isShowingSearchFooter = canUseSearchFooter && hasRoomForSearchFooter;
|
|
|
|
return (
|
|
<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
|
|
<TestErrorSender />
|
|
<Flex direction="column" height="100%">
|
|
{isShowingSearchFooter && <Box height="2" />}
|
|
{!isShowingSearchFooter && (
|
|
<Box paddingX="5" paddingTop="3" paddingBottom="2" boxShadow="sm">
|
|
<SearchToolbar
|
|
query={searchQuery}
|
|
searchQueryRef={searchQueryRef}
|
|
firstSearchResultRef={firstSearchResultRef}
|
|
onChange={onChangeSearchQuery}
|
|
/>
|
|
</Box>
|
|
)}
|
|
{!isShowingSearchFooter && !searchQueryIsEmpty(searchQuery) ? (
|
|
<Box
|
|
key="search-panel"
|
|
flex="1 0 0"
|
|
position="relative"
|
|
overflowY="scroll"
|
|
ref={scrollContainerRef}
|
|
data-test-id="search-panel-scroll-container"
|
|
>
|
|
<SearchPanel
|
|
query={searchQuery}
|
|
outfitState={outfitState}
|
|
dispatchToOutfit={dispatchToOutfit}
|
|
scrollContainerRef={scrollContainerRef}
|
|
searchQueryRef={searchQueryRef}
|
|
firstSearchResultRef={firstSearchResultRef}
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<Box position="relative" overflow="auto" key="items-panel">
|
|
<Box px="4" py="2">
|
|
<ItemsPanel
|
|
loading={loading}
|
|
outfitState={outfitState}
|
|
outfitSaving={outfitSaving}
|
|
dispatchToOutfit={dispatchToOutfit}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Flex>
|
|
</Sentry.ErrorBoundary>
|
|
);
|
|
}
|
|
|
|
export default ItemsAndSearchPanels;
|