From 2b517fa0d2ced3a0870550a2eb70a4838b7bac72 Mon Sep 17 00:00:00 2001
From: Tiago Behenck <tiago.behenck.santos@gmail.com>
Date: Fri, 27 May 2022 23:59:19 -0300
Subject: [PATCH] adjust onFilter method to call when change the checked value

---
 src/components/ExploreSidebar/index.tsx   | 12 ++++++++----
 src/components/ExploreSidebar/stories.tsx |  3 ++-
 src/components/ExploreSidebar/test.tsx    | 10 +++++++---
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/ExploreSidebar/index.tsx b/src/components/ExploreSidebar/index.tsx
index f73baa8..7b4bc12 100644
--- 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
index 49f6819..119df9a 100644
--- 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
index 3ff0663..211f898 100644
--- 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)
   })
 })