chore: moved toggle filter drawer to redux store

src/frontend/components/routes/resource-action.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import { useParams } from 'react-router'
 
+import { Box } from '@adminjs/design-system'
 import BaseActionComponent from '../app/base-action-component.js'
 import { ResourceJSON } from '../../interfaces/index.js'
 import { ReduxState } from '../../store/store.js'
@@ -12,9 +13,10 @@ import Wrapper from './utils/wrapper.js'
 import DrawerPortal from '../app/drawer-portal.js'
 import FilterDrawer from '../app/filter-drawer.js'
 import allowOverride from '../../hoc/allow-override.js'
+import { useFilterDrawer } from '../../hooks/use-filter-drawer.js'
 
 type PropsFromState = {
-  resources: Array<ResourceJSON>;
+  resources: Array<ResourceJSON>
 }
 
 type Props = PropsFromState
@@ -23,54 +25,33 @@ const ResourceAction: React.FC<Props> = (props) => {
   const params = useParams<ResourceActionParams>()
   const { resources } = props
   const { resourceId, actionName } = params
-  const [filterVisible, setFilterVisible] = useState(false)
+  const { toggleFilter } = useFilterDrawer()
   const [tag, setTag] = useState('')
 
   const resource = resources.find((r) => r.id === resourceId)
   if (!resource) {
-    return (<NoResourceError resourceId={resourceId!} />)
+    return <NoResourceError resourceId={resourceId!} />
   }
   const action = resource.resourceActions.find((r) => r.name === actionName)
   if (!action) {
-    return (<NoActionError resourceId={resourceId!} actionName={actionName!} />)
+    return <NoActionError resourceId={resourceId!} actionName={actionName!} />
   }
 
-  const toggleFilter = action.showFilter
-    ? ((): void => setFilterVisible(!filterVisible))
-    : undefined
-
   if (action.showInDrawer) {
     return (
       <DrawerPortal width={action.containerWidth}>
-        <BaseActionComponent
-          action={action}
-          resource={resource}
-        />
+        <BaseActionComponent action={action} resource={resource} />
       </DrawerPortal>
     )
   }
 
   return (
     <Wrapper width={action.containerWidth} showFilter={action.showFilter}>
-      <ActionHeader
-        resource={resource}
-        action={action}
-        toggleFilter={toggleFilter}
-        tag={tag}
-      />
-      <BaseActionComponent
-        action={action}
-        resource={resource}
-        setTag={setTag}
-      />
-      {action.showFilter ? (
-        <FilterDrawer
-          key={filterVisible.toString()}
-          resource={resource}
-          isVisible={filterVisible}
-          toggleFilter={toggleFilter!}
-        />
-      ) : ''}
+      <Box flex flexDirection="column">
+        <ActionHeader resource={resource} action={action} toggleFilter={toggleFilter} tag={tag} />
+        <BaseActionComponent action={action} resource={resource} setTag={setTag} />
+      </Box>
+      {action.showFilter ? <FilterDrawer resource={resource} /> : ''}
     </Wrapper>
   )
 }

src/frontend/hooks/use-filter-drawer.tsx

@@ -0,0 +1,29 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffect, useState } from 'react'
+import { hideFilterDrawer, showFilterDrawer } from '../store/actions/filter-drawer.js'
+import { ReduxState } from '../store/index.js'
+import { useQueryListParams } from './use-query-list-params.js'
+
+export const useFilterDrawer = () => {
+  const [filtersCount, setFiltersCount] = useState(0)
+  const dispach = useDispatch()
+  const isVisible = useSelector((state: ReduxState) => state.filterDrawer.isVisible)
+
+  const { showFilters, filters = {} } = useQueryListParams()
+
+  useEffect(() => {
+    setFiltersCount(Object.keys(filters).length)
+  }, [filters])
+
+  useEffect(() => {
+    if (showFilters) {
+      dispach(showFilterDrawer())
+    }
+  }, [showFilters])
+
+  const toggleFilter = () => {
+    dispach(isVisible ? hideFilterDrawer() : showFilterDrawer())
+  }
+
+  return { filtersCount, isVisible, toggleFilter }
+}

src/frontend/store/actions/filter-drawer.ts

@@ -0,0 +1,16 @@
+export const OPEN_FILTER_DRAWER = 'OPEN_FILTER_DRAWER'
+export const CLOSE_FILTER_DRAWER = 'CLOSE_FILTER_DRAWER'
+
+export type FilterDrawerAction =
+  | { type: typeof OPEN_FILTER_DRAWER; isVisible: true }
+  | { type: typeof CLOSE_FILTER_DRAWER; isVisible: false }
+
+export const showFilterDrawer = (): FilterDrawerAction => ({
+  type: OPEN_FILTER_DRAWER,
+  isVisible: true,
+})
+
+export const hideFilterDrawer = (): FilterDrawerAction => ({
+  type: CLOSE_FILTER_DRAWER,
+  isVisible: false,
+})

src/frontend/store/reducers/filterDrawerReducer.ts

@@ -0,0 +1,25 @@
+import {
+  CLOSE_FILTER_DRAWER,
+  OPEN_FILTER_DRAWER,
+  type FilterDrawerAction,
+} from '../actions/filter-drawer.js'
+
+export type FilterDrawerInState = ReturnType<typeof filterDrawerReducer>
+
+const initialState = {
+  isVisible: false,
+}
+
+export const filterDrawerReducer = (state = initialState, action: FilterDrawerAction) => {
+  switch (action.type) {
+  case OPEN_FILTER_DRAWER: {
+    return { ...state, isVisible: action.isVisible }
+  }
+  case CLOSE_FILTER_DRAWER: {
+    return { ...state, isVisible: action.isVisible }
+  }
+  default: {
+    return state
+  }
+  }
+}

src/frontend/store/reducers/index.ts

@@ -2,6 +2,7 @@ export * from './assetsReducer.js'
 export * from './brandingReducer.js'
 export * from './dashboardReducer.js'
 export * from './drawerReducer.js'
+export * from './filterDrawerReducer.js'
 export * from './localesReducer.js'
 export * from './modalReducer.js'
 export * from './noticesReducer.js'

src/frontend/store/store.ts

@@ -1,13 +1,14 @@
 // Note: We are using legacy "createStore"
-import { combineReducers, legacy_createStore as createStore } from 'redux'
 import { composeWithDevToolsDevelopmentOnly } from '@redux-devtools/extension'
+import { combineReducers, legacy_createStore as createStore } from 'redux'
 
 import type { Assets, BrandingOptions, VersionProps } from '../../adminjs-options.interface.js'
 import {
   assetsReducer,
   brandingReducer,
   dashboardReducer,
   drawerReducer,
+  filterDrawerReducer,
   localesReducer,
   modalReducer,
   noticesReducer,
@@ -20,6 +21,7 @@ import {
   versionsReducer,
   type DashboardInState,
   type DrawerInState,
+  type FilterDrawerInState,
   type LolcaleInState,
   type ModalInState,
   type NoticesInState,
@@ -36,6 +38,7 @@ export type ReduxState = {
   branding: BrandingOptions
   dashboard: DashboardInState
   drawer: DrawerInState
+  filterDrawer: FilterDrawerInState
   locale: LolcaleInState
   modal: ModalInState
   notices: NoticesInState
@@ -53,6 +56,7 @@ const reducer = combineReducers<ReduxState>({
   branding: brandingReducer,
   dashboard: dashboardReducer,
   drawer: drawerReducer,
+  filterDrawer: filterDrawerReducer,
   locale: localesReducer,
   modal: modalReducer,
   notices: noticesReducer,