From 1c4c6139d737f21bd3c469c8490e76d7cbcf791d Mon Sep 17 00:00:00 2001
From: Joao Fidelis <joaogfidelis@gmail.com>
Date: Mon, 24 Jun 2019 12:03:31 -0300
Subject: [PATCH] append all categories filters to operation list

---
 CHANGELOG.md                      |  4 ++++
 react/components/FilterSidebar.js | 22 +++++++++++++---------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34b0f128e..f6bfe5957 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Issues with selecting categories in mobile.
+
 ## [3.22.1] - 2019-06-21
 
 ### Changed
diff --git a/react/components/FilterSidebar.js b/react/components/FilterSidebar.js
index a713c94b9..2b515c6aa 100644
--- a/react/components/FilterSidebar.js
+++ b/react/components/FilterSidebar.js
@@ -25,8 +25,9 @@ const FilterSidebar = ({ filters, tree }) => {
   const [open, setOpen] = useState(false)
 
   const [filterOperations, setFilterOperations] = useState([])
+  const [categoryTreeOperations, setCategoryTreeOperations] = useState([])
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  const currentTree = useCategoryTree(tree, filterOperations)
+  const currentTree = useCategoryTree(tree, categoryTreeOperations)
 
   const navigateToFacet = useFacetNavigation()
 
@@ -61,10 +62,17 @@ const FilterSidebar = ({ filters, tree }) => {
       ? maybeCategories
       : [maybeCategories]
 
+    const categoriesSelected = filterOperations.filter(op => op.map === 'c')
+    const newCategories = [...categoriesSelected, ...categories]
+
+    // Just save the newest operation here to be recorded at the category tree hook and update the tree
+    setCategoryTreeOperations(categories)
+
+    // Save all filters along with the new categories, appended to the old ones
     setFilterOperations(filters => {
       return filters
         .filter(operations => operations.map !== 'c')
-        .concat(categories)
+        .concat(newCategories)
     })
   }
 
@@ -183,7 +191,7 @@ const updateTree = categories =>
 // in a user-friendly manner should reflect to the changes
 // we make in the tree, the same as it would with a tree fetched
 // from the API.
-const useCategoryTree = (initialTree, filterOperations) => {
+const useCategoryTree = (initialTree, categoryTreeOperations) => {
   const [tree, setTree] = useState(initialTree)
 
   useEffect(() => {
@@ -191,12 +199,8 @@ const useCategoryTree = (initialTree, filterOperations) => {
   }, [initialTree])
 
   useEffect(() => {
-    const categoryOperations = filterOperations.filter(
-      operation => operation.map === 'c'
-    )
-
-    setTree(updateTree(categoryOperations))
-  }, [filterOperations, initialTree])
+    setTree(updateTree(categoryTreeOperations))
+  }, [categoryTreeOperations, initialTree])
 
   return tree
 }