feat: refactor r search bar and fix searching

drodil · Nov 18, 2024 · 32e7b1c · 32e7b1c
1 parent 5516170
commit 32e7b1c
Show file tree

Hide file tree

Showing 26 changed files with 244 additions and 276 deletions.
diff --git a/plugins/qeta-backend/src/database/DatabaseQetaStore.ts b/plugins/qeta-backend/src/database/DatabaseQetaStore.ts
@@ -251,7 +251,7 @@ export class DatabaseQetaStore implements QetaStore {
   ): Promise<Posts> {
     const query = this.getPostsBaseQuery(user_ref);
     if (options.type) {
-      query.where('type', options.type);
+      query.where('posts.type', options.type);
     }
 
     if (options.fromDate && options.toDate) {
@@ -2724,14 +2724,14 @@ export class DatabaseQetaStore implements QetaStore {
   ) {
     if (this.db.client.config.client === 'pg') {
       query.whereRaw(
-        `(to_tsvector('english', ${columns.join(
+        `((to_tsvector('english', ${columns.join(
           ` || ' ' || `,
         )}) @@ websearch_to_tsquery('english', quote_literal(?))
           or to_tsvector('english', ${columns.join(
             ` || ' ' || `,
           )}) @@ to_tsquery('english',quote_literal(?))) or LOWER(${columns.join(
           ` || ' ' || `,
-        )}) LIKE LOWER(?)`,
+        )}) LIKE LOWER(?))`,
         [
           `${searchQuery}`,
           `${searchQuery.replaceAll(/\s/g, '+')}:*`,

diff --git a/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx b/plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx
@@ -69,7 +69,7 @@ export const AnswerCard = (props: {
                 <LinkButton entity={answerEntity} />
               </div>
             </Grid>
-            <Grid item className={styles.answerCardContent}>
+            <Grid item className={styles.answerCardContent} marginLeft={1}>
               {editMode ? (
                 <AnswerForm
                   post={question}
@@ -109,7 +109,7 @@ export const AnswerCard = (props: {
                                   size="small"
                                   color="secondary"
                                   onClick={handleDeleteModalOpen}
-                                  className={`${styles.marginLeft} qetaAnswerCardDeleteBtn`}
+                                  className={`${styles.marginRight} qetaAnswerCardDeleteBtn`}
                                   startIcon={<DeleteIcon />}
                                 >
                                   {t('deleteModal.deleteButton')}

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswerListItem.tsx
@@ -44,17 +44,17 @@ export const AnswerListItem = (props: AnswerListItemProps) => {
   return (
     <Grid
       container
-      spacing={0}
+      spacing={2}
       className={styles.questionListItem}
       justifyContent="flex-start"
     >
-      <Grid container item xs={1} justifyContent="center">
+      <Grid item justifyContent="center" style={{ paddingTop: '0px' }}>
         <div className={styles.questionCardVote}>
           <VoteButtons entity={answer} />
         </div>
       </Grid>
-      <Grid item xs={11} className={styles.questionListItemContent}>
-        <Grid container spacing={1}>
+      <Grid item className={styles.questionListItemContent}>
+        <Grid container>
           <Grid item xs={12}>
             <Typography variant="h5" component="div">
               <Link

diff --git a/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx b/plugins/qeta-react/src/components/AnswersContainer/AnswersContainer.tsx
@@ -3,7 +3,6 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import React, { useEffect } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import FilterList from '@mui/icons-material/FilterList';
@@ -20,6 +19,7 @@ import {
 } from '../FilterPanel/FilterPanel';
 import { AnswerList } from './AnswerList';
 import { useQetaApi, useTranslation } from '../../hooks';
+import { SearchBar } from '../SearchBar/SearchBar';
 
 export interface AnswersContainerProps {
   tags?: string[];
@@ -107,12 +107,12 @@ export const AnswersContainer = (props: AnswersContainerProps) => {
     });
   };
 
-  const onSearchQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const onSearchQueryChange = (query: string) => {
     onPageChange(1);
-    if (event.target.value) {
-      analytics.captureEvent('qeta_search', event.target.value);
+    if (query) {
+      analytics.captureEvent('qeta_search', query);
     }
-    setSearchQuery(event.target.value);
+    setSearchQuery(query);
   };
 
   useDebounce(
@@ -216,16 +216,9 @@ export const AnswersContainer = (props: AnswersContainerProps) => {
       )}
       <Grid container justifyContent="space-between">
         <Grid item xs={12} md={4}>
-          <TextField
-            id="search-bar"
-            fullWidth
-            onChange={onSearchQueryChange}
+          <SearchBar
+            onSearch={onSearchQueryChange}
             label={t('answerContainer.search.label')}
-            className="qetaAnswersContainerSearchInput"
-            variant="outlined"
-            placeholder={t('answerContainer.search.placeholder')}
-            size="small"
-            style={{ marginBottom: '5px' }}
           />
         </Grid>
       </Grid>

diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGrid.tsx
@@ -1,18 +1,17 @@
 import React, { useEffect } from 'react';
 import Collapse from '@mui/material/Collapse';
-import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import { CollectionsGridContent } from './CollectionsGridContent';
 import { useQetaApi, useTranslation } from '../../hooks';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination';
 import { CollectionFilters, FilterPanel } from '../FilterPanel/FilterPanel';
 import FilterList from '@mui/icons-material/FilterList';
 import { getFiltersWithDateRange } from '../../utils';
+import { SearchBar } from '../SearchBar/SearchBar';
 
 export type CollectionsGridProps = {
   owner?: string;
@@ -98,18 +97,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" size="large" />
         </Grid>
       </Grid>
       <Grid container justifyContent="space-between">

diff --git a/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx b/plugins/qeta-react/src/components/CollectionsGrid/CollectionsGridContent.tsx
@@ -1,5 +1,5 @@
 import { CollectionsResponse } from '@drodil/backstage-plugin-qeta-common';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { WarningPanel } from '@backstage/core-components';
 import Grid from '@mui/material/Grid';
 import { CollectionsGridItem } from './CollectionsGridItem';
@@ -13,16 +13,9 @@ export const CollectionsGridContent = (props: {
   response?: CollectionsResponse;
 }) => {
   const { loading, error, response } = props;
-  const [initialLoad, setInitialLoad] = useState(true);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (!loading) {
-      setInitialLoad(false);
-    }
-  }, [initialLoad, loading]);
-
-  if (loading && initialLoad) {
+  if (loading) {
     return <LoadingGrid />;
   }
 

diff --git a/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx b/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGrid.tsx
@@ -1,11 +1,11 @@
-import IconButton from '@mui/material/IconButton';
 import Grid from '@mui/material/Grid';
-import TextField from '@mui/material/TextField';
 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';
+import Typography from '@mui/material/Typography';
 
 type EntityFilters = {
   order: 'asc' | 'desc';
@@ -60,35 +60,40 @@ export const EntitiesGrid = () => {
   }, [response, entitiesPerPage]);
 
   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)}
-          label={t('entitiesPage.search.label')}
-          variant="outlined"
-          placeholder={t('entitiesPage.search.placeholder')}
-          size="small"
-        />
-        <IconButton type="submit" aria-label="search" size="large" />
+    <>
+      <Grid container className="qetaEntitiesContainer">
+        <Grid item xs={12} md={4}>
+          <SearchBar
+            onSearch={onSearchQueryChange}
+            label={t('entitiesPage.search.label')}
+          />
+        </Grid>
       </Grid>
-      <EntitiesGridContent
-        response={response}
-        loading={loading}
-        error={error}
-      />
-      {response && response?.total > 0 && (
-        <QetaPagination
-          pageSize={entitiesPerPage}
-          handlePageChange={(_e, p) => setPage(p)}
-          handlePageSizeChange={e => setEntitiesPerPage(Number(e.target.value))}
-          page={page}
-          pageCount={pageCount}
+      <Grid container justifyContent="space-between">
+        {response && (
+          <Grid item xs={12}>
+            <Typography variant="h6" className="qetaEntitiesContainerTitle">
+              {t('entitiesPage.entities', { count: response.total })}
+            </Typography>
+          </Grid>
+        )}
+        <EntitiesGridContent
+          response={response}
+          loading={loading}
+          error={error}
         />
-      )}
-    </Grid>
+        {response && response?.total > 0 && (
+          <QetaPagination
+            pageSize={entitiesPerPage}
+            handlePageChange={(_e, p) => setPage(p)}
+            handlePageSizeChange={e =>
+              setEntitiesPerPage(Number(e.target.value))
+            }
+            page={page}
+            pageCount={pageCount}
+          />
+        )}
+      </Grid>
+    </>
   );
 };
diff --git a/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGridContent.tsx b/plugins/qeta-react/src/components/EntitiesGrid/EntitiesGridContent.tsx
@@ -1,6 +1,5 @@
-import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';
 import { WarningPanel } from '@backstage/core-components';
 import { useTranslation } from '../../hooks';
@@ -15,18 +14,9 @@ export const EntitiesGridContent = (props: {
 }) => {
   const { response, loading, error } = props;
   const { t } = useTranslation();
-  const [initialLoad, setInitialLoad] = useState(true);
-  useEffect(() => {
-    if (!loading) {
-      setInitialLoad(false);
-    }
-  }, [initialLoad, loading]);
 
   if (loading) {
-    if (initialLoad) {
-      return <LoadingGrid />;
-    }
-    return null;
+    return <LoadingGrid />;
   }
 
   if (error || response === undefined) {
@@ -42,17 +32,10 @@ export const EntitiesGridContent = (props: {
   }
 
   return (
-    <>
-      <Grid item xs={12}>
-        <Typography variant="h6" className="qetaEntitiesContainerTitle">
-          {t('entitiesPage.entities', { count: response.total })}
-        </Typography>
-      </Grid>
-      <Grid container item xs={12} alignItems="stretch">
-        {response?.entities.map(entity => (
-          <EntitiesGridItem entity={entity} key={entity.entityRef} />
-        ))}
-      </Grid>
-    </>
+    <Grid container item xs={12} alignItems="stretch">
+      {response?.entities.map(entity => (
+        <EntitiesGridItem entity={entity} key={entity.entityRef} />
+      ))}
+    </Grid>
   );
 };
diff --git a/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx b/plugins/qeta-react/src/components/FilterPanel/FilterPanel.tsx
@@ -194,7 +194,7 @@ export const FilterPanel = <T extends Filters>(props: FilterPanelProps<T>) => {
   const collectionFilters = isCollectionFilters(filters);
 
   return (
-    <Box className={`qetaFilterPanel ${styles.filterPanel}`}>
+    <Box className={`qetaFilterPanel ${styles.filterPanel}`} marginTop={2}>
       <Grid
         container
         spacing={4}

diff --git a/plugins/qeta-react/src/components/LoadingGrid/LoadingGrid.tsx b/plugins/qeta-react/src/components/LoadingGrid/LoadingGrid.tsx
@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Grid';
-import CircularProgress from '@mui/material/CircularProgress';
 import React from 'react';
+import Skeleton from '@mui/material/Skeleton';
 
 export const LoadingGrid = () => {
   return (
@@ -11,7 +11,7 @@ export const LoadingGrid = () => {
       style={{ height: '20vh' }}
     >
       <Grid item>
-        <CircularProgress />
+        <Skeleton variant="rectangular" height={200} />
       </Grid>
     </Grid>
   );

diff --git a/plugins/qeta-react/src/components/PostsContainer/PostList.tsx b/plugins/qeta-react/src/components/PostsContainer/PostList.tsx
@@ -3,7 +3,7 @@ import Card from '@mui/material/Card';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { PostListItem } from './PostListItem';
 import { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';
 import { NoPostsCard } from './NoPostsCard';
@@ -41,15 +41,8 @@ export const PostList = (props: {
     type,
   } = props;
   const listRef = useRef<HTMLDivElement | null>(null);
-  const [initialLoad, setInitialLoad] = useState(true);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (!loading) {
-      setInitialLoad(false);
-    }
-  }, [initialLoad, loading]);
-
   const handlePageChange = (
     _event: React.ChangeEvent<unknown>,
     value: number,
@@ -68,10 +61,7 @@ export const PostList = (props: {
   };
 
   if (loading) {
-    if (initialLoad) {
-      return <LoadingGrid />;
-    }
-    return null;
+    return <LoadingGrid />;
   }
 
   const itemType = (type ?? 'post') as any;

diff --git a/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx b/plugins/qeta-react/src/components/PostsContainer/PostListItem.tsx
@@ -85,7 +85,7 @@ export const PostListItem = (props: PostListItemProps) => {
             style={{
               paddingTop: '0.4rem',
               paddingBottom: '0.4rem',
-              paddingLeft: '0.4rem',
+              paddingLeft: '0.8rem',
             }}
           >
             {type === undefined && (