From aab262a6b321ce7bbb93872cacc50f4e0dea6d22 Mon Sep 17 00:00:00 2001
From: asta-nguyen <asta.dev.520@gmail.com>
Date: Fri, 22 Dec 2023 10:11:53 +0700
Subject: [PATCH] fix: FilterDrawer UI issue

---
 src/frontend/components/app/filter-drawer.tsx |  6 ++-
 .../components/routes/utils/wrapper.tsx       | 54 +++++++++----------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/frontend/components/app/filter-drawer.tsx b/src/frontend/components/app/filter-drawer.tsx
index 9b8145798..0d769c3a9 100644
--- a/src/frontend/components/app/filter-drawer.tsx
+++ b/src/frontend/components/app/filter-drawer.tsx
@@ -28,9 +28,13 @@ const FilterDrawer: React.FC<FilterProps> = (props) => {
   const params = useParams<MatchProps>()
   const { translateButton, translateLabel } = useTranslation()
   const initialLoad = useRef(true)
-  const { isVisible, toggleFilter } = useFilterDrawer()
+  const { isVisible, toggleFilter, close } = useFilterDrawer()
   const { storeParams, clearParams, filters } = useQueryParams()
 
+  useEffect(() => {
+    close()
+  }, [])
+
   useEffect(() => {
     if (initialLoad.current) {
       initialLoad.current = false
diff --git a/src/frontend/components/routes/utils/wrapper.tsx b/src/frontend/components/routes/utils/wrapper.tsx
index cfb0d1dbc..73579eb6a 100644
--- a/src/frontend/components/routes/utils/wrapper.tsx
+++ b/src/frontend/components/routes/utils/wrapper.tsx
@@ -1,27 +1,27 @@
-import React, { ComponentType, PropsWithChildren } from 'react'
-import { Box, BoxProps, Drawer, DrawerContent, DrawerFooter } from '@adminjs/design-system'
+import { Box, BoxProps, DrawerContent, DrawerFooter } from '@adminjs/design-system'
 import { styled } from '@adminjs/design-system/styled-components'
+import React from 'react'
 
 import allowOverride from '../../../hoc/allow-override.js'
 
-const StyledWrapperWithFilter = styled(Box)`
-  & > ${Drawer} {
-    position: relative;
-    box-shadow: none;
-    border-radius: ${({ theme }) => theme.space.sm};
-  }
-
-  & > ${DrawerContent} {
-    background: ${({ theme }) => theme.colors.container};
-    padding: ${({ theme }) => theme.space.xxl};
-    overflow: visible;
-  }
-
-  & > ${DrawerFooter} {
-    background: ${({ theme }) => theme.colors.container};
-    padding: 0 ${({ theme }) => theme.space.xxl} ${({ theme }) => theme.space.xxl};
-  }
-`
+// const StyledWrapperWithFilter = styled(Box)`
+//   & > ${Drawer} {
+//     position: relative;
+//     box-shadow: none;
+//     border-radius: ${({ theme }) => theme.space.sm};
+//   }
+
+//   & > ${DrawerContent} {
+//     background: ${({ theme }) => theme.colors.container};
+//     padding: ${({ theme }) => theme.space.xxl};
+//     overflow: visible;
+//   }
+
+//   & > ${DrawerFooter} {
+//     background: ${({ theme }) => theme.colors.container};
+//     padding: 0 ${({ theme }) => theme.space.xxl} ${({ theme }) => theme.space.xxl};
+//   }
+// `
 
 const StyledWrapper = styled(Box)`
   & ${DrawerContent} {
@@ -37,22 +37,22 @@ const StyledWrapper = styled(Box)`
 `
 
 type WrapperProps = BoxProps & {
-  showFilter?: boolean;
-  children?: React.ReactNode;
+  showFilter?: boolean
+  children?: React.ReactNode
 }
 
 const Wrapper: React.FC<WrapperProps> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { children, variant, color, showFilter = false, ...rest } = props
 
-  const Component: ComponentType<PropsWithChildren<any>> = showFilter
-    ? StyledWrapperWithFilter
-    : StyledWrapper
+  // const Component: ComponentType<PropsWithChildren<any>> = showFilter
+  //   ? StyledWrapperWithFilter
+  //   : StyledWrapper
 
   return (
-    <Component {...rest} variant="transparent" mx="auto" data-css="styled-wrapper">
+    <StyledWrapper {...rest} variant="transparent" mx="auto" data-css="styled-wrapper">
       {children}
-    </Component>
+    </StyledWrapper>
   )
 }