ILEX-104 Search results not displaying the results got from elasticSearch

src/components/SearchResults/SearchResultsBox.jsx

@@ -29,7 +29,7 @@ const CustomViewButton = ({ view, listView, onClick, icon }) => (
     </Button>
 );
 
-const SearchResultsBox = ({ terms, searchTerm, loading }) => {
+const SearchResultsBox = ({ searchResults, searchTerm, loading }) => {
     const [numberOfVisiblePages, setNumberOfVisiblePages] = React.useState(20);
     const [listView, setListView] = React.useState('list');
 
@@ -41,7 +41,7 @@ const SearchResultsBox = ({ terms, searchTerm, loading }) => {
         <Box width={1} flex={1} display="flex" flexDirection="column" px={4} py={3} gap={3} sx={{ overflowY: 'auto' }}>
             <Grid container justifyContent={{ lg: 'space-between', xs: 'flex-end', md: 'flex-end' }} alignItems="center">
                 <Grid item xs={12} lg={6} sm={6}>
-                    <Typography variant="h5">{terms?.results?.length} results for {searchTerm} search</Typography>
+                    <Typography variant="h5">{searchResults?.length} results for {searchTerm} search</Typography>
                 </Grid>
                 <Grid item xs={12} lg={6} sm={6}>
                     <Box display="flex" alignItems="center" gap={2} justifyContent="end">
@@ -73,7 +73,7 @@ const SearchResultsBox = ({ terms, searchTerm, loading }) => {
                 </Grid>
             </Grid>
             {listView === 'list' ? (
-                <ListView searchResults={terms} loading={loading} />
+                <ListView searchResults={searchResults} loading={loading} />
             ) : (
                 <p>table</p>
             )}
@@ -89,7 +89,7 @@ CustomViewButton.propTypes = {
 };
 
 SearchResultsBox.propTypes = {
-    terms: PropTypes.object,
+    searchResults: PropTypes.object,
     searchTerm: PropTypes.string,
     loading: PropTypes.bool
 };

src/components/SearchResults/index.jsx

@@ -1,21 +1,18 @@
 import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
 import { useQuery } from '../../helpers';
-import termParser from '../../parsers/termParser';
 import SearchResultsBox from './SearchResultsBox';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import FiltersSidebar from '../Sidebar/FiltersSidebar';
-import * as mockApi from '../../api/endpoints/swaggerMockMissingEndpoints';
+import { searchAll, elasticSearch } from '../../api/endpoints';
 
-const useMockApi = () => mockApi;
 
 const SearchResults = () => {
-    const [loading, setLoading] = useState(false);
-    const [terms, setTerms] = useState({});
+    const [loading, setLoading] = useState(true);
     const [filters, setFilters] = useState([]);
     const [checkedLabels, setCheckedLabels] = useState({});
+    const [searchResults, setSearchResults] = useState([]);
     const query = useQuery();
-    const { getMatchTerms } = useMockApi();
 
     const searchTerm = query.get('searchTerm');
 
@@ -29,22 +26,13 @@ const SearchResults = () => {
         }));
     };
 
-    const fetchTerms = useRef(
-        debounce((searchTerm) => {
-            setLoading(true);
-            getMatchTerms("i")
-                .then((data) => {
-                    const parsedData = termParser(data, searchTerm);
-                    setTerms(parsedData);
-                    setFilters(parsedData.filters);
-                    setLoading(false);
-                })
-                .catch((error) => {
-                    setLoading(false);
-                    console.error(error);
-                });
-        }, 500)
-    ).current;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const fetchTerms = useCallback(debounce(async (searchTerm) => {
+        const data = await elasticSearch(searchTerm);
+        setFilters(data.filters)
+        setSearchResults(data?.results || []);
+        setLoading(false)
+    }, 500), [searchAll]);
 
     useEffect(() => {
         fetchTerms(searchTerm);
@@ -55,26 +43,30 @@ const SearchResults = () => {
         return results.filter(item => {
             for (let category in checkedLabels) {
                 if (!checkedLabels[category]) continue; // Skip empty categories
-                for (let label in checkedLabels[category]) {
-                    if (checkedLabels[category][label]) {
-                        const categoryLower = category.toLowerCase();
-                        const itemValue = item[categoryLower] || item[categoryLower === 'type' ? 'Type' : categoryLower]; // Case-insensitive check
-                        if (itemValue !== label) {
-                            return false;
-                        }
-                    }
+
+                const selectedLabels = Object.entries(checkedLabels[category])
+                    .filter(([, isChecked]) => isChecked)
+                    .map(([label]) => label);
+
+                if (selectedLabels.length === 0) continue;
+
+                const categoryLower = category.toLowerCase();
+                const itemValue = item[categoryLower] || item[categoryLower === 'type' ? 'Type' : categoryLower];
+
+                if (!selectedLabels.includes(itemValue)) {
+                    return false;
                 }
             }
             return true;
         });
     };
 
-    const filteredResults = filterResults(terms?.results || [], checkedLabels);
+    const filteredResults = filterResults(searchResults || [], checkedLabels);
 
     return (
         <>
             <FiltersSidebar filters={filters} checkedLabels={checkedLabels} handleCheckboxChange={handleCheckboxChange} />
-            <SearchResultsBox terms={filteredResults} searchTerm={searchTerm} loading={loading} />
+            <SearchResultsBox searchResults={filteredResults} searchTerm={searchTerm} loading={loading} />
         </>
     );
 };