jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - session search filed placeholder text

Browse source
This commit is contained in:
Shekar Siri 2022-08-11 11:59:56 +02:00
parent e6a64f673d
commit be368c2a8a
1 changed files with 52 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
View file

@ -3,64 +3,67 @@ 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";
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;
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 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 onSearchChange = ({ target: { value } }: any) => {
setSearchQuery(value);
debounceFetchFilterSearch({ q: value });
};
const onAddFilter = (filter: any) => {
props.addFilterByKeyAndValue(filter.key, filter.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"
className="hover:border-gray-medium"
/>
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"
className="hover:border-gray-medium text-lg placeholder-lg"
/>
{ 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 }
/>
{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>
)}
</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);
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);