Share search query state between panel and footer

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}
             />
           </Box>
         )}

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() {
           </Box>
           <Box width="8" />
           <SearchToolbar
-            query={query}
-            onChange={setQuery}
+            query={searchQuery}
+            onChange={onChangeSearchQuery}
             flex="0 1 100%"
             suggestionsPlacement="top"
           />

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={
             <ItemsAndSearchPanels
               loading={loading}
+              searchQuery={searchQuery}
+              onChangeSearchQuery={setSearchQuery}
               outfitState={outfitState}
               outfitSaving={outfitSaving}
               dispatchToOutfit={dispatchToOutfit}
             />
           }
-          searchFooter={<SearchFooter />}
+          searchFooter={
+            <SearchFooter
+              searchQuery={searchQuery}
+              onChangeSearchQuery={setSearchQuery}
+            />
+          }
         />
       </OutfitStateContext.Provider>
     </>