fix: use search bar also in entities and collections grids

drodil · Nov 28, 2024 · 5dffcb2 · 5dffcb2
1 parent a03622e
commit 5dffcb2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 30 deletions.
diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx
@@ -1,13 +1,5 @@
 import React, { useEffect } from 'react';
-import {
-  Box,
-  Button,
-  Collapse,
-  Grid,
-  IconButton,
-  TextField,
-  Typography,
-} from '@material-ui/core';
+import { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';
 import { CollectionsGridContent } from './CollectionsGridContent';
 import { useQetaApi, useTranslation } from '../../hooks';
 import useDebounce from 'react-use/lib/useDebounce';
@@ -19,6 +11,7 @@ import {
 } from '../FilterPanel/FilterPanel';
 import FilterList from '@material-ui/icons/FilterList';
 import { getFiltersWithDateRange } from '../../utils';
+import { SearchBar } from '../SearchBar/SearchBar';
 
 export type CollectionsGridProps = {
   owner?: string;
@@ -106,18 +99,10 @@ export const CollectionsGrid = (props: CollectionsGridProps) => {
     <Box>
       <Grid container justifyContent="space-between">
         <Grid item xs={12} md={4}>
-          <TextField
-            id="search-bar"
-            className="text qetaUsersContainerSearchInput"
-            onChange={(
-              event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-            ) => setSearchQuery(event.target.value)}
+          <SearchBar
+            onSearch={setSearchQuery}
             label={t('collectionsPage.search.label')}
-            variant="outlined"
-            placeholder={t('collectionsPage.search.placeholder')}
-            size="small"
           />
-          <IconButton type="submit" aria-label="search" />
         </Grid>
       </Grid>
       <Grid container justifyContent="space-between">

diff --git a/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx b/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx
@@ -1,9 +1,10 @@
-import { Grid, IconButton, TextField } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { useQetaApi, useTranslation } from '../../hooks';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination';
 import { EntitiesGridContent } from './EntitiesGridContent';
+import { SearchBar } from '../SearchBar/SearchBar';
 
 type EntityFilters = {
   order: 'asc' | 'desc';
@@ -60,18 +61,10 @@ export const EntitiesGrid = () => {
   return (
     <Grid container className="qetaEntitiesContainer">
       <Grid item xs={12}>
-        <TextField
-          id="search-bar"
-          className="text qetaEntitiesContainerSearchInput"
-          onChange={(
-            event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-          ) => onSearchQueryChange(event.target.value)}
+        <SearchBar
+          onSearch={onSearchQueryChange}
           label={t('entitiesPage.search.label')}
-          variant="outlined"
-          placeholder={t('entitiesPage.search.placeholder')}
-          size="small"
         />
-        <IconButton type="submit" aria-label="search" />
       </Grid>
       <EntitiesGridContent
         response={response}

diff --git a/plugins/qeta-react/src/components/SearchBar/SearchBar.tsx b/plugins/qeta-react/src/components/SearchBar/SearchBar.tsx
@@ -22,6 +22,7 @@ const useStyles = makeStyles(
       display: 'flex',
       alignItems: 'center',
       minWidth: 300,
+      boxShadow: 'none',
     },
     input: {
       marginLeft: theme.spacing(1),