diff --git a/src/app/WardrobePage/ItemsAndSearchPanels.js b/src/app/WardrobePage/ItemsAndSearchPanels.js index a855d97..788d7c9 100644 --- a/src/app/WardrobePage/ItemsAndSearchPanels.js +++ b/src/app/WardrobePage/ItemsAndSearchPanels.js @@ -3,10 +3,7 @@ import { Box, Flex, useBreakpointValue } from "@chakra-ui/react"; import * as Sentry from "@sentry/react"; import ItemsPanel from "./ItemsPanel"; -import SearchToolbar, { - emptySearchQuery, - searchQueryIsEmpty, -} from "./SearchToolbar"; +import SearchToolbar, { searchQueryIsEmpty } from "./SearchToolbar"; import SearchPanel from "./SearchPanel"; import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util"; @@ -25,11 +22,12 @@ import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util"; */ function ItemsAndSearchPanels({ loading, + searchQuery, + onChangeSearchQuery, outfitState, outfitSaving, dispatchToOutfit, }) { - const [searchQuery, setSearchQuery] = React.useState(emptySearchQuery); const scrollContainerRef = React.useRef(); const searchQueryRef = React.useRef(); const firstSearchResultRef = React.useRef(); @@ -52,7 +50,7 @@ function ItemsAndSearchPanels({ query={searchQuery} searchQueryRef={searchQueryRef} firstSearchResultRef={firstSearchResultRef} - onChange={setSearchQuery} + onChange={onChangeSearchQuery} /> )} diff --git a/src/app/WardrobePage/SearchFooter.js b/src/app/WardrobePage/SearchFooter.js index ba13b4b..0ca07da 100644 --- a/src/app/WardrobePage/SearchFooter.js +++ b/src/app/WardrobePage/SearchFooter.js @@ -1,7 +1,7 @@ import React from "react"; import * as Sentry from "@sentry/react"; import { Box, Flex } from "@chakra-ui/react"; -import SearchToolbar, { emptySearchQuery } from "./SearchToolbar"; +import SearchToolbar from "./SearchToolbar"; import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util"; import PaginationToolbar from "../components/PaginationToolbar"; @@ -9,7 +9,7 @@ import PaginationToolbar from "../components/PaginationToolbar"; * 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() { +function SearchFooter({ searchQuery, onChangeSearchQuery }) { const [canUseSearchFooter, setCanUseSearchFooter] = useLocalStorage( "DTIFeatureFlagCanUseSearchFooter", false @@ -21,8 +21,6 @@ function SearchFooter() { } }, [setCanUseSearchFooter]); - const [query, setQuery] = React.useState(emptySearchQuery); - // TODO: Show the new footer to other users, too! if (!canUseSearchFooter) { return null; @@ -38,8 +36,8 @@ function SearchFooter() { diff --git a/src/app/WardrobePage/index.js b/src/app/WardrobePage/index.js index ffc8df2..ac26753 100644 --- a/src/app/WardrobePage/index.js +++ b/src/app/WardrobePage/index.js @@ -11,6 +11,7 @@ import WardrobePageLayout from "./WardrobePageLayout"; import WardrobePreviewAndControls from "./WardrobePreviewAndControls"; import { useRouter } from "next/router"; import Head from "next/head"; +import { emptySearchQuery } from "./SearchToolbar"; const WardrobeDevHacks = loadable(() => import("./WardrobeDevHacks")); @@ -29,6 +30,8 @@ function WardrobePage() { const toast = useToast(); const { loading, error, outfitState, dispatchToOutfit } = useOutfitState(); + const [searchQuery, setSearchQuery] = React.useState(emptySearchQuery); + // We manage outfit saving up here, rather than at the point of the UI where // "Saving" indicators appear. That way, auto-saving still happens even when // the indicator isn't on the page, e.g. when searching. We also mount a @@ -113,12 +116,19 @@ function WardrobePage() { itemsAndMaybeSearchPanel={ } - searchFooter={} + searchFooter={ + + } />