Merge pull request #341 from openreplay/dev

v1.5.1: Fixing filter in Assist

frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Icon, Loader } from 'UI';
-import { debounce } from 'App/utils';
+// import { debounce } from 'App/utils';
 import stl from './FilterAutoCompleteLocal.css';
-import cn from 'classnames';
+// import cn from 'classnames';
 
 interface Props {
   showOrButton?: boolean;
@@ -27,11 +27,11 @@ function FilterAutoCompleteLocal(props: Props) {
   } = props;
   const [showModal, setShowModal] = useState(true)
   const [query, setQuery] = useState(value);
-  const debounceOnSelect = React.useCallback(debounce(props.onSelect, 500), []);
+  // const debounceOnSelect = debounce(props.onSelect, 500);
 
   const onInputChange = ({ target: { value } }) => {
     setQuery(value);
-    debounceOnSelect(null, { value });
+    props.onSelect(null, { value });
   }
 
   useEffect(() => {

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -18,10 +18,6 @@ function FilterList(props: Props) {
   let rowIndex = 0;
 
   const onRemoveFilter = (filterIndex) => {
-    const newFilters = filters.filter((_filter, i) => {
-      return i !== filterIndex;
-    });
-
     props.onRemoveFilter(filterIndex);
   }
 

frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx

@@ -4,6 +4,7 @@ import FilterAutoCompleteLocal from '../FilterAutoCompleteLocal';
 import { FilterKey, FilterCategory, FilterType } from 'Types/filter/filterType';
 import FilterValueDropdown from '../FilterValueDropdown';
 import FilterDuration from '../FilterDuration';
+import { debounce } from 'App/utils';
 
 interface Props {
   filter: any;
@@ -35,9 +36,9 @@ function FilterValue(props: Props) {
     props.onUpdate({ ...filter, value: newValues })
   }
 
+  const debounceOnSelect = React.useCallback(debounce(onChange, 500), [onChange]);
+
   const onDurationChange = (newValues) => {
-    console.log('durationValues', durationValues)
-    // setDurationValues({ ...durationValues });
     setDurationValues({ ...durationValues, ...newValues });
   } 
 
@@ -72,7 +73,7 @@ function FilterValue(props: Props) {
             showOrButton={showOrButton}
             onAddValue={onAddValue}
             onRemoveValue={() => onRemoveValue(valueIndex)}
-            onSelect={(e, item) => onChange(e, item, valueIndex)}
+            onSelect={(e, item) => debounceOnSelect(e, item, valueIndex)}
             icon={filter.icon}
           />
         )

frontend/app/duck/liveSearch.js

@@ -3,11 +3,9 @@ import { fetchType, editType } from './funcTools/crud';
 import { createRequestReducer } from './funcTools/request';
 import { mergeReducers } from './funcTools/tools';
 import Filter from 'Types/filter';
-import SavedFilter from 'Types/filter/savedFilter';
 import { fetchList as fetchSessionList } from './sessions';
 import { liveFiltersMap } from 'Types/filter/newFilter';
 import { filterMap, checkFilterValue, hasFilterApplied } from './search';
-import { FilterKey } from '../types/filter/filterType';
 
 const name = "liveSearch";
 const idKey = "searchId";
@@ -51,10 +49,10 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat
   return dispatch(fetchSessionList(filter));
 };
 
-export const edit = reduceThenFetchResource((instance) => ({
+export const edit = (instance) => ({
     type: EDIT,
     instance,
-}));
+});
 
 export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
   type: APPLY,