fix(search-and-filter) custom event for panel toggle, simplify menu hook

src/components/Navigation.tsx

@@ -6,7 +6,6 @@ import classnames from "classnames";
 import Logo from "./Logo";
 import ProjectSelector from "pages/projects/ProjectSelector";
 import ServerVersion from "components/ServerVersion";
-import useEventListener from "@use-it/event-listener";
 import { isWidthBelow } from "util/helpers";
 import { useProject } from "context/project";
 import { useMenuCollapsed } from "context/menuCollapsed";
@@ -22,23 +21,15 @@ const Navigation: FC = () => {
   const { isAuthenticated } = useAuth();
   const softToggleMenu = () => {
     if (isSmallScreen()) {
-      setMenuCollapsed(!menuCollapsed);
+      setMenuCollapsed((prev) => !prev);
     }
   };
 
   const hardToggleMenu = (e: MouseEvent<HTMLElement>) => {
-    setMenuCollapsed(!menuCollapsed);
+    setMenuCollapsed((prev) => !prev);
     e.stopPropagation();
   };
 
-  const collapseOnMediumScreen = (e: Event) => {
-    if (!("detail" in e) || e.detail !== "search-and-filter") {
-      setMenuCollapsed(isWidthBelow(820));
-    }
-  };
-
-  useEventListener("resize", collapseOnMediumScreen);
-
   return (
     <>
       <header className="l-navigation-bar">

src/context/menuCollapsed.tsx

@@ -1,44 +1,27 @@
-import React, {
-  createContext,
-  Dispatch,
-  FC,
-  ReactNode,
-  SetStateAction,
-  useContext,
-  useState,
-} from "react";
+import { useState } from "react";
+import useEventListener from "@use-it/event-listener";
+import { isWidthBelow } from "util/helpers";
 
-interface ContextProps {
-  menuCollapsed: boolean;
-  setMenuCollapsed: Dispatch<SetStateAction<boolean>>;
-}
+const isSmallScreen = () => isWidthBelow(620);
 
-const initialState: ContextProps = {
-  menuCollapsed: false,
-  setMenuCollapsed: () => undefined,
-};
+export const useMenuCollapsed = () => {
+  const [menuCollapsed, setMenuCollapsed] = useState(false);
 
-export const MenuCollapsedContext = createContext<ContextProps>(initialState);
+  const collapseOnMediumScreen = (e: Event) => {
+    if (!("detail" in e) || e.detail !== "search-and-filter") {
+      setMenuCollapsed(isWidthBelow(820));
+    }
+  };
 
-interface ProviderProps {
-  children: ReactNode;
-}
+  useEventListener("resize", collapseOnMediumScreen);
 
-export const MenuCollapsedProvider: FC<ProviderProps> = ({ children }) => {
-  const [menuCollapsed, setMenuCollapsed] = useState(false);
+  const onSearchFilterPanelToggle = () => {
+    if (!menuCollapsed && isSmallScreen()) {
+      setMenuCollapsed(true);
+    }
+  };
 
-  return (
-    <MenuCollapsedContext.Provider
-      value={{
-        menuCollapsed,
-        setMenuCollapsed,
-      }}
-    >
-      {children}
-    </MenuCollapsedContext.Provider>
-  );
-};
+  useEventListener("sfp-toggle", onSearchFilterPanelToggle);
 
-export function useMenuCollapsed() {
-  return useContext(MenuCollapsedContext);
-}
+  return { menuCollapsed, setMenuCollapsed };
+};

src/pages/instances/InstanceSearchFilter.tsx

@@ -12,8 +12,6 @@ import {
   SearchAndFilterChip,
 } from "@canonical/react-components/dist/components/SearchAndFilter/types";
 import { useLocation } from "react-router-dom";
-import { useMenuCollapsed } from "context/menuCollapsed";
-import { isWidthBelow } from "util/helpers";
 
 interface ProfileFilterState {
   state?: {
@@ -26,10 +24,7 @@ interface Props {
   setFilters: (newFilters: InstanceFilters) => void;
 }
 
-const isSmallScreen = () => isWidthBelow(620);
-
 const InstanceSearchFilter: FC<Props> = ({ instances, setFilters }) => {
-  const { menuCollapsed, setMenuCollapsed } = useMenuCollapsed();
   const { state } = useLocation() as ProfileFilterState;
 
   useEffect(() => window.history.replaceState({}, ""), [state]);
@@ -102,17 +97,7 @@ const InstanceSearchFilter: FC<Props> = ({ instances, setFilters }) => {
           );
         }}
         onPanelToggle={() => {
-          const searchAndFilterPanel = document.querySelector(
-            ".p-search-and-filter__panel"
-          );
-          if (!searchAndFilterPanel) {
-            return;
-          }
-          const isShowing =
-            searchAndFilterPanel.getAttribute("aria-hidden") === "false";
-          if (!menuCollapsed && isShowing && isSmallScreen()) {
-            setMenuCollapsed(true);
-          }
+          window.dispatchEvent(new CustomEvent("sfp-toggle"));
         }}
       />
     </div>