finish the open context

Author: paula-stacho

packages/compass-components/src/components/drawer-portal.spec.tsx

@@ -9,6 +9,8 @@ import {
   DrawerContentProvider,
   DrawerSection,
   DrawerAnchor,
+  useDrawerState,
+  useDrawerActions,
 } from './drawer-portal';
 import { expect } from 'chai';
 
@@ -162,4 +164,68 @@ describe('DrawerSection', function () {
       screen.getByTestId('lg-drawer')
     ).to.have.attribute('aria-hidden', 'true');
   });
+
+  it('can control drawer state via the hooks', async function () {
+    const ControlElement = () => {
+      const { isDrawerOpen } = useDrawerState();
+      const { openDrawer, closeDrawer } = useDrawerActions();
+      return (
+        <div>
+          <span data-testid="drawer-state">
+            {isDrawerOpen ? 'open' : 'closed'}
+          </span>
+          <button
+            data-testid="toggle-drawer"
+            onClick={
+              isDrawerOpen
+                ? () => closeDrawer()
+                : () => openDrawer('controlled-section')
+            }
+          >
+            {isDrawerOpen ? 'Close drawer' : 'Open drawer'}
+          </button>
+        </div>
+      );
+    };
+    render(
+      <DrawerContentProvider>
+        <ControlElement />
+        <DrawerAnchor>
+          <DrawerSection
+            id="unrelated-section"
+            label="Test section 1"
+            title="Test section 1"
+            glyph="Trash"
+          >
+            This is an unrelated section
+          </DrawerSection>
+          <DrawerSection
+            id="controlled-section"
+            label="Test section 2"
+            title="Test section 2"
+            glyph="Bell"
+          >
+            This is the controlled section
+          </DrawerSection>
+        </DrawerAnchor>
+      </DrawerContentProvider>
+    );
+
+    // Drawer is closed by default
+    expect(screen.getByTestId('drawer-state')).to.have.text('closed');
+
+    // Open the drawer
+    userEvent.click(screen.getByTestId('toggle-drawer'));
+    await waitFor(() => {
+      expect(screen.getByTestId('drawer-state')).to.have.text('open');
+      expect(screen.getByText('This is the controlled section')).to.be.visible;
+    });
+
+    // Close the drawer
+    userEvent.click(screen.getByTestId('toggle-drawer'));
+    await waitFor(() => {
+      expect(screen.getByTestId('drawer-state')).to.have.text('closed');
+      expect(screen.queryByText('This is the controlled section')).not.to.exist;
+    });
+  });
 });

packages/compass-components/src/components/drawer-portal.tsx

@@ -32,10 +32,10 @@ type DrawerSectionProps = Omit<SectionData, 'content' | 'onClick'> & {
   order?: number;
 };
 
-type DrawerOpenStateContextValue = {
-  current: {
-    isDrawerOpen: boolean;
-  };
+type DrawerOpenStateContextValue = boolean;
+
+type DrawerSetOpenStateContextValue = {
+  setIsDrawerOpen: (isOpen: boolean) => void;
 };
 
 type DrawerActionsContextValue = {
@@ -49,13 +49,13 @@ type DrawerActionsContextValue = {
 
 const DrawerStateContext = React.createContext<DrawerSectionProps[]>([]);
 
-const DrawerOpenStateContext = React.createContext<DrawerOpenStateContextValue>(
-  {
-    current: {
-      isDrawerOpen: false,
-    },
-  }
-);
+const DrawerOpenStateContext =
+  React.createContext<DrawerOpenStateContextValue>(false);
+
+const DrawerSetOpenStateContext =
+  React.createContext<DrawerSetOpenStateContextValue>({
+    setIsDrawerOpen: () => {},
+  });
 
 const DrawerActionsContext = React.createContext<DrawerActionsContextValue>({
   current: {
@@ -103,6 +103,8 @@ export const DrawerContentProvider: React.FunctionComponent = ({
   children,
 }) => {
   const [drawerState, setDrawerState] = useState<DrawerSectionProps[]>([]);
+  const [drawerOpenState, setDrawerOpenState] =
+    useState<DrawerOpenStateContextValue>(false);
   const drawerActions = useRef({
     openDrawer: () => undefined,
     closeDrawer: () => undefined,
@@ -130,20 +132,28 @@ export const DrawerContentProvider: React.FunctionComponent = ({
 
   return (
     <DrawerStateContext.Provider value={drawerState}>
-      <DrawerActionsContext.Provider value={drawerActions}>
-        {children}
-      </DrawerActionsContext.Provider>
+      <DrawerOpenStateContext.Provider value={drawerOpenState}>
+        <DrawerSetOpenStateContext.Provider
+          value={{ setIsDrawerOpen: setDrawerOpenState }}
+        >
+          <DrawerActionsContext.Provider value={drawerActions}>
+            {children}
+          </DrawerActionsContext.Provider>
+        </DrawerSetOpenStateContext.Provider>
+      </DrawerOpenStateContext.Provider>
     </DrawerStateContext.Provider>
   );
 };
 
 const DrawerContextGrabber: React.FunctionComponent = ({ children }) => {
   const drawerToolbarContext = useDrawerToolbarContext();
   const actions = useContext(DrawerActionsContext);
-  const state = useContext(DrawerOpenStateContext);
+  const openStateSetter = useContext(DrawerSetOpenStateContext);
   actions.current.openDrawer = drawerToolbarContext.openDrawer;
   actions.current.closeDrawer = drawerToolbarContext.closeDrawer;
-  state.current.isDrawerOpen = drawerToolbarContext.isDrawerOpen;
+  useEffect(() => {
+    openStateSetter.setIsDrawerOpen(drawerToolbarContext.isDrawerOpen);
+  }, [drawerToolbarContext.isDrawerOpen, openStateSetter]);
   return <>{children}</>;
 };
 
@@ -339,11 +349,11 @@ export function useDrawerActions() {
 }
 
 export const useDrawerState = () => {
-  const drawerToolbarContext = useContext(DrawerOpenStateContext);
+  const drawerOpenStateContext = useContext(DrawerOpenStateContext);
   const drawerState = useContext(DrawerStateContext);
   return {
-    isOpen:
-      drawerToolbarContext.current.isDrawerOpen &&
+    isDrawerOpen:
+      drawerOpenStateContext &&
       // the second check is a workaround, because LG doesn't set isDrawerOpen to false when it's empty
       drawerState.length > 0,
   };