Dismissable Dropdown

components/ui/context.tsx

@@ -4,10 +4,12 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
 
 export interface State {
   displaySidebar: boolean
+  displayDropdown: boolean
 }
 
 const initialState = {
   displaySidebar: false,
+  displayDropdown: false,
 }
 
 type Action =
@@ -17,21 +19,61 @@ type Action =
   | {
       type: 'CLOSE_SIDEBAR'
     }
+  | {
+      type: 'OPEN_DROPDOWN'
+    }
+  | {
+      type: 'CLOSE_DROPDOWN'
+    }
 
 export const UIContext = React.createContext<State | any>(initialState)
 
 UIContext.displayName = 'UIContext'
 
+function uiReducer(state: State, action: Action) {
+  switch (action.type) {
+    case 'OPEN_SIDEBAR': {
+      return {
+        ...state,
+        displaySidebar: true,
+      }
+    }
+    case 'CLOSE_SIDEBAR': {
+      return {
+        ...state,
+        displaySidebar: false,
+      }
+    }
+    case 'OPEN_DROPDOWN': {
+      return {
+        ...state,
+        displayDropdown: true,
+      }
+    }
+    case 'CLOSE_DROPDOWN': {
+      return {
+        ...state,
+        displayDropdown: false,
+      }
+    }
+  }
+}
+
 export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
   const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
 
+  const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
+  const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
+
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
+    openDropdown,
+    closeDropdown,
   }
 
   return <UIContext.Provider value={value} {...props} />
@@ -45,27 +87,6 @@ export const useUI = () => {
   return context
 }
 
-function uiReducer(state: State, action: Action) {
-  switch (action.type) {
-    case 'OPEN_SIDEBAR': {
-      return !state.displaySidebar
-        ? {
-            ...state,
-            displaySidebar: true,
-          }
-        : state
-    }
-    case 'CLOSE_SIDEBAR': {
-      return state.displaySidebar
-        ? {
-            ...state,
-            displaySidebar: false,
-          }
-        : state
-    }
-  }
-}
-
 export const ManagedUIContext: FC = ({ children }) => (
   <UIProvider>
     <ThemeProvider>