43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useStore } from 'App/mstore';
|
|
import { Icon } from 'UI';
|
|
import { debounce } from 'App/utils';
|
|
|
|
let debounceUpdate: any = () => {};
|
|
|
|
function FFlagsSearch() {
|
|
const { featureFlagsStore } = useStore();
|
|
const [query, setQuery] = useState(featureFlagsStore.sort.query);
|
|
|
|
useEffect(() => {
|
|
debounceUpdate = debounce(
|
|
(value: string) => {
|
|
featureFlagsStore.setSort({ order: featureFlagsStore.sort.order, query: value })
|
|
featureFlagsStore.setPage(1)
|
|
void featureFlagsStore.fetchFlags()
|
|
},
|
|
250
|
|
);
|
|
}, []);
|
|
|
|
const write = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
|
|
setQuery(value.replace(/\s/g, '-'));
|
|
debounceUpdate(value.replace(/\s/g, '-'));
|
|
};
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
|
|
<input
|
|
value={query}
|
|
name="flagsSearch"
|
|
className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
|
|
placeholder="Filter by key"
|
|
onChange={write}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(FFlagsSearch);
|