From f6bef5f7b6c53b2284884be18d9124700587a55f Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Mon, 3 Apr 2023 11:58:25 +0200
Subject: [PATCH] chore: stale closure hack refactor, wrong setState order -
 search not working #1863

---
 ui/src/table.tsx | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/ui/src/table.tsx b/ui/src/table.tsx
index dc9710f28bb..2f485e8d378 100644
--- a/ui/src/table.tsx
+++ b/ui/src/table.tsx
@@ -729,23 +729,23 @@ export const
         setSortColumn(() => ({ column, sortAsc }))
       }, [m.events, m.name, m.pagination]),
       filter = React.useCallback((selectedFilters: Dict<S[]> | null) => {
-        // TODO: Refactor "stale closure" hack
-        let col
+        // HACK: Get sortColumn from its setter due to stale closure.
         setSortColumn(sortColumn => {
-          col = sortColumn
+          setFilteredItems(() => {
+            // If we have filters, check if any of the data-item's props (filter's keys) equals to any of its filter values.
+            const nextFilteredItems = selectedFilters
+              ? items.filter(item => Object.keys(selectedFilters)
+                .every(filterKey => !selectedFilters[filterKey].length || selectedFilters[filterKey].some(filterVal => String(item[filterKey]).includes(filterVal)))
+              )
+              : items
+            const { column, sortAsc } = sortColumn || {}
+            console.log('setting fitleredItems from filter')
+            // If sort is applied, re-apply it on filtered items
+            return selectedFilters && column && sortAsc !== undefined ? [...nextFilteredItems].sort(sortingF(column, sortAsc)) : nextFilteredItems
+          })
           return sortColumn
         })
-        const { column, sortAsc } = col || sortColumn || {}
-        setFilteredItems(() => {
-          // If we have filters, check if any of the data-item's props (filter's keys) equals to any of its filter values.
-          const nextFilteredItems = selectedFilters
-            ? items.filter(item => Object.keys(selectedFilters)
-              .every(filterKey => !selectedFilters[filterKey].length || selectedFilters[filterKey].some(filterVal => String(item[filterKey]).includes(filterVal)))
-            )
-            : items
-          // If sort is applied, re-apply it on filtered items
-          return column && sortAsc !== undefined && selectedFilters ? [...nextFilteredItems].sort(sortingF(column, sortAsc)) : nextFilteredItems
-        })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [items, sortColumn]),
       getIsCollapsed = (key: S, expandedRefs: { [key: S]: B } | null) => {
         if (expandedRefs === null) return false
@@ -808,7 +808,11 @@ export const
           const _searchStr = searchString.toLowerCase()
           if (!_searchStr || !searchableKeys.length) return searchString || ''
 
-          setFilteredItems(filteredItems => filteredItems.filter(i => searchableKeys.some(key => (i[key] as S).toLowerCase().includes(_searchStr))))
+          setFilteredItems(filteredItems => {
+            console.log('setting fitleredItems from search')
+            return filteredItems.filter(i => searchableKeys.some(key => (i[key] as S).toLowerCase().includes(_searchStr)))
+          }
+          )
           return searchString || ''
         })
       }, [searchableKeys]),