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={
+
+ }
/>
>