Topics' filtration #405
Topics' filtration #405
Conversation
| const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| if (debounceTimeout) window.clearTimeout(debounceTimeout); | ||
| debounceTimeout = setTimeout(() => setSearch(e.target.value), 300); | ||
| }; | ||
|
|
||
| React.useEffect(() => () => { | ||
| if (debounceTimeout) window.clearTimeout(debounceTimeout); | ||
| }); |
There was a problem hiding this comment.
You can use useDebouncedCallback (there's an example in Messages component).
| className="input" | ||
| type="text" | ||
| placeholder="Search by Topic Name" | ||
| onChange={(e) => handleSearch(e)} |
There was a problem hiding this comment.
| onChange={(e) => handleSearch(e)} | |
| onChange={handleSearch} |
| @@ -41,25 +43,39 @@ const List: React.FC<Props> = ({ | |||
| const { isReadOnly } = React.useContext(ClusterContext); | |||
| const { clusterName } = useParams<{ clusterName: ClusterName }>(); | |||
| const { page, perPage } = usePagination(); | |||
| const [orderBy, setOrderBy] = React.useState< | |||
| TopicColumnsToSort | undefined | |||
There was a problem hiding this comment.
It's better to use null instead of undefined for the state. That way we will know that we intentionally set it to null when we want to reset the value. In case of undefined it's not clear if we set it or it's broken somewhere.
| <th | ||
| className={cx( | ||
| 'is-clickable', | ||
| orderBy === TopicColumnsToSort.OUT_OF_SYNC_REPLICAS && | ||
| 'has-text-link-dark' | ||
| )} | ||
| onClick={() => setOrderBy(TopicColumnsToSort.OUT_OF_SYNC_REPLICAS)} | ||
| > | ||
| Out of sync replicas{' '} | ||
| <span className="icon is-small"> | ||
| {orderBy === TopicColumnsToSort.OUT_OF_SYNC_REPLICAS ? ( | ||
| <i className="fas fa-caret-up" /> | ||
| ) : ( | ||
| <i className="fas fa-caret-down" /> | ||
| )} | ||
| </span> | ||
| </th> |
There was a problem hiding this comment.
These th blocks look very similar, could be extracted into own component.
| {orderBy === TopicColumnsToSort.NAME ? ( | ||
| <i className="fas fa-caret-up" /> | ||
| ) : ( | ||
| <i className="fas fa-caret-down" /> | ||
| )} |
There was a problem hiding this comment.
Usually caret-up indicates that data is sorted in ascending order, and caret-down - in descending. You can use fa-sort icon to indicate that column is sortable.
kafka-ui-react-app/src/components/Topics/List/ListHeaderCell.tsx
Outdated
Show resolved
Hide resolved
| <Search | ||
| handleSearch={handleSearch} | ||
| placeholder="Search by Topic Name" | ||
| /> |
There was a problem hiding this comment.
we should be able to show current value of search query
| interface SearchProps { | ||
| handleSearch: (value: string) => void; | ||
| placeholder: string; | ||
| } |
|
Kudos, SonarCloud Quality Gate passed! |
* Implement topics' filtration
Co-authored-by: iliax <ilya.kuramshin@almatech.dev>
Implemented search bar and order by column
