From 3e6be00dc7abb4dfdd0af074b29981990ba3052e Mon Sep 17 00:00:00 2001 From: Arian Sobczak Date: Tue, 18 Apr 2023 14:01:49 +0200 Subject: [PATCH] chore: moved toggle filter drawer to redux store --- .../components/routes/resource-action.tsx | 43 ++++++------------- .../routes/utils/query-has-filter.ts | 9 ---- src/frontend/hooks/use-filter-drawer.tsx | 29 +++++++++++++ src/frontend/store/actions/filter-drawer.ts | 16 +++++++ .../store/reducers/filterDrawerReducer.ts | 25 +++++++++++ src/frontend/store/reducers/index.ts | 1 + src/frontend/store/store.ts | 6 ++- 7 files changed, 88 insertions(+), 41 deletions(-) delete mode 100644 src/frontend/components/routes/utils/query-has-filter.ts create mode 100644 src/frontend/hooks/use-filter-drawer.tsx create mode 100644 src/frontend/store/actions/filter-drawer.ts create mode 100644 src/frontend/store/reducers/filterDrawerReducer.ts diff --git a/src/frontend/components/routes/resource-action.tsx b/src/frontend/components/routes/resource-action.tsx index 84f6ab4a7..ac9cacc43 100644 --- a/src/frontend/components/routes/resource-action.tsx +++ b/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; + resources: Array } type Props = PropsFromState @@ -23,54 +25,33 @@ const ResourceAction: React.FC = (props) => { const params = useParams() 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 () + return } const action = resource.resourceActions.find((r) => r.name === actionName) if (!action) { - return () + return } - const toggleFilter = action.showFilter - ? ((): void => setFilterVisible(!filterVisible)) - : undefined - if (action.showInDrawer) { return ( - + ) } return ( - - - {action.showFilter ? ( - - ) : ''} + + + + + {action.showFilter ? : ''} ) } diff --git a/src/frontend/components/routes/utils/query-has-filter.ts b/src/frontend/components/routes/utils/query-has-filter.ts deleted file mode 100644 index ec148627f..000000000 --- a/src/frontend/components/routes/utils/query-has-filter.ts +++ /dev/null @@ -1,9 +0,0 @@ -export default (queryString: string): boolean => { - const query = new URLSearchParams(queryString) - for (const key of query.keys()) { - if (key.match('filters.')) { - return true - } - } - return false -} diff --git a/src/frontend/hooks/use-filter-drawer.tsx b/src/frontend/hooks/use-filter-drawer.tsx new file mode 100644 index 000000000..f8e7c4bac --- /dev/null +++ b/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 } +} diff --git a/src/frontend/store/actions/filter-drawer.ts b/src/frontend/store/actions/filter-drawer.ts new file mode 100644 index 000000000..4462b79b0 --- /dev/null +++ b/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, +}) diff --git a/src/frontend/store/reducers/filterDrawerReducer.ts b/src/frontend/store/reducers/filterDrawerReducer.ts new file mode 100644 index 000000000..c6ce568f2 --- /dev/null +++ b/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 + +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 + } + } +} diff --git a/src/frontend/store/reducers/index.ts b/src/frontend/store/reducers/index.ts index 4e7a1642d..a6df5ffef 100644 --- a/src/frontend/store/reducers/index.ts +++ b/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' diff --git a/src/frontend/store/store.ts b/src/frontend/store/store.ts index a1107e045..4ad81c4b6 100644 --- a/src/frontend/store/store.ts +++ b/src/frontend/store/store.ts @@ -1,6 +1,6 @@ // 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 { @@ -8,6 +8,7 @@ import { 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({ branding: brandingReducer, dashboard: dashboardReducer, drawer: drawerReducer, + filterDrawer: filterDrawerReducer, locale: localesReducer, modal: modalReducer, notices: noticesReducer,