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

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;