Merge branch 'QF-548-apply-search-with-kalimat-in-the-side-drawer'

quran · Jul 9, 2024 · ed4f1bf · ed4f1bf
2 parents b8cda48 + 4059d34
commit ed4f1bf
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 130 deletions.
diff --git a/src/components/Navbar/SearchDrawer/SearchDrawer.tsx b/src/components/Navbar/SearchDrawer/SearchDrawer.tsx
@@ -1,5 +1,7 @@
+/* eslint-disable react-func/max-lines-per-function */
+/* eslint-disable max-lines */
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useState, RefObject } from 'react';
+import React, { RefObject, useEffect, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
@@ -12,12 +14,11 @@ import useDebounce from '@/hooks/useDebounce';
 import useFocus from '@/hooks/useFocusElement';
 import { selectNavbar } from '@/redux/slices/navbar';
 import { selectSelectedTranslations } from '@/redux/slices/QuranReader/translations';
-import { addSearchHistoryRecord } from '@/redux/slices/Search/search';
 import { selectIsSearchDrawerVoiceFlowStarted } from '@/redux/slices/voiceSearch';
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { areArraysEqual } from '@/utils/array';
-import { logButtonClick, logEmptySearchResults, logTextSearchQuery } from '@/utils/eventLogger';
-import { getSearchResults } from 'src/api';
+import { logButtonClick } from '@/utils/eventLogger';
+import { addToSearchHistory, searchGetResults } from '@/utils/search';
 import { SearchResponse } from 'types/ApiResponses';
 
 const SearchBodyContainer = dynamic(() => import('@/components/Search/SearchBodyContainer'), {
@@ -32,6 +33,8 @@ const VoiceSearchBodyContainer = dynamic(
   },
 );
 
+const FIRST_PAGE_NUMBER = 1;
+const PAGE_SIZE = 10;
 const DEBOUNCING_PERIOD_MS = 1000;
 
 const SearchDrawer: React.FC = () => {
@@ -53,44 +56,21 @@ const SearchDrawer: React.FC = () => {
     }
   }, [isOpen, focusInput]);
 
-  // This useEffect is triggered when the debouncedSearchQuery value changes
-  // eslint-disable-next-line react-func/max-lines-per-function
   useEffect(() => {
     // only when the search query has a value we call the API.
     if (debouncedSearchQuery) {
-      dispatch({ type: addSearchHistoryRecord.type, payload: debouncedSearchQuery });
-      logTextSearchQuery(debouncedSearchQuery, SearchQuerySource.SearchDrawer);
-      setIsSearching(true);
-      getSearchResults({
-        query: debouncedSearchQuery,
-        ...(selectedTranslations &&
-          !!selectedTranslations.length && {
-            filterTranslations: selectedTranslations.join(','),
-          }),
-      })
-        .then((response) => {
-          if (response.status === 500) {
-            setHasError(true);
-          } else {
-            setSearchResult(response);
-            // if there is no navigations nor verses in the response
-            if (response.pagination.totalRecords === 0 && !response.result.navigation.length) {
-              logEmptySearchResults({
-                query: debouncedSearchQuery,
-                source: SearchQuerySource.SearchDrawer,
-              });
-            }
-          }
-        })
-        .catch(() => {
-          setHasError(true);
-        })
-        .finally(() => {
-          setIsSearching(false);
-        });
-    } else {
-      // reset the result
-      setSearchResult(null);
+      addToSearchHistory(dispatch, debouncedSearchQuery, SearchQuerySource.SearchDrawer);
+      searchGetResults(
+        SearchQuerySource.SearchDrawer,
+        debouncedSearchQuery,
+        FIRST_PAGE_NUMBER,
+        PAGE_SIZE,
+        setIsSearching,
+        setHasError,
+        setSearchResult,
+        null,
+        selectedTranslations?.length && selectedTranslations.join(','),
+      );
     }
   }, [debouncedSearchQuery, selectedTranslations, dispatch]);
 

diff --git a/src/components/Search/NoResults/index.tsx b/src/components/Search/NoResults/index.tsx
@@ -4,16 +4,13 @@ import useTranslation from 'next-translate/useTranslation';
 
 import styles from './NoResults.module.scss';
 
-import AdvancedSearchLink from '@/components/Navbar/SearchDrawer/AdvancedSearchLink';
 import IconSearch from '@/icons/search.svg';
 
 interface Props {
-  searchUrl?: string;
   searchQuery: string;
-  isSearchDrawer: boolean;
 }
 
-const NoResults: React.FC<Props> = ({ searchQuery, searchUrl = '', isSearchDrawer }) => {
+const NoResults: React.FC<Props> = ({ searchQuery }) => {
   const { t } = useTranslation('common');
   return (
     <>
@@ -28,7 +25,6 @@ const NoResults: React.FC<Props> = ({ searchQuery, searchUrl = '', isSearchDrawe
           </p>
         </div>
       </div>
-      {isSearchDrawer && <AdvancedSearchLink searchUrl={searchUrl} />}
     </>
   );
 };

diff --git a/src/components/Search/SearchBodyContainer.tsx b/src/components/Search/SearchBodyContainer.tsx
@@ -9,7 +9,6 @@ import styles from './SearchBodyContainer.module.scss';
 
 import SearchResults from '@/components/Search/SearchResults';
 import Spinner, { SpinnerSize } from '@/dls/Spinner/Spinner';
-import { getSearchQueryNavigationUrl } from '@/utils/navigation';
 import { SearchResponse } from 'types/ApiResponses';
 
 interface Props {
@@ -38,7 +37,6 @@ const SearchBodyContainer: React.FC<Props> = ({
   onPageChange,
 }) => {
   const { t } = useTranslation('common');
-  const searchUrl = getSearchQueryNavigationUrl(searchQuery);
   const isEmptyResponse =
     searchResult &&
     searchResult.pagination.totalRecords === 0 &&
@@ -63,11 +61,7 @@ const SearchBodyContainer: React.FC<Props> = ({
               {!hasError && searchResult && (
                 <>
                   {isEmptyResponse ? (
-                    <NoResults
-                      searchQuery={searchQuery}
-                      searchUrl={searchUrl}
-                      isSearchDrawer={isSearchDrawer}
-                    />
+                    <NoResults searchQuery={searchQuery} />
                   ) : (
                     <SearchResults
                       onSearchResultClicked={onSearchResultClicked}

diff --git a/src/components/TarteelVoiceSearch/BodyContainer/index.tsx b/src/components/TarteelVoiceSearch/BodyContainer/index.tsx
@@ -72,7 +72,7 @@ const VoiceSearchBodyContainer: React.FC<Props> = ({ isCommandBar = false }) =>
           [styles.noResultContainer]: isCommandBar,
         })}
       >
-        <NoResults searchQuery={partialTranscript} isSearchDrawer={false} />
+        <NoResults searchQuery={partialTranscript} />
       </div>
     );
   }

diff --git a/src/pages/search.tsx b/src/pages/search.tsx
@@ -1,19 +1,15 @@
 /* eslint-disable react-func/max-lines-per-function */
 /* eslint-disable max-lines */
-import React, { useState, useEffect, useMemo, useCallback, useRef, RefObject } from 'react';
+import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { GetStaticProps, NextPage } from 'next';
 import { useRouter } from 'next/router';
 import useTranslation from 'next-translate/useTranslation';
+import { useDispatch } from 'react-redux';
 
 import styles from './search.module.scss';
 
-import {
-  getAvailableLanguages,
-  getAvailableTranslations,
-  getSearchResults,
-  getNewSearchResults,
-} from '@/api';
+import { getAvailableLanguages, getAvailableTranslations } from '@/api';
 import NextSeoWrapper from '@/components/NextSeoWrapper';
 import TranslationsFilter from '@/components/Search/Filters/TranslationsFilter';
 import SearchBodyContainer from '@/components/Search/SearchBodyContainer';
@@ -25,22 +21,17 @@ import useDebounce from '@/hooks/useDebounce';
 import useFocus from '@/hooks/useFocusElement';
 import FilterIcon from '@/icons/filter.svg';
 import SearchIcon from '@/icons/search.svg';
-import { SearchMode } from '@/types/Search/SearchRequestParams';
-import SearchService from '@/types/Search/SearchService';
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { getAllChaptersData } from '@/utils/chapter';
-import {
-  logButtonClick,
-  logEmptySearchResults,
-  logEvent,
-  logSearchResults,
-  logTextSearchQuery,
-  logValueChange,
-} from '@/utils/eventLogger';
+import { logButtonClick, logEvent, logValueChange } from '@/utils/eventLogger';
 import filterTranslations from '@/utils/filter-translations';
 import { getLanguageAlternates, toLocalizedNumber } from '@/utils/locale';
 import { getCanonicalUrl } from '@/utils/navigation';
-import { getDefaultTranslationIdsByLang } from '@/utils/search';
+import {
+  addToSearchHistory,
+  getDefaultTranslationIdsByLang,
+  searchGetResults,
+} from '@/utils/search';
 import { SearchResponse } from 'types/ApiResponses';
 import AvailableLanguage from 'types/AvailableLanguage';
 import AvailableTranslation from 'types/AvailableTranslation';
@@ -72,6 +63,7 @@ const Search: NextPage<SearchProps> = ({ translations }): JSX.Element => {
   const [searchResult, setSearchResult] = useState<SearchResponse>(null);
   // Debounce search query to avoid having to call the API on every type. The API will be called once the user stops typing.
   const debouncedSearchQuery = useDebounce<string>(searchQuery, DEBOUNCING_PERIOD_MS);
+  const dispatch = useDispatch();
   // the query params that we want added to the url
   const queryParams = useMemo(
     () => ({
@@ -151,68 +143,17 @@ const Search: NextPage<SearchProps> = ({ translations }): JSX.Element => {
    */
   const getResults = useCallback(
     (query: string, page: number, translation: string, language: string) => {
-      setIsSearching(true);
-      logTextSearchQuery(query, SearchQuerySource.SearchPage);
-      getSearchResults({
+      searchGetResults(
+        SearchQuerySource.SearchPage,
         query,
-        filterLanguages: language,
-        size: PAGE_SIZE,
         page,
-        ...(translation && { filterTranslations: translation }), // translations will be included only when there is a selected translation
-      })
-        .then(async (response) => {
-          if (response.status === 500) {
-            setHasError(true);
-          } else {
-            setSearchResult({ ...response, service: SearchService.QDC });
-            const noQdcResults =
-              response.pagination.totalRecords === 0 && !response.result.navigation.length;
-            // if there is no navigations nor verses in the response
-            if (noQdcResults) {
-              logEmptySearchResults({
-                query,
-                source: SearchQuerySource.SearchPage,
-                service: SearchService.QDC,
-              });
-              const kalimatResponse = await getNewSearchResults({
-                mode: SearchMode.Advanced,
-                query,
-                size: PAGE_SIZE,
-                filterLanguages: language,
-                page,
-                exactMatchesOnly: 0,
-                // translations will be included only when there is a selected translation
-                ...(translation && {
-                  filterTranslations: translation,
-                  translationFields: 'resource_name',
-                }),
-              });
-              setSearchResult({
-                ...kalimatResponse,
-                service: SearchService.KALIMAT,
-              });
-              if (kalimatResponse.pagination.totalRecords === 0) {
-                logEmptySearchResults({
-                  query,
-                  source: SearchQuerySource.SearchPage,
-                  service: SearchService.KALIMAT,
-                });
-              } else {
-                logSearchResults({
-                  query,
-                  source: SearchQuerySource.SearchPage,
-                  service: SearchService.KALIMAT,
-                });
-              }
-            }
-          }
-        })
-        .catch(() => {
-          setHasError(true);
-        })
-        .finally(() => {
-          setIsSearching(false);
-        });
+        PAGE_SIZE,
+        setIsSearching,
+        setHasError,
+        setSearchResult,
+        language,
+        translation,
+      );
     },
     [],
   );
@@ -229,6 +170,8 @@ const Search: NextPage<SearchProps> = ({ translations }): JSX.Element => {
         setCurrentPage(1);
       }
 
+      addToSearchHistory(dispatch, debouncedSearchQuery, SearchQuerySource.SearchPage);
+
       getResults(
         debouncedSearchQuery,
         // if it is the initial search request, use the page number in the url, otherwise, reset it
-Original file line number
+Diff line change
@@ Expand Up @@
               [styles.noResultContainer]: isCommandBar,
             })}
           >
-            <NoResults searchQuery={partialTranscript} isSearchDrawer={false} />
+            <NoResults searchQuery={partialTranscript} />
           </div>
         );
       }
@@ Expand Down @@