feat: add search to topics (#533)

Co-authored-by: Расул <[email protected]>

src/components/App/MainToolbar/index.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import AddContentIcon from '~/components/Icons/AddContentIcon'
 import AddSourceIcon from '~/components/Icons/AddSourceIcon'
 import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
-import SettingsIcon from '~/components/Icons/SettingsIcon'
 import SourcesTableIcon from '~/components/Icons/SourcesTableIcon'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
@@ -50,12 +49,12 @@ export const MainToolbar = () => {
         </IconWrapper>
         <Text>Sentiment Data</Text>
       </ActionButton>
-      <ActionButton onClick={openSourceAddModal}>
+      {/* <ActionButton onClick={openSourceAddModal}>
         <IconWrapper>
           <SettingsIcon />
         </IconWrapper>
         <Text>Change Display</Text>
-      </ActionButton>
+      </ActionButton> */}
     </Wrapper>
   )
 }

src/components/SourcesTableModal/SourcesView/Topics/Search/index.tsx

@@ -0,0 +1,52 @@
+import { Divider } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
+import InputBase from '@mui/material/InputBase'
+import Paper from '@mui/material/Paper'
+import { useState } from 'react'
+import styled from 'styled-components'
+import ClearIcon from '~/components/Icons/ClearIcon'
+import SearchIcon from '~/components/Icons/SearchIcon'
+import { useTopicsStore } from '~/stores/useTopicsStore'
+
+export const Search = () => {
+  const [filters, setFilters] = useTopicsStore((s) => [s.filters, s.setFilters])
+  const [inputValue, setInputValue] = useState('')
+
+  const handleSearch = () => setFilters({ search: inputValue })
+
+  const resetSearch = () => {
+    setInputValue('')
+
+    if (filters.search) {
+      setFilters({ search: '' })
+    }
+  }
+
+  return (
+    <Paper component="form" sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 300 }}>
+      <InputBase
+        inputProps={{ 'aria-label': 'search topic' }}
+        onChange={(e) => setInputValue(e.target.value)}
+        placeholder="Search"
+        size="small"
+        sx={{ ml: 1, flex: 1 }}
+        value={inputValue}
+      />
+      {inputValue && (
+        <>
+          <StyledButton aria-label="search" onClick={resetSearch} type="button">
+            <ClearIcon />
+          </StyledButton>
+          <Divider orientation="vertical" sx={{ height: 28, m: 0.5 }} />
+        </>
+      )}
+      <StyledButton aria-label="search" onClick={handleSearch} type="button">
+        <SearchIcon />
+      </StyledButton>
+    </Paper>
+  )
+}
+
+const StyledButton = styled(IconButton)`
+  font-size: 24px;
+`

src/components/SourcesTableModal/SourcesView/Topics/index.tsx

@@ -10,7 +10,8 @@ import { Topic } from '~/types'
 import { colors } from '~/utils/colors'
 import { Heading } from '../common'
 import { EditTopicModal } from './EditTopicModal'
-import { Filter } from './Filter'
+import { Search } from './Search'
+import { Filter } from './Sort'
 import Table from './Table'
 
 export const TopicSources = () => {
@@ -79,15 +80,16 @@ export const TopicSources = () => {
   return (
     <>
       <Wrapper direction="column" justify="flex-end">
-        <Heading align="flex-start" justify="space-between">
+        <Heading align="flex-start" direction="row" justify="space-between">
           <Text className="title">Topics</Text>
-        </Heading>
-
-        <ActionsWrapper>
           <Button disabled={loading} onClick={() => setFilters({ muted: !filters.muted })} size="medium">
             {filters.muted ? 'Show Unmuted' : 'Show Muted'}
             {loading && <ClipLoader color={colors.BLUE_PRESS_STATE} size={10} />}
           </Button>
+        </Heading>
+
+        <ActionsWrapper>
+          <Search />
 
           <Filter currentFilter={filters.sortBy} onChangeFilter={handleFilterChange} />
         </ActionsWrapper>