openreplay/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { Input } from 'UI';
import FilterModal from 'Shared/Filters/FilterModal';
import { debounce } from 'App/utils';
import { assist as assistRoute, isRoute } from "App/routes";
const ASSIST_ROUTE = assistRoute();

interface Props {
  fetchFilterSearch: (query: any) => void;
  addFilterByKeyAndValue: (key: string, value: string) => void;
  filterList: any;
  filterListLive: any;
  filterSearchListLive: any;
  filterSearchList: any;
}
function SessionSearchField(props: Props) {
  const debounceFetchFilterSearch = React.useCallback(debounce(props.fetchFilterSearch, 1000), []);
  const [showModal, setShowModal] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')

  const onSearchChange = ({ target: { value } }: any) => {
    setSearchQuery(value)
    debounceFetchFilterSearch({ q: value });
  }

  const onAddFilter = (filter: any) => {
    props.addFilterByKeyAndValue(filter.key, filter.value)
  }

  return (
    <div className="relative">
      <Input
        icon="search"
        onFocus={ () => setShowModal(true) }
        onBlur={ () => setTimeout(setShowModal, 200, false) }
        onChange={ onSearchChange }
        placeholder={ 'Search sessions using any captured event (click, input, page, error...)'}
        id="search"
        type="search"
        autoComplete="off"
      />

      { showModal && (
        <div className="absolute left-0 border shadow rounded bg-white z-50">
          <FilterModal
            searchQuery={searchQuery}
            isMainSearch={true}
            onFilterClick={onAddFilter}
            isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
            // filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList }
            // filterSearchList={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterSearchListLive : props.filterSearchList }
          />
        </div>
      )}
    </div>
  );
}

export default connect((state: any) => ({
  filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
  filterSearchListLive: state.getIn([ 'liveSearch', 'filterSearchList' ]),
  filterList: state.getIn([ 'search', 'filterList' ]),
  filterListLive: state.getIn([ 'search', 'filterListLive' ]),
}), {  })(SessionSearchField);