adjust onFilter method to call when change the checked value

TiagoBehenck · May 28, 2022 · 2b517fa · 2b517fa
1 parent fe14a39
commit 2b517fa
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/components/ExploreSidebar/index.tsx b/src/components/ExploreSidebar/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { ParsedUrlQueryInput } from 'node:querystring'
 import xor from 'lodash.xor'
 
@@ -38,6 +38,11 @@ const ExploreSidebar = ({
   const [values, setValues] = useState(initialValues)
   const [isOpen, setIsOpen] = useState(false)
 
+  useEffect(() => {
+    onFilter(values)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values])
+
   const handleCheckbox = (name: string, value: string | boolean) => {
     const currentList = (values[name] as []) || []
     setValues((s) => ({ ...s, [name]: xor(currentList, [value]) }))
@@ -47,8 +52,7 @@ const ExploreSidebar = ({
     setValues((s) => ({ ...s, [name]: value }))
   }
 
-  const handleFilter = () => {
-    onFilter(values)
+  const handleFilterMenu = () => {
     setIsOpen(false)
   }
 
@@ -101,7 +105,7 @@ const ExploreSidebar = ({
       </S.Content>
 
       <S.Footer>
-        <Button fullWidth size="medium" onClick={handleFilter}>
+        <Button fullWidth size="medium" onClick={handleFilterMenu}>
           Filter
         </Button>
       </S.Footer>

diff --git a/src/components/ExploreSidebar/stories.tsx b/src/components/ExploreSidebar/stories.tsx
@@ -7,7 +7,8 @@ export default {
   title: 'ExploreSidebar',
   component: ExploreSidebar,
   args: {
-    items
+    items,
+    onFilter: () => ({})
   },
   parameters: {
     backgrounds: {

diff --git a/src/components/ExploreSidebar/test.tsx b/src/components/ExploreSidebar/test.tsx
@@ -70,7 +70,6 @@ describe('<ExploreSidebar />', () => {
       />
     )
 
-    userEvent.click(screen.getByRole('button', { name: /filter/i }))
     expect(onFilter).toBeCalledWith({
       plataforms: ['windows'],
       sort_by: 'high-to-low'
@@ -86,7 +85,7 @@ describe('<ExploreSidebar />', () => {
     userEvent.click(screen.getByLabelText(/linux/i))
     userEvent.click(screen.getByLabelText(/low to high/i))
 
-    userEvent.click(screen.getByRole('button', { name: /filter/i }))
+    expect(onFilter).toHaveBeenCalledTimes(4)
     expect(onFilter).toBeCalledWith({
       plataforms: ['windows', 'linux'],
       sort_by: 'low-to-high'
@@ -101,7 +100,6 @@ describe('<ExploreSidebar />', () => {
     userEvent.click(screen.getByLabelText(/low to high/i))
     userEvent.click(screen.getByLabelText(/high to low/i))
 
-    userEvent.click(screen.getByRole('button', { name: /filter/i }))
     expect(onFilter).toBeCalledWith({ sort_by: 'high-to-low' })
   })
 
@@ -128,5 +126,11 @@ describe('<ExploreSidebar />', () => {
     userEvent.click(screen.getByLabelText(/close filters/))
 
     expect(Element).not.toHaveStyleRule('opacity', '1', variant)
+
+    userEvent.click(screen.getByLabelText(/open filters/))
+
+    userEvent.click(screen.getByRole('button', { name: /filter/i }))
+
+    expect(Element).not.toHaveStyleRule('opacity', '1', variant)
   })
 })